【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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cnblogs

Css3新特性总结之边框与背景(二)

一、条纹背景 利用background为linear-gradient函数实现,linear-gradient取值如下: <angle>:角度,渐变的方向 t...

2029
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(9)---使用公式

Spread的公式计算引擎支持300多种内置函数,并支持通过内置函数和运算符来自定义公式。支持的函数包括日期、时间函数、工程计算函数、财务计算函数、逻辑函数、数...

2265
来自专栏前端儿

CSS3的变形transform、过渡transition、动画animation学习

变形有rotate旋转、scale缩放、translate位移、skew倾斜、matrix矩阵变形、perspective透视几种操作,通过例子来了解各个操作

2751
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少

1645
来自专栏Android机动车

用数学思维实现雷达分析图

前段时间回看里约奥运会的国球比赛,岛国媒体给我龙队一个响亮的称号—— 六边形战士 !

1142
来自专栏进击的君君的前端之路

CSS理解之border

1703
来自专栏编程坑太多

D3.js仪表盘的实现

5322
来自专栏腾讯IVWEB团队的专栏

WebGL 纹理颜色原理

现在已经知道顶点着色器和片段着色器一起决定着向颜色缓冲区写入颜色信息并最终呈现出来,那么这个过程是什么样,如果图形的颜色需要用现有图片来渲染那么又该如何操作?

5611
来自专栏欧阳大哥的轮子

路径布局-基于数学函数的视图布局方法

路径布局MyPathLayout是MyLayout布局体系中的第7种布局体系,在这种布局体系中您只需要提供一个坐标轴、一个曲线函数、以及视图之间的距离这三个要素...

732
来自专栏柠檬先生

css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值。   主要包括四个属性:     执行变换的属性:...

24510

扫码关注云+社区

领取腾讯云代金券