Canvas 使用Kinetic.js进行掩蔽

我用kinetic js绘制了两条可拖动的贝塞尔曲线和圆。我的问题是我想找到遮罩区域。有没有办法找到贝塞尔曲线和圆的交点。或者建议我遮罩画布的最佳方法。我想在遮罩（可见）区域上绘制图像

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

特别是，“源中”合成将显示现有形状和新绘制形状的交点。因此，当您在现有曲线上绘制新圆时，只有圆和曲线的交点将保留

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

以下是如何做到这一点的概述：

创建内存画布：

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

使用

context.moveTo

和

context.bezierCurveTo

在：

context.globalCompositeOperation='source-in'中将合成设置为源代码

使用

context.arc

使用compositingCanvas作为源创建动能.Image：

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

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

下面是一个如何在html5画布中使用合成将镜头图像限制在眼睛beziers和视网膜圆的交点处的示例。您可以使用此html5画布作为您的Kinetic.image的图像源（是的……html5画布可以作为您的Kinetic.image的源！）

祝你的项目好运

var canvas=document.createElement（“canvas”）；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布。宽度=300；
var ch=画布。高度=300；
ctx.线宽=2；
var img=新图像（）；
img.onload=函数（）{
付款人（空，'black'）；
ctx.globalCompositeOperation='source-in'；
drawRetina（空，'black'）；
ctx图纸图像（图像，173-38150-38，图像宽度，图像高度）；
ctx.globalCompositeOperation='source-over'；
付款人（'黑色'，空）；
}
img.src=https://dl.dropboxusercontent.com/u/139992952/multple/stars.png';
功能（笔划、填充）{
ctx.beginPath（）；
ctx.moveTo（225150）；
贝塞尔曲线图（189135,83,75,75150）；
贝塞尔曲线图（83225、189165、225150）；
ctx.closePath（）；
if（fill）{ctx.fill（）；}
if（stroke）{ctx.stroke（）；}
}
功能（笔划、填充）{
ctx.beginPath（）；
ctx.arc（173150,38,0，数学PI*2）；
ctx.closePath（）；
if（fill）{ctx.fill（）；}
if（stroke）{ctx.stroke（）；}
}
功能抽屉1（笔划、填充）{
ctx.beginPath（）；
ctx.moveTo（150100）；
比塞尔曲线（125,90,55,50,50100）；
比塞尔曲线图（55150125110150100）；
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=画布。宽度=300；
var ch=画布。高度=300；
ctx.线宽=2；
var img=新图像（）；
img.onload=函数（）{
付款人（空，'black'）；
ctx.globalCompositeOperation='source-in'；
drawRetina（空，'black'）；
ctx图纸图像（图像，173-38150-38，图像宽度，图像高度）；
ctx.globalCompositeOperation='source-over'；
付款人（'黑色'，空）；
}
img.src=https://dl.dropboxusercontent.com/u/139992952/multple/stars.png';
功能（笔划、填充）{
ctx.beginPath（）；
ctx.moveTo（225150）；
贝塞尔曲线图（189135,83,75,75150）；
贝塞尔曲线图（83225、189165、225150）；
ctx.closePath（）；
if（fill）{ctx.fill（）；}
if（stroke）{ctx.stroke（）；}
}
功能（笔划、填充）{
ctx.beginPath（）；
ctx.arc（173150,38,0，数学PI*2）；
ctx.closePath（）；
if（fill）{ctx.fill（）；}
if（stroke）{ctx.stroke（）；}
}
功能抽屉1（笔划、填充）{
ctx.beginPath（）；
ctx.moveTo（150100）；
比塞尔曲线（125,90,55,50,50100）；
比塞尔曲线图（55150125110150100）；
ctx.closePath（）；
if（fill）{ctx.fill（）；}
if（stroke）{ctx.stroke（）；}
}

使用合成填充图像的眼睛和视网膜的交点

hello marKE.。我的确切问题是用户首先选择左眼形状区域，然后选择左眼视网膜形状，然后选择右眼视网膜形状。我使用贝塞尔曲线表示眼睛形状，使用圆表示视网膜。我想找出贝塞尔和圆之间的共同区域，为此，我可以在上面放置一个镜头图像，就像。我是动力学方面的新手，我之前尝试过构图，但没有得到准确的结果。我添加了示例代码，演示如何使用合成将镜头限制在眼睛贝塞尔和视网膜圆的交点。祝你的项目好运！感谢markE为我的问题提供解决方案。我将根据我的问题定制。再次感谢