摘要：大部分的原生繪制圖形或圖像的一般是這樣的例如就是。這類繪制大部分被封裝在的類中，它們有一個(gè)共同的特點(diǎn)名字都是以開(kāi)始，例如?；A(chǔ)圖形實(shí)例的作用是提供一個(gè)修改圖形接口。如果從嵌套的維度來(lái)說(shuō)與的關(guān)系是等基礎(chǔ)圖形其實(shí)，完全不需要這么實(shí)現(xiàn)。

在原生 Canvas 中，其實(shí)并沒(méi)有 DisplayObject 的概念，它只有繪制圖像的概念。

大部分的原生繪制圖形或圖像的 API 一般是這樣的：

api(x, y, ...)

例如 rect 就是：ctx.rect(x, y, width, height)。

這類繪制 API 大部分被封裝在 CreateJS 的 Graphics 類中，它們有一個(gè)共同的特點(diǎn) ---- 名字都是以 draw 開(kāi)始，例如：drawRect / drawCircle 。

為什么說(shuō)是大部分繪制的API被封裝在 Grahpics 類中呢？
很簡(jiǎn)單，Graphics 類處理的是圖形繪制，所以也可以說(shuō)所有的圖形繪制 API 被封裝在 Graphics 類中。繪制API還有另一個(gè)功能 ------ 繪制圖像，這個(gè)功能被封裝在 Bitmap 類中。

我曾經(jīng)這樣覺(jué)得：「graphics.draw*(x, y, ...) 的參數(shù) 就是 displayObject 的屬性 x, y」。但是其實(shí)這個(gè)想法很容易 就可以驗(yàn)證得到它的錯(cuò)誤性：

var rect = new createjs.Shape(); 
rect.graphics.drawRect(50, 50, 100 100);
stage.addChild(rect);
console.log(rect.x, rect.y);

來(lái)分析 Graphics 的 drawRect API 源碼：
https://www.createjs.com/docs...

https://www.createjs.com/docs...

https://www.createjs.com/docs...

https://www.createjs.com/docs...

代碼很簡(jiǎn)單，如下:

創(chuàng)建一個(gè)「Rect 實(shí)例」；

「Rect 構(gòu)造函數(shù)」將 drawRect 的實(shí)現(xiàn)代碼掛載在 prototype.exec 下

將「Rect 實(shí)例」append 到數(shù)組 _activeInstructions中（第四張截圖）；

返回「Graphics」實(shí)例

為什么需要一個(gè)數(shù)組（_activeInstructions）來(lái)存儲(chǔ)原生指令？
對(duì)于矩形、圓形和圓角矩形來(lái)說(shuō)，確實(shí)不需要數(shù)組來(lái)存儲(chǔ)指令；但是梯形、三角形等圖形沒(méi)有對(duì)應(yīng)的原生API，此時(shí)需要使用繪制線段或孤線(ctx.moveTo/ctx.lineTo/ctx.arc)來(lái)組合產(chǎn)生，而數(shù)組 _activeInstructions 就是來(lái)處理組合圖形產(chǎn)生的。

Rect實(shí)例有什么作用？
Rect實(shí)例是 drawRect 返回的實(shí)例，Graphics 里還有其它的 draw* API，它們會(huì)返回各自圖形的實(shí)例，所以可以把 Rect實(shí)例和其它實(shí)例統(tǒng)稱為「基礎(chǔ)圖形實(shí)例」。「基礎(chǔ)圖形實(shí)例」的作用是提供一個(gè)修改圖形接口。通過(guò)第四張截圖，可以看到「基礎(chǔ)圖形實(shí)例」最終被掛載在「Graphics 實(shí)例」的 command 屬性下，也就是說(shuō)通過(guò)「Graphics實(shí)例」的 command 可以訪問(wèn)到最新的「基礎(chǔ)圖形實(shí)例」，寫一個(gè)測(cè)試代碼如下：

var gcircle = circle.graphics.beginFill("00ff00").drawCircle(0, 0, 10); 
circle.x = circle.y = 100; 
stage.addChild(circle); 
stage.update(); 
setTimeout(function() { 
    gcircle.command.radius = 50;
    stage.update(); 
}, 1000);

這個(gè)特性在動(dòng)態(tài)繪制圖形上是很有用的，不過(guò)，它有一個(gè)短板：通過(guò) command 屬性只能訪問(wèn)到最近的「基礎(chǔ)圖形實(shí)例」。也就是說(shuō)自定義的組合圖形，如果需要訪問(wèn)到對(duì)應(yīng)的「基礎(chǔ)圖形實(shí)例」就需要把繪制過(guò)程拆散，舉個(gè)例子：

// 三角形
var threeangle = new createjs.Shape(); 
threeangle.graphics.beginFill("00ff00").moveTo(50, 0).lineTo(0, 50).lineTo(100, 50).closePath(); 
stage.addChild(threeangle); 
stage.update(); 

如果底部?jī)蓚€(gè)端點(diǎn)要做動(dòng)畫：

// 三角形
var threeangle = new createjs.Shape(); 
threeangle.graphics.beginFill("00ff00").moveTo(50, 0); 
var p1 = threeangle.graphics.lineTo(0, 50).command; 
var p2 = threeangle.graphics.lineTo(100, 50).command; 
threeangle.graphics.closePath(); 
stage.addChild(threeangle); 
stage.update(); 
setTimeout(function() {
    p1.y = 100; 
    stage.update(); 
}, 1000); 
setTimeout(function() {
    p2.y = 200; 
    stage.update(); 
}, 2000); 

https://www.createjs.com/docs...

Shape 極簡(jiǎn)單，就是生成一個(gè) DisplayObject 實(shí)例，然后在這個(gè)實(shí)例中掛載一個(gè) Graphics 實(shí)例。而它的工作原理（即它的渲染）如下：
https://www.createjs.com/docs...

也就是 Shape 實(shí)例的 draw 方法其實(shí)是直接調(diào)用 Graphics 實(shí)例的 draw 方法。

DisplayObject 的核心功能是處理 DisplayObject 實(shí)例的「矩陣轉(zhuǎn)換」（即位移與形變），如下：
https://www.createjs.com/docs...

我在 聊聊 Container 的實(shí)現(xiàn) 中介紹了使用原生 Canvas 實(shí)現(xiàn) Container 的原理。其實(shí)，Shape 實(shí)例也是一個(gè)Container，只是 CreateJS 限制了 shape 只能放 Graphics 實(shí)例，而且 shape 只能存放一個(gè) Graphics 實(shí)例（即shape 下的 graphics 屬性），Graphics 實(shí)例下存放多個(gè)「基礎(chǔ)圖形實(shí)例」。

**如果從嵌套的維度來(lái)說(shuō) Graphics 與 DisplayObject 的關(guān)系是：
Container > Shape > Graphics > Rect/Circle/RoundRect等基礎(chǔ)圖形**

其實(shí)，CreateJS 完全不需要這么實(shí)現(xiàn)。像 PIXI 在實(shí)現(xiàn) Graphics 的時(shí)候，Graphics 也一個(gè) Container，它可以像一個(gè)正常的 DisplayObject 一樣被使用，而不用像 CreateJS 一樣麻煩。