fabric.js 使用旋转手柄将旋转限制为 x 度

Question

我正在使用 fabric.js 并尝试允许我 canvas 上的任何对象旋转，不是自由旋转 360 度，而是一次只能旋转 15 度，使用旋转手柄。我非常努力地搜索，但到目前为止找不到答案。这可能吗？

Answer 1

您可以使用canvas.on("object:rotating")来干扰所有物体的旋转。我定义了一组有效角度，然后在旋转事件中我检查了要使用的角度。

var angles = [0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210, 225, 240, 255, 270, 285, 300, 315, 330, 345, 360];

canvas.on("object:rotating", function(rotEvtData) {
    var targetObj = rotEvtData.target;
    var angle = targetObj.angle % 360;
    for (var i=0; i < angles.length; i++) {
       if (angle <=  angles[i]) {
          targetObj.angle = angles[i];
          break;
       }
    }
  });

var canvas = new fabric.Canvas("c");

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 90,
    height: 90
});

canvas.add(rect);

var angles = [0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210, 225, 240, 255, 270, 285, 300, 315, 330, 345, 360];
canvas.on("object:rotating", function(rotEvtData) {
    var targetObj = rotEvtData.target;
    var angle = targetObj.angle % 360;
    for (var i=0; i < angles.length; i++) {
       if (angle <=  angles[i]) {
          targetObj.angle = angles[i];
          break;
       }
    }
  });

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>

Answer 2

较短的解决方案：

canvas.on('object:rotating', function(options) {
  var step = 15;
  options.target.angle = Math.round(options.target.angle / step) * step;
});

UPD: 从 1.6.7 开始你可以只使用 fabric.Object.snapAngle 属性:

someFabricObject.snapAngle = 15;

fabric.js 使用旋转手柄将旋转限制为 x 度

fabric.js limit rotation to x degrees with rotation handle

javascript

rotation

limit

fabricjs