PDA

View Full Version : Check part of SVG image to fill them with color with fabric.js



comosejama
09-25-2016, 06:52 PM
I used to fabric.js and freedrawing. Most of the code is included here http://fabricjs.com/freedrawing. I want to rewrite it to and add some new options. One of then is coloring book. I think i should do this with SVG. So I load SVG images and then I let for user to fill image parts. I have some code:


fabric.loadSVGFromURL('../scripts/svg/arrow.svg', function(objects, options) { // here I load SVG image
var shape = fabric.util.groupSVGElements(objects, options);


for (var i = 0; i < shape.paths.length; i++) {
shape.paths[i].setFill(colorSet);
} //here i loop all of parts of image, shape.paths[i] is the coordinate path of image so there is litle shapes from my image which i can filled with color for example:"<path xmlns="http://www.w3.org/2000/svg" d="M424.597,77.953c3.946-12.739,9.222-41.029-5.26-77.244c0,0-25.547-8.113-83.338,30.565 /> "

canvas.add(shape);
canvas.renderAll();
});
I want to write some if statement which check if this coordinate is the same point here user clicked on canvas. So I tried to write some if which check where user clicked and then fill this part of image:


for (var i = 0; i < shape.paths.length; i++) {
if(shape.containsPoint(canvas.getPointer()) ){ // I tried to find where user clicked on canvas and check if this point is in the coordinate of image
shape.paths[i].setFill(colorSet);
}
}
But there i have error that getPointer is not function. Here is console log of this points http://fiddle.jshell.net/qhfvpj4z/8/. (check console.log I think there is coordinates of image parts) Anyone know how can I get the part of my image and fill with color?