[英]fabric.js - Circle don't work if properties defined outside of new fabric.Circle() brackets
[英]fabric.js Group members' properties don't update?
我正在使用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/
你的线的位置实际上不会改变。 看一下组教程。 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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.