CODEWITHSUNDEEP
htmlcanvassvgfabricjs
lalithkumar
lalithkumar

Reputation: 3540

Text is not appending on the canvas after crop by SVG

In the canvas i am using clipTo function to crop it.It works for circle,rectangle,....i could add whatever like text and images after that.I added the code below which works.

$(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>

After that i am trying to crop the canvas by SVG file.This also works.But problem is i could not add texts or images after clipTo by canvas.The below code is not adding the text to canvas.

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

The canvas image is:

Thanks in advance.

Upvotes: 1

Views: 80

Answers (1)

lalithkumar
lalithkumar

Reputation: 3540

I have found the solution.Instead of using loadSVGFromURL i am fetching the path from svg file and cropped the canvas like below.

HTML:

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

Script:

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

Upvotes: 0

Related Questions