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组成员的属性不更新？

回答

相关问题