onMouseUp() {
if (!this.isMouseDown) return;
this.isMouseDown = false;
this.ellipse.setCoords();
this.ellipse.on('scaling', (o) => {
this.onScaling(o);
});
this.options.layer.canvas.setActiveObject(this.ellipse);
this.options.layer.canvas.renderAll();
this.options.layer.canvas.trigger('object:modified', {target: this.ellipse});
}
onMouseDown(o) {
this.isMouseDown = true;
this.mouseStartPosition = this.options.layer.canvas.getPointer(o.e);
this.ellipse.set({
left: this.mouseStartPosition.x,
top: this.mouseStartPosition.y,
});
this.options.layer.canvas.add(this.ellipse);
this.options.layer.canvas.renderAll();
}
onScaling() {
const { width, height, scaleX, scaleY } = this.ellipse;
this.ellipse.set({
width,
height,
rx: width * scaleX / 2,
ry: height * scaleY / 2,
scaleX: 1,
scaleY: 1,
});
}
onMouseMove(o) {
if (!this.isMouseDown) return;
this.mousePosition = this.options.layer.canvas.getPointer(o.e);
this.ellipse.set({
rx: Math.abs(this.mouseStartPosition.x - this.mousePosition.x)/2,
ry: Math.abs(this.mouseStartPosition.y - this.mousePosition.y)/2,
});
if (this.mouseStartPosition.x > this.mousePosition.x) {
this.ellipse.set({
left: this.mousePosition.x,
});
}
if (this.mouseStartPosition.y > this.mousePosition.y) {
this.ellipse.set({
top: this.mousePosition.y,
});
}
this.options.layer.canvas.renderAll();
}