KineticJS - obrázok plodiny - obrázok, orezanie, výplň, kineticjs

Snažím sa v mojej hre používať dlaždicu. Chcem orezať výplňový obrázok, ale nemôžem

1. Nemôžem vyplniť tvar objektom Kinetic.Image ().

2. Nemôžem orezať objekt Image ().

   var rect = new Kinetic.Rect({
   x: 0,
   y: 0,
   width: 64,
   height: 64,
   fill:{
   image: imageObj,
   crop:{
   x: 128,
   y: 128,
   width: 64,
   height: 64
   },
   },
   strokeWidth: 1
   });
   

Toto nefunguje a tiež nemôžem nahradiť image: imageObj objektom Kinetic.Image (), ktorý je vopred narezaný. Nejaké nápady?

EDIT: Vyzerá to, že by to mohlo byť možné nakreslenímKinetic.Image na scénu pomocou nástroja toDataUrl na načítanie orezaného Kinetic.Image do obrazového objektu použiteľného výplňou, potom pokračujte v mapovom skripte. To predstavuje veľa problémov s výkonom / časov načítania, takže sa chystám pokračovať a predpokladám, že to, čo chcem urobiť, nie je možné. Ak má niekto nejaké nápady, ako to urobiť správne, dajte mi vedieť.

odpovede:

Môžete získať výplň na prijatie obrázka, ako je to zobrazené v tomto príklade s Vader / Yoda:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-set-fill-with-kineticjs/

Navrhujem, aby ste obrázky načítali do poľa (ako v príklade) a potom pri vytváraní dlaždice zavolali obrázky.

V tomto príklade som zmenil kód pre prvý Pentagon na obdĺžnik:

var colorPentagon = new Kinetic.Rect({
x: 40,
y: 50,
width: 100,
height: 100,
fill: {
image: images.darthVader,
offset: [-220, -70]
},
stroke: "black",
strokeWidth: 4,
draggable: true
});

A fungovalo to, takže žiadny dôvod, ktorý vám nemôže dať to, čo chcete.