Mousewheel on an object

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.5/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/all.js).
 */

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 75,
    fill: 'rgba(255,0,0,0.5)',
    lockUniScaling: true
});

var circle = new fabric.Circle({
    left: 200,
    top: 300,
    radius: 75,
    fill: 'rgba(0,255,0,0.5)',
});

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img){
    canvas.add(img.scale(0.4).set({ left: 450, top: 200, angle: 20 }));
});

canvas.add(rect, circle);

$(canvas.wrapperEl).on('mousewheel', function(e) {
    var target = canvas.findTarget(e);
    var delta = e.originalEvent.wheelDelta / 120;
    
    if (target) {
        target.scaleX += delta;
        target.scaleY += delta;
        
        // constrain
        if (target.scaleX < 0.1) {
            target.scaleX = 0.1;
            target.scaleY = 0.1;
        }
        // constrain
        if (target.scaleX > 10) {
            target.scaleX = 10;
            target.scaleY = 10;
        }
        target.setCoords();
        canvas.renderAll();
        return false;
    }
});