如何使用Fabricjs自由绘制椭圆？

这是有关如何使用Fabricjs 绘制圆的代码：使用Mouse绘制圆。

我想在椭圆形上实现相同的效果。因为自由地画圆将取决于半径，但是我想然后画一个蛋形或椭圆形的区域，所以半径对我没有帮助，因此我希望在这里使用Ellipse。

免费绘图圈代码：

var canvas = new fabric.Canvas("canvas2");
var circle, isDown, origX, origY;

canvas.on('mouse:down', function(o){
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({ 
    left: origX,
    top: origY,
    originX: 'left',
    originY: 'top',
    radius: pointer.x-origX,
    angle: 0,
    fill: '',
    stroke:'red',
    strokeWidth:3,
});
canvas.add(circle);
});

canvas.on('mouse:move', function(o){
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
var radius = Math.max(Math.abs(origY - pointer.y),Math.abs(origX - pointer.x))/2;
if (radius > circle.strokeWidth) {
    radius -= circle.strokeWidth/2;
}
circle.set({ radius: radius});

if(origX>pointer.x){
    circle.set({originX: 'right' });
} else {
    circle.set({originX: 'left' });
}
if(origY>pointer.y){
    circle.set({originY: 'bottom'  });
} else {
    circle.set({originY: 'top'  });
}
canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});

`

有人可以吗？

您可以执行与其他形状情况类似的操作： 如何使用鼠标在fabricjs中自由绘制Circle？

var canvas = new fabric.Canvas("canvas2");
var ellipse, isDown, origX, origY;

canvas.on('mouse:down', function(o){
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    ellipse = new fabric.Ellipse({
        left: origX,
        top: origY,
        originX: 'left',
        originY: 'top',
        rx: pointer.x-origX,
        ry: pointer.y-origY,
        angle: 0,
        fill: '',
        stroke:'red',
        strokeWidth:3,
    });
    canvas.add(ellipse);
});

canvas.on('mouse:move', function(o){
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    var rx = Math.abs(origX - pointer.x)/2;
    var ry = Math.abs(origY - pointer.y)/2;
    if (rx > ellipse.strokeWidth) {
      rx -= ellipse.strokeWidth/2
    }
     if (ry > ellipse.strokeWidth) {
      ry -= ellipse.strokeWidth/2
    }
    ellipse.set({ rx: rx, ry: ry});
    
    if(origX>pointer.x){
        ellipse.set({originX: 'right' });
    } else {
        ellipse.set({originX: 'left' });
    }
    if(origY>pointer.y){
        ellipse.set({originY: 'bottom'  });
    } else {
        ellipse.set({originY: 'top'  });
    }
    canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});