fabric.js組成員的屬性不更新？

我使用fabric.js在畫布上創建對象。我在一個組中有幾個對象。選擇該組時，將觸發一個事件，該事件將創建並添加一個以行尾爲中心的圓。當一個選擇被清除時，另一個事件被觸發，這將刪除該圓。fabric.js組成員的屬性不更新？

我不明白的是，爲什麼圓圈不會將位置更改爲線條的新終點，當我移動羣組時，取消選擇它，然後重新選擇它。

<html> 
    <head> 
    <script type="text/javascript" src="path/to/fabric.1.4.5.js"></script> 
    </head> 
    <body> 
    <canvas id="c" width="800" height="600"></canvas> 
    <script type="text/javascript"> 
     fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; 
     var canvas = new fabric.Canvas('c'); 
     var circle; 

     var text = new fabric.Text('hello world', { 
     fontSize: 30, 
     originX: 'left', 
     originY: 'top', 
     left: 25, 
     top: 30 
     }); 

     var line = new fabric.Line([10,10, 100,100], { 
     stroke: 'green', 
     strokeWidth: 2 
     }); 

     var group = new fabric.Group([line, text], { 
     }); 

     group.on('selected', function() { 
     circle = new fabric.Circle({ 
      strokeWidth: 5, 
      radius: 28, 
      fill: 'rgba(200,200,200,0.4)', 
      stroke: '#666', 
      left: line.get('x2'), 
      top: line.get('y2') 
     }) 
     canvas.add(circle); 
     }); 

     canvas.add(group); 
     canvas.renderAll(); 

     canvas.on('selection:cleared', function() { 
     group._objects.length = 2;  
     canvas.remove(circle); 
     }); 

    </script> 
    </body> 
</html>

下面是對的jsfiddle相同的代碼：http://jsfiddle.net/Tqmdw/

來源

2014-05-08 WhiteHotLoveTiger

你的線的位置實際上並沒有改變。看看小組教程。 http://fabricjs.com/fabric-intro-part-3/#groups。在一個組中，項目相對於組中心定位，並且該組作爲單個實體處理。這意味着移動組只會更新組頂部和左側的位置。您可以使用這些新的頂部/左側值並計算該線的終點。

group.on('selected', function() { 
    circle = new fabric.Circle({ 
     strokeWidth: 5, 
     radius: 28, 
     fill: 'rgba(200,200,200,0.4)', 
     stroke: '#666', 
     left: group.left + line.get('x2'),, 
     top: group.top + line.get('y2'), 
    }) 
    canvas.add(circle); 
});

我創建了一個更新的小提琴：http://jsfiddle.net/2e9B9/5/

來源

2014-05-09 07:49:45 Benick

感謝。我應該知道這個...... 現在我只需要制定一個公式，以便始終獲得這樣一條線的任一端的確切座標。 – WhiteHotLoveTiger

這裏有一個更好的方式來獲得這樣一條線的任何一端的座標： '{ left：group.left - group._originalLeft + line.get（'x2'）， top：group.top - group._originalTop + line.get（'y2'） }' 這是對小提琴的更新：http://jsfiddle.net/2e9B9/7/ – WhiteHotLoveTiger

gah！該jsfiddle鏈接沒有更新到我正在工作的最後一個版本！以下是正確的最終版本的鏈接：http://jsfiddle.net/2e9B9/8/ – WhiteHotLoveTiger

fabric.js組成員的屬性不更新？

回答

相關問題