Fabric js, Rotating point in each side

user_11743253 0
Viewed 261

I would like to configure fabricJS to add extra rotation controls. I know there is a control API, I am not sure how to use it. control-api

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({ width: 100, height: 100, fill: 'red', transparentCorners: false, top: 50, left: 50 });
canvas.add(rect);
canvas.setActiveObject(rect);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<canvas id="c" width="400" height="400" ></canvas>

fabricjs javascript
1 Answers

The new control api allows you to add controls to the

fabric.Object.prototype.controls

This object has a key for each control, and the one that actually hold the rotation is the controls.mtr by default.

we can add mtr1, mtr2 and mtr3 contols in this way.

const originalControl = fabric.Object.prototype.controls.mtr;
fabric.Object.prototype.controls.mtr1 = new fabric.Control({
 x: -0.5,
 y: 0,
 offsetX: -40,
 actionHandler: originalControl.actionHandler,
});

Look in the snippet for more details

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({ width: 100, height: 100, fill: 'red', transparentCorners: false, top: 50, left: 50 });
canvas.add(rect);

const originalControl = fabric.Object.prototype.controls.mtr;
fabric.Object.prototype.controls.mtr1 = new fabric.Control({
 x: -0.5,
 y: 0,
 offsetX: -40,
 actionHandler: originalControl.actionHandler,
 withConnection: true,
 actionName: 'rotate',
});
fabric.Object.prototype.controls.mtr2 = new fabric.Control({
 x: 0.5,
 y: 0,
 offsetX: 40,
 actionHandler: originalControl.actionHandler,
 withConnection: true,
 actionName: 'rotate',
});
fabric.Object.prototype.controls.mtr3 = new fabric.Control({
 x: 0,
 y: 0.5,
 offsetY: 40,
 actionHandler: originalControl.actionHandler,
 withConnection: true,
 actionName: 'rotate',
});

canvas.setActiveObject(rect);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<canvas id="c" width="400" height="400" ></canvas>

Ugly but work. A note, not specifying actionName: 'rotate' does not keep the rotation point in the center. This is obviously wrong and should be addressed in the library probably.

user_26556780
Related