Fabric js，每边的旋转点

Question

我想配置 fabricJS 以添加额外的旋转控件。我知道有一个控件API，但我不知道如何使用它。 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>

Answer 1

新控件api允许您将控件添加到

fabric.Object.prototype.controls

这个对象每个控件都有一个key，实际持有旋转的那个默认是controls.mtr

我们可以通过这种方式添加mtr1、mtr2和mtr3控件。

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

查看代码片段了解更多详情

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>

丑陋但工作。注意，未指定 actionName: 'rotate' 不会将旋转点保持在中心。这显然是错误的，应该在库中解决。

Fabric js，每边的旋转点

Fabric js, Rotating point in each side

javascript

fabricjs