使用Fabric.js进行交互式绘图

Question

我正在尝试使用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');
    });

Answer 1

更新了小提琴http://jsfiddle.net/rmFgX/5/

对于更改位置/尺寸相关属性(left, top, scale, angle, etc.)的对象(left, top, scale, angle, etc.)设置不会更新对象边框/控件的位置。

如果您需要更新这些，请致电：

setCoords() 。