I am using fabric.js and trying to allow rotation for any object on my canvas, not freely 360 degrees, but only 15 degrees at a time, using the rotation handle. I searched really hard but couldn't find an answer so far. Is this possible?

I am using fabric.js and trying to allow rotation for any object on my canvas, not freely 360 degrees, but only 15 degrees at a time, using the rotation handle. I searched really hard but couldn't find an answer so far. Is this possible?

• javascript
• rotation
• limit
• fabricjs

Share Improve this question Follow edited Jan 26, 2016 at 11:55 AndreaBogazzi 14.8k33 gold badges4141 silver badges6767 bronze badges asked Jan 25, 2016 at 11:35 recepkutukrecepkutuk 8711 gold badge22 silver badges99 bronze badges 1

• You might be able to edit this JSFiddle (got it from this StackOverflow question) to fit your needs. – leroydev Commented Jan 25, 2016 at 14:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Shorter solution:

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

Since 1.6.7 you can just use fabric.Object.snapAngle property:

someFabricObject.snapAngle = 15;

You can use canvas.on("object:rotating") to interfer with rotation of all objects. I defined a set of valid angles, and then on the rotation event i checked which one to use.

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./ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>