Использование FabricJS при масштабировании объекта svg становится невозможным его выбрать

Question

Ниже приведен пример JSFiddle. В моем приложении после добавления объекта SVG к холсту каждый щелчок на нем изменит масштаб. обратите внимание, что при каждом нажатии на область, на которую вы можете щелкнуть объект, перемещается влево и вверх, пока невозможно щелкнуть по нему. Чтобы воспроизвести проблему: просто щелкните объект несколько раз. после максимум 9 кликов вы больше не сможете его щелкнуть.

Вот мой код:

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(); 
}); 

Вот JSFiddle: http://jsfiddle.net/orihadar/rtL0m87h/2/

Другая проблема заключается в том, что мышь: над & из не работает.

Может ли кто-нибудь добавить в JSFiddle последнюю версию FabricJS (1.412)?

Answer 1

Посмотрите на эту скрипку: http://jsfiddle.net/rtL0m87h/3/

Вы не установили Coords объекта, поэтому он не работает после некоторого клика. теперь он отлично работает в моей настоящей скрипке. Вы должны установить Coords of object: e.target.setCoords()

Удостоверьтесь, что при модификации любого объекта программно необходимо установитьCoords после завершения модификации вашего объекта.