Reputation: 377
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
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