使用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.)集不更新对象的边界/控件的位置。

如果您需要更新的，请打电话：

setCoords()。