Easeljs使用位圖填充矩形

Question

我們正在使用Easejs製作一個小型的Snake Browser遊戲。

現在，我們要使用PNG格式的蛇零件不僅顏色：

this.shape.graphics.beginFill("#e54d42"); 
this.shape.graphics.drawRect(this.x*this.grid.cell_width, this.y*this.grid.cell_height, this.grid.cell_width, this.grid.cell_height); 

this.shape.graphics.endFill(); 

有誰知道怎麼辦呢？我們可以使用beginBitmapFill還是我們該如何做？

Answer 1

位圖填充可能會做你想要的，但你需要考慮形狀的座標。

下面是一個簡單示例：http://jsfiddle.net/lannymcnie/ogy1qmxn/1/

shape.graphics.clear() 
    .beginBitmapFill(img) 
    .drawRect(0,0,800,600); 

注意我的形狀開始於[0,0]。如果你在不同的座標處開始你的形狀，位圖將被以不同的方式裁剪，因爲它默認從[0,0]中繪製。以下是位圖的x/y座標偏移的示例：http://jsfiddle.net/lannymcnie/ogy1qmxn/2/

您可以通過在[0,0]處繪製並在繪製形狀時使用矩陣實際移動形狀來修復此問題。

var matrix = new createjs.Matrix2D(); 
matrix.translate(this.x*this.grid.cell_width, this.y*this.grid.cell_height); 
shape.graphics.beginBitmapFill(img, "repeat", matrix); 

希望幫助！