CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-canvasfabricjs
graphics123
graphics123

Reputation: 1271

How to free draw ellipse using Fabricjs?

Here's the code for how to draw circle using Fabricjs : Draw Circle using Mouse.

I want to achieve the same for ellipse . Because drawing circle freely will depend on radius but I want to draw a egg shaped or oval shaped area then , radius is not helping me , hence I am looking to use Ellipse here.

Code for free drawing circle : `

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

`

Can anyone do it?

Upvotes: 2

Views: 4600

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

you can do similarly to other shape cases: How to freedraw Circle in fabricjs using mouse?

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>

Upvotes: 10

Related Questions