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

下面是如何使用Fabricjs绘制圆的代码：

我想实现同样的椭圆。因为自由地画圆取决于半径，但我想画一个蛋形或椭圆形的区域，所以半径对我没有帮助，所以我想在这里使用椭圆

自由绘制圆的代码： `

`

---

任何人都可以这样做吗？

您可以类似于其他形状案例：

var canvas=newfabric.canvas（“canvas2”）；
var椭圆、isDown、origX、origY；
canvas.on（'mouse:down'，函数（o）{
isDown=真；
var pointer=canvas.getPointer（o.e）；
origX=指针.x；
origY=pointer.y；
椭圆=新织物。椭圆({
左：origX，
上图：奥里基，
原文：“左”，
原创：“top”，
rx:pointer.x-origX，
y:pointer.y-origY，
角度：0，
填写：''，
笔划：'红色'，
冲程宽度：3，
});
canvas.add（椭圆）；
});
canvas.on（'mouse:move'，函数（o）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
var rx=数学abs（origX-pointer.x）/2；
var ry=Math.abs（origY-pointer.y）/2；
如果（rx>椭圆冲程宽度）{
rx-=椭圆。冲程宽度/2
}
如果（ry>椭圆冲程宽度）{
ry-=椭圆。冲程宽度/2
}
椭圆集（{rx:rx，ry:ry}）；
if（origX>pointer.x）{
set（{originX:'right'}）；
}否则{
set（{originX:'left'}）；
}
if（origY>pointer.y）{
set（{originY:'bottom'}）；
}否则{
椭圆集（{originY:'top'}）；
}
canvas.renderAll（）；
});
canvas.on（'mouse:up'，函数（o）{
isDown=假；
});


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;
});