Easeljs 使用位图填充矩形

Question

我们正在使用 Easejs 制作一个贪吃蛇浏览器小游戏。

现在我们想对蛇的部位使用 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);

希望对您有所帮助！

Easeljs 使用位图填充矩形

Easeljs Using Bitmap for filling Rectangle

javascript

easeljs

createjs