Fabric.js svg 기반 다중 클리핑

Question

캔버스에 svg 경로가 있습니다. 나는 이런 식으로 뭔가를 할 : http://jsfiddle.net/tbqrn/

var canvas = new fabric.Canvas('c'); 

var ctx = canvas.getContext("2d"); 
ctx.beginPath(); 
ctx.rect(10,10,150,150); 
ctx.rect(180,10,200,200); 
ctx.closePath(); 
ctx.stroke(); 
ctx.clip(); 

fabric.Image.fromURL(img01URL, function(oImg) { 
oImg.scale(.25); 
oImg.left = 50; 
oImg.top = 100; 
canvas.add(oImg); 
canvas.renderAll(); 
}); 

fabric.Image.fromURL(img02URL, function(oImg) { 
oImg.scale(.25); 
oImg.left = 300; 
oImg.top = 100; 
canvas.add(oImg); 
canvas.renderAll(); 
}); 

하지만 한 가지 차이점 즉시 다른 하나에 표시 한 지역을 떠난 후 이미지. 어떻게해야합니까?

Answer 1

하나의 캔버스로는이 작업을 수행 할 수 없습니다. 이 작품을 생각할 수있는 유일한 방법은 다음과 같습니다. 두 개의 서로 다른 이미지가있는 두 개의 캔버스를 사용하고 두 개의 캔버스 사이에 이미지의 위치를 ​​"동기화"하십시오. 실제로는 두 개의 이미지를 사용해야합니다.

HTML :

<canvas id="c1" width="200" height="400"></canvas> 
<canvas id="c2" width="200" height="400"></canvas> 

CSS :

#c1, #c2 { 
    border: 1px solid #ccc; 
} 

#c2 { 
    margin-left: 20px; 
} 

.canvas-container { 
    float: left; 
} 

JS :

var offsetLeft = 220; // #c1 width + #c2 margin-left 

var canvas1 = new fabric.Canvas('c1'); 
var canvas2 = new fabric.Canvas('c2'); 

var c1Img, c2Img; 

fabric.Image.fromURL(img01URL, function(oImg) { 
    c1Img = oImg; 

    c1Img.scale(.25); 
    c1Img.left = 0; 
    c1Img.top = 0; 
    c1Img.hasControls = false; 
    c1Img.hasRotatingPoint = false; 
    canvas1.add(c1Img); 
    canvas1.renderAll(); 
}); 

fabric.Image.fromURL(img01URL, function(oImg) { 
    c2Img = oImg; 

    c2Img.scale(.25); 
    c2Img.left = -offsetLeft; 
    c2Img.top = 0; 
    c2Img.hasControls = false; 
    c2Img.hasRotatingPoint = false; 
    canvas2.add(c2Img); 
    canvas2.renderAll(); 
}); 


canvas1.on('object:moving', function(e) { 
    c2Img.set({left: e.target.left -offsetLeft, top: e.target.top}); 
    c2Img.setCoords(); 
    canvas2.renderAll(); 
             }); 

canvas2.on('object:moving', function(e) { 
    c1Img.set({left: e.target.left + offsetLeft, top: e.target.top}); 
    c1Img.setCoords(); 
    canvas1.renderAll(); 
             }); 

테스트 여기 : http://jsfiddle.net/se9sw1d8/2/