Web Analytics Made Easy -
StatCounter Check part of SVG image to fill them with color with fabric.js - CodingForum

Announcement

Collapse
No announcement yet.

Check part of SVG image to fill them with color with fabric.js

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Check part of SVG image to fill them with color with fabric.js

    Hi guys. I used to fabric.js and freedrawing. Most of the code is included here Free drawing | Fabric.js Demos. 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:

    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:

    Code:
    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 Free Drawing Fabric.js - JSFiddle. (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?
Working...
X