使用 Kinetic.js 屏蔽

Question

我使用动力学 js 绘制了两条可拖动的贝塞尔曲线和圆形。我的问题是我想找到遮罩区域。有没有办法找到贝塞尔曲线和圆形的交点。或者建议我最好的遮罩 canvas.i想要在蒙版（可见）区域上绘制图像。

Answer 1

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

特别是，“source-in”合成将揭示现有形状和新绘制形状的交集。因此，当您在现有曲线上绘制新圆时，只会保留圆和曲线的交点。

一种解决方法是使用内存中的 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 画布用作 Kinetic.Image 的图像源（是的...一个 html5 画布可以作为 Kinetic.Image 的源！）。

祝你的项目好运！

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(); }
}

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(); }
}

<h4>Intersection of eye & retina filled with image using compositing</h4>
<canvas id="canvas" width=300 height=300></canvas>