Fabric.js 自由绘制椭圆

在 Fabric.js 中，你可以使用 fabric.Ellipse 类来创建椭圆形状。要自由绘制椭圆，你需要首先创建一个 fabric.Canvas 实例，然后使用 fabric.Ellipse 创建一个椭圆对象。接下来，你可以使用 set({ left, top, width, height }) 方法来设置椭圆的属性，并使用 renderAll() 方法将其绘制到 canvas 上。

下面是一个简单的示例代码：

// 创建 Fabric.js canvas 实例
var canvas = new fabric.Canvas('myCanvas');
// 创建椭圆对象
var ellipse = new fabric.Ellipse({
  left: 100, // 椭圆的左上角位置
  top: 100,
  fill: 'transparent', // 设置透明背景
  stroke: 'red', // 设置线条颜色为红色
  strokeWidth: 2 // 设置线条宽度为 2px
});
// 将椭圆添加到 canvas 上
canvas.add(ellipse);
// 渲染 canvas，将椭圆显示在页面上
canvas.renderAll();

在这个示例中，我们创建了一个名为 myCanvas 的 canvas 元素，并使用 fabric.Canvas 类创建了一个 Fabric.js canvas 实例。然后，我们使用 fabric.Ellipse 类创建了一个椭圆对象，并设置了椭圆的 left、top、fill、stroke 和 strokeWidth 属性。最后，我们将椭圆对象添加到了 canvas 上，并使用 renderAll() 方法将 canvas 渲染到页面上。

如果你想要让用户自由绘制椭圆，你可以使用 Fabric.js 的事件机制来监听鼠标的点击和移动事件。当用户点击 canvas 时，你可以创建一个新的椭圆对象，并将其添加到 canvas 上。当用户移动鼠标时，你可以更新椭圆的位置和大小。下面是一个简单的示例代码：

var isDrawing = false;
var startPoint = { x: 0, y: 0 };
var currentEllipse;
canvas.on('mouse:down', function(o){
  isDrawing = true;
  startPoint = o.pointer;
  currentEllipse = new fabric.Ellipse({ left: startPoint.x, top: startPoint.y, originX: 'center', originY: 'center' });
  canvas.add(currentEllipse);
});
canvas.on('mouse:move', function(o){
  if (!isDrawing) return;
  currentEllipse.set({ left: startPoint.x + o.ex, top: startPoint.y + o.ey });
  canvas.renderAll();
});
canvas.on('mouse:up', function(o){
  isDrawing = false;
});

在这个示例中，我们首先定义了 isDrawing、startPoint 和 currentEllipse 变量。然后，我们使用 fabric.Canvas 的事件机制来监听鼠标的点击、移动和松开事件。当用户按下鼠标时，我们设置 isDrawing 为 true，并记录下鼠标的位置作为椭圆的起始位置。然后，我们创建一个新的椭圆对象，并将其添加到 canvas 上。当用户移动鼠标时，如果 isDrawing 为 true，则更新椭圆的位置和大小。最后，当用户松开鼠标时，我们设置 isDrawing 为 false。通过这种方式，我们可以在 Fabric.js 中自由绘制椭圆。