KineticJS - Ritaglia l'immagine di riempimento: immagine, ritaglio, riempimento, kineticjs

Sto cercando di utilizzare un tileset nel mio gioco: voglio ritagliare l'immagine di riempimento ma non posso

1. Non riesco a riempire una forma con un oggetto Kinetic.Image ().

2. Non posso ritagliare un oggetto 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
   });
   

Questo non funziona, e non posso nemmeno sostituire l'immagine: imageObj con un oggetto Kinetic.Image () che è precaricato. Qualche idea?

MODIFICARE: Sembra che potrebbe essere possibile disegnando ilKinetic.Image alla scena, utilizzando toDataUrl per caricare il Kinetic.Image ritagliato in un oggetto immagine utilizzabile da riempimento, quindi continuare con lo script della mappa. Questo introduce un sacco di problemi di prestazioni / tempi di caricamento, quindi ho intenzione di andare avanti e assumere che ciò che voglio fare non è fattibile. Se qualcuno ha qualche idea su come farlo correttamente per favore fatemelo sapere.

risposte:

Puoi riempire per accettare un'immagine, come mostrato in questo esempio con Vader / Yoda:

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

Quello che suggerirei è di caricare le tue immagini in una matrice (come fa nell'esempio), quindi richiamare le immagini mentre crei la tessera.

Ho modificato il codice per il primo Pentagono in un rettangolo su quell'esempio in questo modo:

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
});

E ha funzionato, quindi nessuna ragione che non possa darti quello che vuoi.