fabric.js 组成员的属性不更新？答案

【问题标题】：fabric.js Group members' properties don't update?fabric.js 组成员的属性不更新？
【发布时间】：2014-06-26 05:58:29
【问题描述】：

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

【问题讨论】：

标签： javascript dom-events fabricjs

【解决方案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/

【讨论】：

谢谢。我应该知道这一点......现在我只需要制定一个公式来始终获得这条线任一端的确切坐标。
这是获取此类线两端坐标的更好方法：{ left: group.left - group._originalLeft + line.get('x2'), top: group.top - group._originalTop + line.get('y2') } 这是小提琴的更新：jsfiddle.net/2e9B9/7
啊！那个 jsfiddle 链接没有更新到我正在处理的最后一个版本！这是最终正确版本的正确链接：jsfiddle.net/2e9B9/8