我正在尝试使用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'); });
John.. 5
更新了小提琴http://jsfiddle.net/rmFgX/5/
对于更改位置/尺寸相关属性(left, top, scale, angle, etc.)
集时的对象,不会更新对象边框/控件的位置.
如果您需要更新这些,请致电:
setCoords()
.