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

Question

我正在使用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/

Answer 1

你的線的位置實際上不會改變。 看一下組教程。 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/

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

問題描述

1 個解決方案

解決方案1
2 已采納 2014-05-09 07:49:45

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

問題描述

1 個解決方案

解決方案1 2 已采納 2014-05-09 07:49:45

解決方案1
2 已采納 2014-05-09 07:49:45