掩盖使用Kinetic.js

Question

我使用动力学js.my绘制两个可拖动的bezier曲线和圆圈问题是我想找到面具区域。有没有办法找到bezier和circle的交点。或者建议我屏蔽canvas.i的最佳方法。想要在蒙版（可见）区域上绘制图像。

Answer 1

合成可以快速轻松地屏蔽交叉点，但KineticJS不提供合成作为内置方法。

特别是，＆＃39;来源＆＃39;合成将揭示现有形状和新绘制形状的交集。因此，当您在现有曲线上绘制新圆时，只有圆和圆的交点。曲线将保持不变。

解决方法是使用内存中的html5画布进行合成，然后将该画布用作Kinetic.Image的源。

以下是如何操作的概述：

1. 创建内存中的画布：

   var compositingCanvas=document.createElement('canvas');
   var context=compositingCanvas.getContext('2d');
   

2. 使用context.moveTo和context.bezierCurveTo

绘制贝塞尔曲线

3. 将合成设置为来源：context.globalCompositeOperation='source-in';

4. 使用context.arc

绘制圆圈

5. 使用compositingCanvas作为源：

   创建一个Kinetic.Image

   var myMaskedShape=new Kinetic.Image({
       image:compositingCanvas,
       ....
   });
   

[添加显示在html5画布中合成的演示代码]

以下是如何在html5 Canvas中使用合成将镜头图像限制在眼睛和视网膜圆的交叉点的示例。你可以使用这个html5 Canvas作为你的Kinetic.Image的图像源（是的......一个html5画布可以是你的Kinetic.Image的来源！）。

祝你的项目好运！

＆＃13;
＆＃13;
var canvas=document.createElement("canvas");
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width=300;
var ch=canvas.height=300;
ctx.lineWidth=2;

var img=new Image();
img.onload=function(){

  drawEye(null,'black');
  ctx.globalCompositeOperation='source-in';
  drawRetina(null,'black');
  ctx.drawImage(img,173-38,150-38,img.width,img.height);
  ctx.globalCompositeOperation='source-over';   

  drawEye('black',null);

}
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/stars.png';


function drawEye(stroke,fill){
  ctx.beginPath();
  ctx.moveTo(225,150);
  ctx.bezierCurveTo( 189,135, 83,75, 75,150);
  ctx.bezierCurveTo( 83,225,  189,165, 225,150);
  ctx.closePath();
  if(fill){ ctx.fill(); }
  if(stroke){ ctx.stroke(); }
}

function drawRetina(stroke,fill){
  ctx.beginPath();
  ctx.arc(173,150,38,0,Math.PI*2);
  ctx.closePath();
  if(fill){ ctx.fill(); }
  if(stroke){ ctx.stroke(); }
}


function drawEye1(stroke,fill){
  ctx.beginPath();
  ctx.moveTo(150,100);
  ctx.bezierCurveTo( 125,90, 55,50, 50,100);
  ctx.bezierCurveTo( 55,150,  125,110, 150,100);
  ctx.closePath();
  if(fill){ ctx.fill(); }
  if(stroke){ ctx.stroke(); }
}
＆＃13;
var canvas=document.createElement("canvas");
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width=300;
var ch=canvas.height=300;
ctx.lineWidth=2;

var img=new Image();
img.onload=function(){

  drawEye(null,'black');
  ctx.globalCompositeOperation='source-in';
  drawRetina(null,'black');
  ctx.drawImage(img,173-38,150-38,img.width,img.height);
  ctx.globalCompositeOperation='source-over';   

  drawEye('black',null);

}
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/stars.png';


function drawEye(stroke,fill){
  ctx.beginPath();
  ctx.moveTo(225,150);
  ctx.bezierCurveTo( 189,135, 83,75, 75,150);
  ctx.bezierCurveTo( 83,225,  189,165, 225,150);
  ctx.closePath();
  if(fill){ ctx.fill(); }
  if(stroke){ ctx.stroke(); }
}

function drawRetina(stroke,fill){
  ctx.beginPath();
  ctx.arc(173,150,38,0,Math.PI*2);
  ctx.closePath();
  if(fill){ ctx.fill(); }
  if(stroke){ ctx.stroke(); }
}


function drawEye1(stroke,fill){
  ctx.beginPath();
  ctx.moveTo(150,100);
  ctx.bezierCurveTo( 125,90, 55,50, 50,100);
  ctx.bezierCurveTo( 55,150,  125,110, 150,100);
  ctx.closePath();
  if(fill){ ctx.fill(); }
  if(stroke){ ctx.stroke(); }
}
＆＃13;
<h4>Intersection of eye & retina filled with image using compositing</h4>
<canvas id="canvas" width=300 height=300></canvas>
＆＃13;
＆＃13;
＆＃13;