Easeljs之DisplayObject阅读

Parkeeers

Methods

  • cache ( x y width height [scale=1] [options=undefined] )
    Parameters:

    • x Number
      The x coordinate origin for the cache region.
    • y Number
      The y coordinate origin for the cache region.
    • width Number
      The width of the cache region.
    • height Number
      The height of the cache region.
    • [scale=1] Number optional
      The scale at which the cache will be created. For example, if you cache a vector shape using myShape.cache(0,0,100,100,2) then the resulting cacheCanvas will be 200x200 px. This lets you scale and rotate cached elements with greater fidelity. Default is 1.
    • [options=undefined] Object optional
      Specify additional parameters for the cache logic

      **作用:**

      用来缓存一些不常用的元素或者是绘制比较复杂的图形,缓存到一个心得元素中保存起来,
      在每次更新画布的时候,就不会re-render,从而以提高性能

  • clone ()
    返回当前实例的副本,
  • dispatchEvent()
    Dispatches the specified event to all listeners.发布制定的事件给所有的订阅者
  • draw ( ctx ,[ignoreCache=false] ) Boolean
    绘制显示对象到指定的上下文,忽略原有的 visible, alpha, shadow, and transform ,返回值是Boolean
  • getBounds() Rectangle
    返回显示对象局部坐标系表示的矩形,并不是每一个显示对象都能计算自己的边界,那么需要使用setBound设置后,再进行获取边界信息
  • globalToLocal ( x y [pt] ) Point
    这个方法有待再研究。官方定义:Transforms the specified x and y position from the global (stage) coordinate space to the coordinate space of the display object. For example, this could be used to determine the current mouse position within the display object. Returns a Point instance with x and y properties correlating to the transformed position in the display object's coordinate space
    我的理解,x, y是显示对象新的位置,这个对象返回一个point对象,这个对象也有x,y属性,但是这个属性是表示原来的位置,与现在位置的一个差值,负值表示通过globalToLocal进行了左移,正值相反,我们从官方这个例子看一下:

         displayObject.x = 300;
         displayObject.y = 200;
         stage.addChild(displayObject);
         var point = displayObject.globalToLocal(100, 100);
         // Results point in x=-200, y=-100 等价于 point.x = -200, point.y = -100

    返回值:point ,具有 x 和 y 属性的 Point 实例与显示对象的坐标空间中的变换位置相关。

  • hitTest( x y ) Boolean
    这个方法的概念在动画中,是碰撞检测的原型。然而这个动画的目的也是这样的,测试显示对象于指定的本地坐标系是否相交,从而进行碰撞监测。EaselJS目前不支持形状与形状的碰撞。

         stage.addEventListener("stagemousedown", handleMouseDown);
         function handleMouseDown(event) {
             var hit = myShape.hitTest(event.stageX, event.stageY);
         }

    Parameters:
    x, y 分别表示需要监测的坐标位置,并不是显示对象实际所在的位置
    返回值:
    Boolean值,表示显示对象的可见区域是否与指定的位置相交

  • isVisible () Boolean
    返回true或false,表示显示对象在绘制到画布时是否可见。这并不能说明它是否会在舞台边界内可见。
    返回值:
    Boolean:绘制到画布时显示对象是否可见
  • localToGlobal ( x y [pt] ) Point
  • removeAllEventListeners
    Removes all listeners for the specified type, or all listeners of all types.

     // Remove all listeners
     displayObject.removeAllEventListeners();
    
     // Remove all click listeners
     displayObject.removeAllEventListeners("click");
  • removeEventListener ( type listener [useCapture] )

        displayObject.removeEventListener("click", handleClick);
  • set ( props ) DisplayObject chainable

     var myGraphics = new createjs.Graphics().beginFill("#ff0000").drawCircle(0, 0, 25);
     var shape = stage.addChild(new Shape()).set({graphics:myGraphics, x:100, y:100, alpha:0.5});
    
    这段代码不使用set的话得这样:
    var myGraphics = new createjs.Graphics().beginFill("#ff0000").drawCircle(0, 0, 25);
    
    var shape = new createjs.Shape('myGraphics');
    shape.x = 100;
    shape.y = 100;
    shape.alpha = 0.5'
  • setTransform
    Shortcut method to quickly set the transform properties on the display object. All parameters are optional. Omitted parameters will have the default value set.

    displayObject.setTransform(100, 100, 2, 2);

    Parameters:

    • [x=0]Numberoptional

      
      The horizontal translation (x position) in pixels
      
    • [y=0]Numberoptional

      
      The vertical translation (y position) in pixels
      
    • [scaleX=1]Numberoptional

      
      The horizontal scale, as a percentage of 1
      
    • [scaleY=1]Numberoptional

      
      the vertical scale, as a percentage of 1
      
    • [rotation=0]Numberoptional

      
      The rotation, in degrees
      
    • [skewX=0]Numberoptional

      
      The horizontal skew factor
      
    • [skewY=0]Numberoptional

      
      The vertical skew factor
      
    • [regX=0]Numberoptional

      
      The horizontal registration point in pixels
      
    • [regY=0]Numberoptional

      
      The vertical registration point in pixels
  • uncache
    Clears the current cache.
  • updateCache

     // Not shown: Creating the shape, and caching it.
     shapeInstance.clear();
     shapeInstance.setStrokeStyle(3).beginStroke("#ff0000").moveTo(100, 100).lineTo(200,200);
     shapeInstance.updateCache();
阅读 2k

createjs由浅入深
由于业务的需求,开始做H5动画项目,第一次接触createjs,附上我学习的笔记以及心得,一起学习一起交流

求知若渴,保持谦逊

770 声望
32 粉丝
0 条评论

求知若渴,保持谦逊

770 声望
32 粉丝
文章目录
宣传栏