KineticJS - 圖像上的圖案和填充

我有一個用KineticJS創建的畫布，我將透明PNG圖像添加到該畫布。當堆疊在彼此的頂部時，這使得所有不同部分的服裝圖像成爲一個圖像。KineticJS - 圖像上的圖案和填充

然後，我想要做的是允許用戶點擊一個模式，然後用該模式更改該服裝的特定部分。所以我需要使用該模式填寫其中一個圖像的不透明部分。我找到了一種方法可以做到這一點並沒有使用KineticJS，它看起來是這樣的：

ctx.globalCompositeOperation = 'source-in'; 
var ptrn = ctx.createPattern(fabricA, 'repeat'); 
ctx.fillStyle = ptrn; 
ctx.fillRect(0, 0, 375, 260);

我的問題是，有沒有辦法做到以上KineticJS中相同的步驟？

另外，我第一次嘗試不使用KineticJS就做到了這一點，但是當我將上面的代碼應用到圖層時，它填充了所有圖像，因爲它們都在同一圖層上。所以我猜測我需要更改我的代碼以使用多個圖層或將圖像添加到單個圖層中的組。我的想法在這裏嗎？對於我想要完成的事情，哪個更好？多層？或單個圖層上有多個組？

感謝任何人都可以提供的幫助。

來源

2013-04-05 jaz872

如果你想要做自定義繪圖然後使用KineticJS形狀對象

這是一個KineticJS對象，它可以讓你控制它究竟是如何得出。

使用合成方法創建覆蓋圖。然後將該繪圖代碼放入一個函數中，並將該函數賦予動力學形狀的drawFunc。

這裏的Kinetic.Shape的骨架：

var outfit1 = new Kinetic.Shape({ 
    drawFunc: function(canvas) { 

     // you are passed a canvas to draw your custom shape on 
     // so new-up a context and get drawing! 
     var context = canvas.getContext(); 

     context.beginPath(); 

     // Draw stuff--including your composited overlays 
     // You can use any canvas.context drawing commands 

    }, 
    id:"myCustomOutfit" 
});

可以開始使用這裏的例子：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

來源

2013-04-06 05:15:50 markE

KineticJS - 圖像上的圖案和填充

回答

相關問題