Easeljs шестигранной сетки с фоном для каждой плитки

Question

Я хотел бы создать шестиугольную сетку с Easeljs, но с определенной текстуры фона для каждой плитки, а некоторые плитки могут иметь один и тот же фоновое изображение (в данном примере Я поставил только одно фоновое изображение для стартеров).

Я выполнил гексагональную сетку, однако заполнение фонового изображения, которое я использовал, перерисовывается на всем холсте, тогда как я хочу, чтобы каждая плитка сетки имела свое фоновое изображение, так что фон не имеет «т иметь такое смещение, как в настоящее время:

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/

Я изменил процедуру отрисовки для перемещения х фактической формы экземпляра и у, и установить графики рисовать подпрограмму [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(); 

Это делает каждую плитку выглядеть так же, который (я думаю), что вы имели в виду.