我正在尝试使用Fabric.js进行交互式绘图。现在，我可以使用鼠标绘制一个矩形。但是，在完成绘制矩形之后，除非在绘制后使用左上角的控制器调整其大小一次，否则无法选择它。我想知道是什么打破了事件系统。
这是我的代码：http : //jsfiddle.net/rmFgX/1/
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
top : 100,
left : 100,
width : 60,
height : 70,
fill : 'red'
});
canvas.add(rect);
canvas.on('mouse:down', function (option) {
console.log(option);
if (typeof option.target != "undefined") {
return;
} else {
var startY = option.e.offsetY,
startX = option.e.offsetX;
console.log(startX, startY);
var rect2 = new fabric.Rect({
top : startY,
left : startX,
width : 0,
height : 0,
fill : 'transparent',
stroke: 'red',
strokewidth: 4
});
canvas.add(rect2);
console.log("added");
canvas.on('mouse:move', function (option) {
var e = option.e;
rect2.set('width', e.offsetX - startX);
rect2.set('height', e.offsetY - startY);
rect2.saveState();
});
}
});
canvas.on('mouse:up', function () {
canvas.off('mouse:move');
});
更新了小提琴http://jsfiddle.net/rmFgX/5/
对于对象，当更改与位置/维度相关的属性时，(left, top, scale, angle, etc.)设置不会更新对象边框/控件的位置。
如果您需要更新这些，请致电：
setCoords()。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句