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

Question

下面是如何使用 Fabricjs 绘制圆的代码：Draw Circle using 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;
});

`

有人会做吗？

Answer 1

你可以像其他形状案例一样做：

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

<script type="text/javascript" src="http://www.deltalink.it/andreab/fabric/fabric.js" ></script>
<canvas id="canvas2" width=500 height=500 ></canvas>

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

How to free draw ellipse using Fabricjs?

html

javascript

jquery

html5-canvas

fabricjs