Kineticjs alpha蒙版

使用HTML5 <canvas>元素，可以使用一個畫布矇蔽另一個蒙版。例如，下面的代碼將採取頂部帆布，使用中間畫布的α和結果轉儲至底部帆布：Kineticjs alpha蒙版

HTML：

<body style="background-color:#333;"> 
<img id="SourceImage" src="Src.png" style="display:none"> 
<img id="MaskImage" src="Mask.png" style="display:none"> 
<div><canvas id="cSrc"></canvas></div> 
<div><canvas id="cMask"></canvas></div> 
<div><canvas id="cDest"></canvas></div>

的javascript：

var objSrc = document.getElementById('cSrc').getContext('2d'); 
var objMask = document.getElementById('cMask').getContext('2d'); 
var objDest = document.getElementById('cDest').getContext('2d'); 

objSrc.drawImage(document.getElementById("SourceImage"),0,0); 
objMask.drawImage(document.getElementById("MaskImage"),0,0); 

var imgs = objSrc.getImageData(0, 0, 300, 150); 
var imga = objMask.getImageData(0, 0, 300, 150); 
var pix = imgs.data; 
var pixa = imga.data; 

for (var i = 0, n = pix.length; i < n; i += 4) { 
    pix[i+3] = pixa[i+3]; 
} 

objDest.putImageData(imgs, 0, 0);

結果：

canvas mask result

將如何我在Kineticjs中做同樣的事情？例如，是否有任何方法可以使用一個Kinetic.Layer作爲另一個Kinetic.Layer的掩碼，然後將結果轉儲爲可見的Kinetic.Layer？我查看了clip(clip)方法，但它似乎更適合在畫布上切割矩形孔（可能用於裁剪？）。

想法？

來源

2014-04-01 CaffeineAddiction

使用屏幕外的html畫布來做alpha混合（就像你上面所做的那樣）。

然後使用您的#objDest作爲Kinetic.Image的源代碼。

var image1=new Kinetic.Image({ 
    image:objDest, 
    ... 
});

來源

2014-04-02 05:17:32 markE

這將爲2倍畫布元素的工作，如上圖所示，但我更感興趣的是使用一個'Kinetic.Layer'掩蓋另一個'Kinetic.Layer'使掩蔽從每連續戰平刷新。我認爲這樣做的一種方式是讓3個Kineticjs.Stage對象隱藏其中兩個......但即使如此，在Stage1＆2完成之後是否有觸發Stage3繪製的方法呢？可能是.draw（）或.BatchDraw（）函數的回調？ – CaffeineAddiction

不要緊，我只是通過調用Stage1.Draw（）來實現我所要求的功能。 Stage2.Draw（）; MaskIt（）; putMaskonStage3（）; Stage3.Draw（）; – CaffeineAddiction

Kineticjs alpha蒙版

回答

相關問題