当缩放svg对象时，使用FabricJS将无法选择它

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

本文关键字：选择 FabricJS 使用 svg 缩放 对象      更新时间：2023-09-26

下面是一个显示问题的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/

另一个问题是鼠标：over&out不起作用。

有人能在JSFiddle中添加最新版本的FabricJS（1.412）吗？

看看这个小提琴：http://jsfiddle.net/rtL0m87h/3/

您还没有设置对象的坐标，这就是为什么它在单击后不起作用的原因。现在它在我指定的小提琴中工作得很完美。您必须通过执行以下操作来设置对象的坐标：e.target.setCoords()

确保在以编程方式修改任何对象时，必须在修改完对象后设置Coords

相关文章：