Easeljs使用位图填充矩形

我们正在使用Easejs制作一个小型的Snake Browser游戏。Easeljs使用位图填充矩形

现在，我们要使用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还是我们该如何做？

来源

2016-11-21 Tommy

位图填充可能会做你想要的，但你需要考虑形状的坐标。

下面是一个简单示例：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);

希望帮助！

来源

2016-11-21 16:30:07 Lanny

Easeljs使用位图填充矩形

回答

相关问题