【easeljs】矢量形狀 Shape類

mengbo 發布于2019-08-22 11:00 / 1539人閱讀

摘要：類介紹繼承自一個形狀允許你在顯示列表中顯示矢量圖。它包含一個帶有所有繪制矢量圖形的方法的圖形實例。實例可以在多個實例之間共享，以做到一樣的矢量圖形在畫布上有多個不同位置和不同變形的復制。

類介紹

繼承自 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定義

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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