複製刮帆布數據KineticJS層

Question

我有使用KineticJS小的圖像編輯器：http://www.scrapwebshop.nl/apps/index.html

對於這個web應用我想「顏色」使用其他圖像的圖像。我爲此使用了globalCompositeOperation = source-in。這很好。 這個着色我在一個彈出框中（點擊我的例子中的色輪）在一個單獨的畫布中進行。 當用戶完成應用他的墨水時，我想將這個類似便箋簿的畫布的數據作爲圖層添加到我的主KineticJS畫布上。

我不能得到這個工作。 我可以直接將上下文添加到我的主畫布上，但是隨後我失去了圖層管理和透明度。當你點擊'Inkt toepassen'按鈕時，你會看到。 爲此，我用這些行：

// Get context of main canvas: 
var context = layer.getCanvas().getContext(); 
// Get image data from scratch pad: 
var imgData = inkContext.getImageData(0, 0, inkCanvas.width, inkCanvas.height); 
// Copy image data to main canvas 
context.putImageData(imgData, 0, 0); 

如何我可以在我的便箋創建的數據KineticJS層？

Answer 1

它看起來像你試圖劫持一個內部的KineticJS上下文來完成你的合成。雖然這是有效的，但它的結果是暫時的，因爲KineticJS將快速回收並重寫上下文 - 這就是爲什麼它是內部上下文（！）的原因。

解決方法是創建一個用於合成繪圖的內存html canvas元素（無需將此畫布添加到DOM）。然後使用此畫布作爲KineticJS圖像對象的圖像源。然後對畫布的任何更改都會通過Kinetic.Image反映到舞臺上。

• 創建一個內存便條'畫布

• 繪製任何需要劃痕畫布

• 在與刮帆布作爲圖像源創建Kinetic.Image：

• 需要時，更改暫存畫布並使用layer.draw()刷新Kinetic.Image。新的變化將顯示在舞臺上。

下面是通過Kinetic.Image在內存中的canvas元素上使用的合成，並顯示結果的一個例子：

var stage = new Kinetic.Stage({ 
 
    container: 'container', 
 
    width: 300, 
 
    height: 300 
 
}); 
 
var layer = new Kinetic.Layer(); 
 
stage.add(layer); 
 

 
var PI=Math.PI; 
 
var PI2=PI*2; 
 
var cx=50; 
 
var cy=50; 
 
var radius=50; 
 
var angle=0; 
 
var circumference=2*radius*PI; 
 
var cutCount=15; 
 
var cutRadius=circumference/cutCount/2; 
 

 
var canvas=document.createElement('canvas') 
 
var ctx=canvas.getContext('2d'); 
 
canvas.width=2*radius; 
 
canvas.height=2*radius; 
 

 
ctx.beginPath(); 
 
ctx.arc(cx,cy,radius,0,PI2); 
 
ctx.closePath(); 
 
ctx.fillStyle='blue'; 
 
ctx.fill(); 
 

 
var c=new Kinetic.Image({image:canvas,x:30,y:30,}); 
 
layer.add(c); 
 
layer.draw(); 
 

 
$("#test").click(function(){ 
 

 
    var x=cx+radius*Math.cos(angle); 
 
    var y=cy+radius*Math.sin(angle); 
 
    angle+=(PI2/cutCount); 
 

 
    ctx.globalCompositeOperation='destination-out'; 
 
    ctx.beginPath(); 
 
    ctx.arc(x,y,cutRadius,0,PI2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    ctx.globalCompositeOperation='source-over'; 
 

 
    layer.draw(); 
 

 

 
});

body{padding:20px;} 
 
#container{ 
 
\t border:solid 1px #ccc; 
 
    margin-top: 10px; 
 
    width:300px; 
 
    height:300px; 
 
}

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button id="test">Test</button><br> 
 
<h4>Using compositing in KineticJS via 'scratch' canvas</h4> 
 
<div id="container"></div>