【easeljs】矢量形状 Shape类

mengbo 发布于2019-08-22 11:00 / 1528人阅读

摘要：类介绍继承自一个形状允许你在显示列表中显示矢量图。它包含一个带有所有绘制矢量图形的方法的图形实例。实例可以在多个实例之间共享，以做到一样的矢量图形在画布上有多个不同位置和不同变形的复制。

类介绍

继承自 DisplayObject

一个Shape（形状）允许你在显示列表中显示矢量图。它包含一个带有所有绘制矢量图形的方法的Graphics(图形)实例。Graphics实例可以在多个Shape实例之间共享，以做到一样的矢量图形在画布上有多个不同位置和不同变形的复制。

如果这个矢量图在之后的绘制中不会改变样子，你可以使用cache方法把它缓存起来，以减少再次渲染时的性能花销。

代码例子：

var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100);
var shape = new createjs.Shape(graphics);

//也可以使用Shape的graphics属性绘制出与上面一样的效果
var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);

方法 addEventListener

给形状加事件侦听器，不知道为什么不用jq惯用的on来命名。

cache

缓存形状

clone

克隆

dispatchEvent draw getBounds getCacheDataURL getConcatenatedDisplayProps getConcatenatedMatrix getMatrix getTransformedBounds globalToLocal hasEventListener

判断是否有指定的事件侦听

hitTest

碰撞检测

isVisible

是否正在显示

localToGlobal

坐标转换-从局部到全局
坐标转换对没有做过游戏的人，或者没有做过嵌套显示物体的人来说可能不知道用来干嘛。这有个例子：如果舞台的坐标系原点在左上角，向右和下是正，舞台正中央又有一个小场景，这个小场景内的物体是要跟着场景做变形，旋转等操作的，所以这个小场景内的物体最好是相对于小场景来定位，也就是说小场景里面的物体都使用小场景的坐标系（相当于css中position: absolute;）。这时，如果有个需求是需要判断鼠标指针在哪个物体上时，就出问题了。因为鼠标指针的坐标是相对于舞台的，而物体的坐标是相对于小场景的，在小场景中的物体坐标即使是0,0，也不是显示在舞台原点，而是显示在小场景的原点，这时候就要用到坐标转换了。

localToLocal

坐标转换-从局部到局部

off on removeAllEventListeners removeEventListener set setBounds setTransform toString uncache updateCache updateContext willTrigger

GPU云服务器云服务器 easeljs easeljs-canvas shape android_shape定义

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91610.html

【easeljs】显示对象基础 DisplayObject 类

摘要：类介绍继承自方法把此显示对象写进一个新的隐藏的，然后用于接下来的绘制。缓存好的这个显示对象，可以自由地移动旋转渐消。类介绍继承自 EventDispatcher DisplayObject is an abstract class that should not be constructed directly. Instead construct subclasses such a...

amc 2019-08-19 17:31 评论0 收藏0
【easeljs】矢量绘图工具 Graphics类

摘要：类介绍类公开了一个易于使用的，用于生成矢量图和把它们绘制到指定的内容里的。注意，你可以不需要依赖框架，通过直接调用来使用。或者它也可以和对象一起，用于在显示列表中绘制矢量图形。最后创建的可以通过访问之后更新填充颜色或者把它的填充改成一个位图类介绍 Graphics类公开了一个易于使用的，用于生成矢量图和把它们绘制到指定的内容里的API。注意，你可以不需要依赖EaselJS框架，通过直...

刘玉平 2019-08-22 11:00 评论0 收藏0
模拟easeljs做动画

摘要：昨天看了老外的视频教程，介绍了做大大节约了开发的成本，老外用原生的和各实现了一遍方块旋转动画。昨天看了老外的视频教程，介绍了easeljs做canvas大大节约了开发的成本，老外用原生的canvas和easeljs 各实现了一遍方块旋转动画。这时的我感觉很惊讶，原来动画做起来并不是我想得这么复杂，于是自己用模拟easeljs也做了一个动画旋转，感觉棒棒哒～ ...

Taste 2019-08-19 17:37 评论0 收藏0