Fabric - rotate snapping demo (a little broken)
HTML
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>
CSS
canvas {
border: 1px solid #ccc;
}
JavaScript
var canvas = new fabric.Canvas('c', { selection: false });
// add objects
canvas.add(new fabric.Rect({
left: 100,
top: 100,
width: 50,
height: 50,
fill: '#faa',
originX: 'left',
originY: 'top',
centeredRotation: true
}));
canvas.add(new fabric.Circle({
left: 300,
top: 300,
radius: 50,
fill: '#9f9',
}));
canvas.on('object:rotating', function(options) {
var angle = options.target.angle;
var locked = (Math.ceil( options.target.angle / 45)) * 45
if(Math.abs(angle - locked) < 10 || Math.abs(locked - angle) < 10) {
angle = locked;
}
options.target.set({
angle: angle
});
});