Я хочу позволить пользователям вращать объекты наFabric.js работает холст, но ограничивает их вращение с шагом 90 градусов. Идея состоит в том, что, когда они вращаются и затем останавливаются, объект «защелкивается» на место под ближайшим углом.

Это работает нормально, слушая «объект: вращение», устанавливая ближайший угол, затем вызывая object.setAngle (angleClosestTo90). Однако, как только объект был «привязан», элементы управления масштабированием / поворотом изображения отключаются. Вы все еще можете выбрать их, но это привередливо - я предполагаю, что объект, как ожидается, будет в своем последнем месте, а не в том, который был пересчитан с помощью setAngle ().

Это JSFiddle демонстрирует проблему:

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

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

canvas.add(rect);
canvas.renderAll();

var lastClosestAngle = 0,
    snapAfterRotate = false;

function calculateClosestAngle(targetObj) {
  // if angle > 360 then mod 360
  var currentAngle = targetObj.angle;
  var normalizedAngle = Math.abs(Math.round(Math.asin(Math.sin(currentAngle * Math.PI/360.0)) * 360.0/Math.PI));
  console.log("normalized: ", normalizedAngle);
  snapAfterRotate = true;
  if (normalizedAngle >= 45 && normalizedAngle < 135) {
    return 90;
  } else if (normalizedAngle >= 135 && normalizedAngle < 225) {
    return 180;
  } else if (normalizedAngle >= 225 && normalizedAngle < 315) {
    return 270;
  } else if ((normalizedAngle >= 315 && normalizedAngle <= 360) || (normalizedAngle >= 0 && normalizedAngle < 45)) {
    return 0;
  }
  return currentAngle;
}

canvas.on("object:rotating", function(rotEvtData) {
  var targetObj = rotEvtData.target;
  lastClosestAngle = calculateClosestAngle(targetObj);
});

canvas.on("object:modified", function(modEvtData) {
  // modified fires after object has been rotated 
  var modifiedObj = modEvtData.target;
  if (modifiedObj.angle && snapAfterRotate) {
      modifiedObj.setAngle(lastClosestAngle);
      snapAfterRotate = false;
      canvas.renderAll();
  }
})

Поверните коробку, затем отпустите мышь. Объект будет выбран, но попробуйте повернуть его снова. Указатель трудно найти / недоступен.

Если вы щелкнете от объекта, а затем снова выберите (или просто переместите объект после вращения), это нормально.