Snap object on scaling
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');
canvas.uniScaleTransform = true //unlocks scale ratio
var grid = 50;
// grid
for (var i = 0; i < (canvas.width / grid); i++) {
canvas.add(new fabric.Line([ i * grid, 0, i * grid, canvas.width], { stroke: '#ccc', selectable: false }));
canvas.add(new fabric.Line([ 0, i * grid, canvas.width, i * grid], { stroke: '#ccc', selectable: false }));
}
canvas.add(new fabric.Rect({
left: 120,
top: 240,
width: 240,
height: 100,
fill: '#faa'
}));
canvas.on('object:scaling', snapScaling);
function snapScaling(options) {
var target = options.target;
var type = canvas.getActiveObject().get('type');
var corner = target.__corner;
var w = target.getWidth();
var h = target.getHeight();
var snap = { // Closest snapping points
top: Math.round(target.top / grid) * grid,
left: Math.round(target.left / grid) * grid,
bottom: Math.round((target.top + h) / grid) * grid,
right: Math.round((target.left + w) / grid) * grid,
};
snap.height = snap.top - snap.bottom;
if(snap.height < 0) {
snap.height *= - 1;
}
snap.width = snap.left - snap.right;
if(snap.width < 0) {
snap.width *= - 1;
}
console.log(corner);
console.log(target);
switch (corner) {
case 'mt':
case 'mb':
target.top = snap.top;
target.height = snap.height;
target.scaleY = 1;
break;
case 'ml':
case 'mr':
target.left = snap.left;
target.width = snap.width;
target.scaleX = 1;
break;
case 'tl':
case 'bl':
case 'tr':
case 'br':
target.top = snap.top;
target.left = snap.left;
target.height = snap.height;
target.width = snap.width;
target.scaleY =...