Ori
Ori

Reputation: 377

Using FabricJS when scaling an svg object it becomes impossible to select it

Following is an JSFiddle showing the problem. In my app, after adding an svg object to the canvas, every click on it will change it's scale. note that on every click the area on which you can click the object, is moving left and up until it is impossible to click it. To reproduce the problem: just click the object a few times. after maximum 9 clicks you will not be able to click it any more.

Here is my code:

Fcanvas = new fabric.Canvas('c');
var svgStr = '<svg   xmlns:dc="http://purl.org/dc/elements/1.1/"   xmlns:cc="http://creativecommons.org/ns#"   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"   xmlns:svg="http://www.w3.org/2000/svg"   xmlns="http://www.w3.org/2000/svg"   version="1.1"   width="16.386984"   height="13.381006"   id="svg2985"   style="overflow:visible">  <metadata     id="metadata2993">    <rdf:RDF>      <cc:Work         rdf:about="">        <dc:format>image/svg+xml</dc:format>        <dc:type           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />        <dc:title></dc:title>      </cc:Work>    </rdf:RDF>  </metadata>  <defs     id="defs2991" />  <path     d="m 9.0444374,10.298006 c 0,0 2.2872386,3.083 0,3.083 -2.2892466,0 0,-3.083 0,-3.083 z M 5.0224919,9.9230051 c 0,0 2.1476202,2.8959999 0,2.8959999 -2.1476125,0 0,-2.8959999 0,-2.8959999 z m 7.8539491,-9e-7 c 0,0 1.91599,2.5829998 0,2.5829998 -1.917995,0 0,-2.5829998 0,-2.5829998 z M 9.8278236,1.1490701e-5 C 9.9712086,-3.2632367e-4 10.119073,0.00677886 10.271509,0.02205994 13.52348,0.3470585 13.653477,2.2780447 13.328483,3.5790343 c 3.414971,-0.4879956 4.876958,4.796968 -0.487996,4.796968 l -6.9919448,0 c -5.60194948,0 -6.6599391,-1.2459898 -5.3359528,-3.8959732 1.3279914,-2.6549802 5.3359528,-1.3889904 5.3359528,-1.3889904 0,0 1.0637803,-3.08415723 3.9792814,-3.091027209299 z"     id="path2987"     style="fill:#00adee" /></svg>'

fabric.loadSVGFromString(svgStr, function (objects, options) {   
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.setFill('red');
    obj.scaleX=3;
    obj.scaleY=3;
    obj.left = 200
    obj.top = 50
    obj.selectable = false;
    obj.perPixelTargetFind = true
    Fcanvas.add(obj).renderAll();                
});

Fcanvas.on('mouse:up', function (e) {
    //alert('fabric mouse click '+e.target);
    console.log('fabric mouse click '+e.target);
    if (e.target) {
        if (e.target.opacity==.5) {
            e.target.opacity = 1
            e.target.scaleX = e.target.scaleX+1
            e.target.scaleY = e.target.scaleY+1
            console.log('set opacity to 1');
        }else {
            e.target.opacity = .5
            e.target.scaleX = e.target.scaleX+1
            e.target.scaleY = e.target.scaleY+1
            console.log('set opacity to .5');
        }
        Fcanvas.renderAll();
    }
});
Fcanvas.on('mouse:over', function (e) {
    alert(e.target);
        e.target.opacity = .5;
        //e.target.setFill('black');
        Fcanvas.renderAll();
});
Fcanvas.on('mouse:out', function (e) {
        e.target.opacity = 1;
        //e.target.setFill('black');
        Fcanvas.renderAll();
});

Here is the JSFiddle: http://jsfiddle.net/orihadar/rtL0m87h/2/

Another issue is that the mouse:over & out does not work.

can someone add to the JSFiddle the latest version of FabricJS (1.412) ?

Upvotes: 0

Views: 1227

Answers (1)

Innodel
Innodel

Reputation: 1426

Look at this fiddle : http://jsfiddle.net/rtL0m87h/3/

You have not set Coords of object that's why it was not working after some click. now it is working perfect in my given fiddle. You have to set Coords of object by doing : e.target.setCoords()

Make sure that when you are modifying any object programmatically, it is necessary to setCoords after modification of your object is done.

Upvotes: 1

Related Questions