Fabric.js:无法选择通过拖动鼠标绘制的矩形

时间:2019-10-16 16:50:09

标签: javascript fabricjs fabricjs2

我试图通过在画布上拖动鼠标来绘制矩形。创建矩形后,一次无法选择矩形对象。

我尝试将矩形作为活动对象,但不起作用。

var canvas = new fabric.Canvas('c',{selection:true});


/* var red = new fabric.Rect({
    top: 100, left: 0, width: 80, height: 50, fill: 'red' });

canvas.add(red); */
var rect, isDown, origX, origY;
var count = 0;
canvas.on('mouse:down', function(o){
   if(count==0){
     isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    var pointer = canvas.getPointer(o.e);
    rect = new fabric.Rect({
        left: origX,
        top: origY,
        originX: 'left',
        originY: 'top',
        width: pointer.x-origX,
        height: pointer.y-origY,
        angle: 0,
        fill: 'rgba(255,0,0,0.5)',
        transparentCorners: false
    });
    canvas.add(rect);
   }

});

canvas.on('mouse:move', function(o){
  if(count==0){
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);

    if(origX>pointer.x){
        rect.set({ left: Math.abs(pointer.x) });
    }
    if(origY>pointer.y){
        rect.set({ top: Math.abs(pointer.y) });
    }

    rect.set({ width: Math.abs(origX - pointer.x) });
    rect.set({ height: Math.abs(origY - pointer.y) });
    canvas.renderAll();
  }

});

canvas.on('mouse:up', function(o){
  if(count==0){
      isDown = false;
      canvas.selection= true;
      canvas.setActiveObject(rect);
      canvas.renderAll();
      count++;
   }
});

`

绘制矩形对象后,有没有一种选择方法。

0 个答案:

没有答案