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 个答案: