Kinetic.js를 사용하여 마스킹하기

Question

키네틱 js.my 문제를 사용하여 두 개의 드래그 가능한 베 지어 곡선과 원을 그린다. 마스크 영역을 찾고 싶다. 베 지어와 원의 교차점을 찾을 수있는 방법이있다. 아니면 나에게 가장 좋은 방법을 제안해라. 마스크가 적용된 영역에 이미지를 그려야합니다.

Answer 1

합성은 쉽고 빠르게 교차를 마스크 할 수 있지만 KineticJS는 합성 방법을 기본 제공 방법으로 제공하지 않습니다.

특히, '소스 인'합성 기존 형상의 교차점과 새로 그려진 형상을 표시한다. 따라서 기존 곡선 위에 새 원을 그릴 때 원의 교차 만 & 곡선 만 남습니다.

임시 해결책은 메모리 내 html5 캔버스를 사용하여 합성 작업을 수행 한 다음 해당 캔버스를 Kinetic.Image의 소스로 사용하는 것입니다. 여기

그것을 수행하는 방법의 개요입니다 : 당신의 베 지어 곡선 그리기

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

context.moveTo 및 context.bezierCurveTo

설정 합성을 사용하여 :

1. 메모리 내 캔버스 만들기 소스 입력 : context.globalCompositeOperation='source-in';

2. 소스로 compositingCanvas를 사용하여 Kinetic.Image 만들기 context.arc

3. 를 사용하여 원을 그립니다 :

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

[HTML5 캔버스 데모 코드 보여주는 합성 추가]

다음은 html5 Canvas에서 합성을 사용하여 렌즈 이미지를 아이 - 베 지어와 망막 원의 교차점으로 제한하는 방법의 예입니다. 이 html5 Canvas를 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>