【easeljs】矢量形状 Shape类

类介绍

继承自 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

    原文作者:黒之染
    原文地址: https://segmentfault.com/a/1190000004329089
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞