KineticJS - 作物填充圖像

Question

我想在我的遊戲中使用瓷磚。我要裁剪的填充圖像，但不能因爲

1. 我無法填充形狀與Kinetic.Image（）對象。

2. 我無法裁剪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 
   }); 
   

這是不行的，我也不能代替圖像：與被precropped一個Kinetic.Image（）對象imageObj。有任何想法嗎？

編輯：看起來它可能是通過繪製Kinetic.Image到現場，用toDataUrl到裁剪Kinetic.Image加載到圖像對象的填充可用的可能，然後繼續與地圖腳本。這導致了大量的性能問題/加載時間，所以我將繼續前進，並假設我想做的事情是不可行的。如果任何人有任何想法如何做到這一點，請讓我知道。

Answer 1

可以得到填補接受的圖像，如本例所示與維達/尤達：

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

什麼，我會建議加載你的圖片到一個數組（因爲他在做該示例），然後在創建圖塊時調出圖像。

我改變了代號爲第一五角大樓的矩形上例如像這樣：

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

和它的工作，所以沒有理由說不能給你想要的東西。