1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'JavaScript' started by comosejama, Sep 25, 2016.

  1. #1
    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 imagevar shape = fabric.util.groupSVGElements(objects, options);
    
    
    for(var i =0; i < shape.paths.length; i++){
    shape.paths.setFill(colorSet);}//here i loop all of parts of image, shape.paths 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();});
    Code (markup):
    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.setFill(colorSet);}}
    Code (markup):
    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?

    SEMrush
     
    comosejama, Sep 25, 2016 IP
    SEMrush