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);

希望有所帮助！

Easeljs使用Bitmap填充Rectangle

1 个答案: