资讯专栏INFORMATION COLUMN

【easeljs】显示对象基础 DisplayObject 类

amc / 1876人阅读

摘要:类介绍继承自方法把此显示对象写进一个新的隐藏的,然后用于接下来的绘制。缓存好的这个显示对象,可以自由地移动旋转渐消。

类介绍

继承自 EventDispatcher

DisplayObject is an abstract class that should not be constructed directly. Instead construct subclasses such as Container, Bitmap, and Shape. DisplayObject is the base class for all display classes in the EaselJS library. It defines the core properties and methods that are shared between all display objects, such as transformation properties (x, y, scaleX, scaleY, etc), caching, and mouse handlers.

方法 cache (x,y,width,height[,scale=1])

Defined in cache:749
把此显示对象写进一个新的隐藏的canvas,然后用于接下来的绘制。此显示对象可能有多个child,也可能有多个滤镜,stage每次update需要绘制这个对象的时候都会重新绘制所有child和滤镜,因此可以用这个缓存起来,下次直接把它放上画布速度就快了。缓存好的这个显示对象,可以自由地移动、旋转、渐消(faded)。然而,如果它的内容发生变化,你必须手动调用updateCache() 或者重新使用 cache()。你必须通过x, y, w, 和 h参数,指定缓存的区域,这里指定的矩形区域会被渲染和缓存,且使用的是这个对象的坐标系。

例如如果你定义了一个形状,而且在形状里0,0位置画一个半径25的圆形:

 var shape = new createjs.Shape();
 shape.graphics.beginFill("#ff0000").drawCircle(0, 0, 25);
 myShape.cache(-25, -25, 50, 50);
 

参数:

x Number
需要缓存的区域的x值(此区域指的是此对象本身的区域,坐标系是此对象本身的)

y Number
需要缓存的区域的y值(此区域指的是此对象本身的区域,坐标系是此对象本身的)

width Number
需要缓存的区域宽度(此区域指的是此对象本身的区域)

height Number
需要缓存的区域高度(此区域指的是此对象本身的区域).

[scale=1] Number optional
缓存的scale会自动创建。例如使用myShape.cache(0,0,100,100,2)缓存一个矢量形状,然后得出的缓存canvas会是200x200 px。这个可以让你更保真地放大和旋转缓存元素。默认是1。

注意1:滤镜要在缓存之前指定。一些滤镜(例如 BlurFilter)和scale一起使用是不会产生效果的。(这一点是官方翻译过来的,应该是指注意3中提到的问题吧)
注意2:通常,最终的缓存canvas的面积是widthscale乘以heightscale,然而一些滤镜(例如 BlurFilter)会给原对象添加宽度(可以看到使用过BlurFilter的矩形,边缘已经不是一条线了,而是扩展出一些像素出去了的),所以缓存时的宽度注意加上这些扩展出来的。怎么获取BlurFilter扩展出的像素
注意3:注意:width和height两个参数,对于已经用scale改变过形状大小的对象来说,应该填它原来的宽度,而不是改变大小后的宽度,比如一个矩形原始宽度是100px,设置了scaleX=0.5,填这个值时,应该填100,而不是50!(这是我理解了之后加的,官方并没有这样说,而且似乎只有加了BlurFilter的对象才会这样,我现在在进行实际开发,不能做实验,晚些有空再做实验吧。)

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

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

相关文章

  • easeljs】事件汇总

    摘要:定义于,表示只有这个对象才有这个事件。加入版本,表示从这个版本起才加入这个事件,老版本没有这个事件。这是目前唯一非点击的鼠标输入事件。这事件在拖拽和类似的需求里很有用。这个事件一定要启用。 文章说明:为了方便我自己查找easeljs的所有事件,所以我从easeljs的文档里抄过来加上自己的翻译,会慢慢补全,漏了的,错了的,评论一下我会补上去哦。(不确定翻译对不对的地方我会留着原文。) ...

    impig33 评论0 收藏0
  • easeljs显示位图 Bitmap

    摘要:类介绍继承自一个对象绘制一个在显示列表中的图像,或者视频。带有的会用跨源数据感染,从而阻止交互性。你可以在把图像传给前在图像上设置标识绕过它,例如构造函数参数要显示的图像的资源对象,或者是它的。 类介绍 继承自 DisplayObject A Bitmap represents an Image, Canvas, or Video in the display list. A Bitm...

    elarity 评论0 收藏0
  • easeljs】矢量形状 Shape

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

    mengbo 评论0 收藏0
  • 从零到一,撸一个在线斗地主(上篇)

    摘要:原文从零到一,撸一个在线斗地主上篇作者背景朋友来深圳玩,若说到在深圳有什么好玩的,那当然是宅在家里斗地主了可是天算不如人算,扑克牌丢了几张不全大热天的,谁愿意出去买牌啊。 原文:从零到一,撸一个在线斗地主(上篇) | AlloyTeam作者:TAT.vorshen 背景:朋友来深圳玩,若说到在深圳有什么好玩的,那当然是宅在家里斗地主了!可是天算不如人算,扑克牌丢了几张不全……大热天的,...

    raoyi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<