Easeljs 使用位图填充矩形答案

【问题标题】：Easeljs Using Bitmap for filling RectangleEaseljs 使用位图填充矩形
【发布时间】：2016-11-22 00:30:07
【问题描述】：

我们正在使用 Easejs 制作一个小型 Snake 浏览器游戏。

现在我们想为蛇的部分使用 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 还是我们必须怎么做？

【问题讨论】：

标签： javascript createjs easeljs

【解决方案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);

希望有帮助！

【讨论】：