裁剪后，文字不会附加到画布上

Question

在画布中我使用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>

之后我试图通过SVG文件裁剪画布。这也有效。但问题是我无法在clipTo之后添加文本或图像。下面的代码不是将文本添加到画布。

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