Easeljs 六边形网格，每个图块都有背景

Question

我想用 Easeljs 创建一个六边形网格，但每个图块和一些图块都有特定的背景纹理可能有相同的背景图片（在这个例子中，我只为初学者放了一张背景图片）。

我已经完成了六边形网格，但是我使用的背景图像填充在所有 canvas 上重复自身，而我希望网格的每个图块都有自己的背景图像，这样背景就没有像现在这样的偏移量了：

Résultat

这是我的代码，我正在使用 beginBitmapFill:

$().ready(function() {
        var stage, dist, rayon, texture, hexagons = [], hexagon;
        stage = new createjs.Stage("canvas");
        stage.enableMouseOver();
        dist = 60;

        var manifest = [
            {src: "penguin3.png", id: "penguin3"}
        ];

        var loader = new createjs.LoadQueue(false);
        loader.addEventListener("complete", function() {
            for (var y=0; y < 8; y++) {
                for (var x=-Math.floor(y/2); x < -Math.floor(y/2)+8; x++) {
                    hexagon = new Hexagon(x, y, dist, loader.getResult('penguin3'), stage);
                    hexagons.push(hexagon);
                    stage.addChild(hexagon);
                }
            }

            stage.hexagonsNumber = hexagons.length;
            stage.update();
        });
        loader.loadManifest(manifest, true, "/images/");
});

function Hexagon(x, y, dist, texture, stage)
{
    createjs.Shape.call(this);
    this.coordsX = x;
    this.coordsY = y;
    this.dist = dist;
    this.texture = texture;
    this.stage = stage;

    this.drawShape();
}

Hexagon.prototype = new createjs.Shape();
Hexagon.prototype.constructor = Hexagon;

Hexagon.prototype.getShapeCoordinates = function()
{
    return {
        x: 50 + this.dist * (this.coordsX + this.coordsY / 2),
        y: 50 + Math.sqrt(3) * this.dist * this.coordsY / 2 ,
        radius: this.dist / Math.sqrt(3)
    };
};

Hexagon.prototype.drawShape = function()
{
    var shapeCoordinates = this.getShapeCoordinates();

    this.graphics
        .beginBitmapFill(this.texture, 'no-repeat')
        .beginStroke(createjs.Graphics.getRGB(0,0,0))
        .drawPolyStar(shapeCoordinates.x, shapeCoordinates.y, shapeCoordinates.radius, 6, 0, 30)
        .endFill();
};

我是 Easeljs 的新手，我可能做错了什么...谢谢！

Answer 1

我认为发生这种情况是因为您正在更改绘制六边形的坐标，而不是更改六边形的实际 x 和 y 位置。这意味着位图填充的原点没有改变。

这是您的代码的快速移植： http://jsfiddle.net/lannymcnie/ygfrs0pn/

我修改了绘制例程以移动实际 Shape 实例的 x 和 y，并将图形绘制例程设置为 [0,0]。 http://jsfiddle.net/lannymcnie/ygfrs0pn/1/

 var shapeCoordinates = this.getShapeCoordinates();
 this.x = shapeCoordinates.x;
 this.y = shapeCoordinates.y;

 this.graphics
        .beginBitmapFill(this.texture, 'no-repeat')
        .beginStroke(createjs.Graphics.getRGB(0,0,0))
        .drawPolyStar(0,0, shapeCoordinates.radius, 6, 0, 30)
        .endFill();

这使每个图块看起来都一样，这就是（我认为）您的想法。