EaselJS grille hexagonale avec un fond pour chaque tuile

Question

Je voudrais créer une grille hexagonale avec EaselJS, mais avec une texture de fond spécifique pour chaque tuile, et quelques tuiles peuvent avoir la même image de fond (dans cet exemple Je n'ai mis qu'une seule image de fond pour les débutants). J'ai fait la grille hexagonale, mais le remplissage de l'image d'arrière-plan que j'ai utilisé se répète sur toute la toile alors que je voudrais que chaque carreau de la grille ait sa propre image d'arrière-plan, de sorte que l'arrière-plan ne « t ont un tel décalage comme actuellement:

Résultat

Voici mon code, j'utilise 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(); 
}; 

Je suis nouveau à EaselJS que je fais peut-être quelque chose de mal. .. Merci!

Answer 1

Je pense que cela se produit parce que vous modifiez les coordonnées où vous dessinez l'hexagone, au lieu de changer la position x et y actuelle de l'hexagone. Cela signifie que l'origine du remplissage bitmap n'est pas modifiée.

Voici un port rapide de votre code: http://jsfiddle.net/lannymcnie/ygfrs0pn/

J'ai modifié la routine de tirage pour déplacer le x de réelle instance de forme et y, et définir les graphiques à dessiner routine [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(); 

Cela rend chaque carreau le même aspect, ce qui est (je crois) ce que vous aviez à l'esprit.