Question

我有一个使用KineticJS的小图像编辑器：http://www.scrapwebshop.nl/apps/index.html

对于这个网络应用程序，我想要＆＃39; color＆＃39;使用其他图像的图像。我使用globalCompositeOperation = source-in。这非常有效。我在一个单独的画布中弹出一个（在我的例子中单击颜色轮）。当用户完成他的墨水应用后，我想将这个类似刮刮板的画布的数据添加到我的主要KineticJS画布中。

我无法让它发挥作用。我可以直接将上下文添加到我的主画布，但随后我放弃了我的图层管理和透明度。你会看到什么时候你会遇到'Inkt toepassen＆＃39;按钮。为此，我使用以下这些行：

// 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 Image对象的图像源。然后对画布的任何更改都会通过Kinetic.Image反映到舞台上。

创建内存中的“临时”画布
在划痕画布上绘制所需的内容
使用划痕画布作为图像源创建Kinetic.Image：
如果需要，可以更改临时画布并使用layer.draw()刷新Kinetic.Image。新的更改将显示在舞台上。

这是一个在内存中的canvas元素上使用合成并通过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>

将临时画布数据复制到KineticJS图层

1 个答案: