将临时画布数据复制到 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 画布元素（无需将此画布添加到 DOM）。然后将此画布用作 KineticJS Image 对象的图像源。然后对画布的任何更改都会通过 Kinetic.Image 反映到舞台上。

• 创建内存中的“临时”画布

• 在草稿画布上画出任何需要的东西

• 使用临时画布作为图像源创建 Kinetic.Image：

• 需要时，对草稿画布进行更改并使用layer.draw() 刷新 Kinetic.Image。新的更改将显示在舞台上。

这是一个在内存中的画布元素上使用合成并通过 Kinetic.Image 显示结果的示例：

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{
	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>