fabric.js 组成员的属性不更新？
Posted
技术标签:
【中文标题】fabric.js 组成员的属性不更新？【英文标题】：fabric.js Group members' properties don't update? 【发布时间】：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" ></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/
【问题讨论】：
【参考方案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以上是关于fabric.js 组成员的属性不更新？的主要内容，如果未能解决你的问题，请参考以下文章