使用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');
    });

- Tom

Answer 1

更新了这个示例：http://jsfiddle.net/rmFgX/5/

对于一个对象，当改变其位置/尺寸相关属性(left, top, scale, angle等)时，设置不会更新对象边框/控件的位置。

如果你需要更新它们，请调用：

setCoords()。

- John

---

太好了！它运行了！谢谢John！但是你似乎忘记更新fiddle了。 - Tom

有人知道为什么这在Firefox中不起作用吗？在Chrome和IE 11中运行良好。 - Bruce Pierson