텍스트가 자르기 후 SVG에 의해 자르기 후 추가되지 않습니다

Question

캔버스에서 자르기 클립 기능을 사용하고 있습니다. 원, 사각형, .... 그 후에 텍스트와 이미지를 추가 할 수 있습니다. 추가했습니다. 아래 코드는 작동합니다. 나는 또한 SVG file.This하여 캔버스를자를 works.But 문제는 ​​코드가 아닌 아래에 내가 canvas.The에 의해 clipTo 후 텍스트 또는 이미지를 추가 할 수 없습니다입니다 시도하고 그 후

$(function(){ 
 
var canvas = new fabric.Canvas('Canvas',{backgroundColor: '#ffffff',preserveObjectStacking: true}); 
 
canvas.clipTo = function (ctx) { 
 
ctx.arc(250, 300, 200, 0, Math.PI*2, true); 
 
}; 
 
canvas.add(new fabric.IText('Welcome ', { 
 
    left : fabric.util.getRandomInt(120,120), 
 
    top:fabric.util.getRandomInt(400, 400) 
 
})); 
 
canvas.renderAll(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.js"></script> 
 

 
<div class="container"> 
 
<div id='canvascontain' width='1140' height='600' style='left:0px;background-color:rgb(240,240,240)'> 
 
<canvas id="Canvas" width='1140' height='600'></canvas> 
 
</div>

텍스트를 캔버스에 추가합니다.

fabric.loadSVGFromURL('https://s3-us-west-2.amazonaws.com/fabric-canvas/test.svg', function (objects, options) { 
    var shape = fabric.util.groupSVGElements(objects, options); 
    canvas.clipTo = function (ctx) { 
    shape.render(ctx); 
}; 
canvas.renderAll(); 

}); 
canvastext = new fabric.IText('Hi to all',{ 
    left : fabric.util.getRandomInt(120, 120), 
    top:fabric.util.getRandomInt(400, 400) 
}); 
canvas.add(canvastext); 
canvas.renderAll(); 

캔버스 이미지입니다 : 사전에

감사합니다.

Answer 1

내가 해결책을 찾았습니다. 대신 loadSVGFromURL을 사용하는 중입니다. 나는 svg 파일에서 경로를 가져오고 아래처럼 캔버스를 자릅니다.

HTML :

<div id='svgpath'> 
<object data="test.svg" type="image/svg+xml" 
     id="svgpathd" width="100%" height="100%"></object> 
</div> 

스크립트 :

canvas.clipTo = function (ctx) { 
var a = document.getElementById("svgpathd"); 
a.addEventListener("load",function(){ 
var svgDoc = a.contentDocument; 
var clippath = svgDoc.getElementsByTagName("clipPath")[0].getAttribute('id'); 
var path = svgDoc.getElementsByTagName("path"); 
for(i=0;i<path.length;i++){ 
if(svgDoc.getElementsByTagName("path")[i].getAttribute('clip-path')=="url(#"+clippath+")"){ 
     pathd = svgDoc.getElementsByTagName("path")[i].getAttribute('d'); 
     paths = pathd.replace(" L"," L"); 
      localStorage.setItem('svgpathd', paths); 
        } 
    } 
}); 
} 
document.getElementById('svgpath').style.display='none'; 
svgpathd = localStorage.getItem('svgpathd'); 

//Path has been taken and clipping the canvas with the path values 

ctx.beginPath(); 
var path = svgpathd.split("L"); 
var arr = []; 
m = path[0].slice(1).split(" "); 
ctx.moveTo(m[0],m[1]); 
for(i=0;i<path.length;i++){ 
    arr[i]=path[i].slice(0,-1).slice(1); 
} 
for(i=0;i<arr.length;i++){ 
    p = arr[i].split(" "); 
    ctx.lineTo(p[0],p[1]); 
} 
ctx.fill(); 
ctx.closePath(); 
}