Mousewheel on an object
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 #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)',
});
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('mousedown', function(e) {
$(this).on('mousemove', function() {
var target = canvas.findTarget(e);
var delta = 1;
if (target) {
if(target.width > 200) {
target.width += 200;
target.height += 200;
} else {
target.width += delta;
target.height += delta;
}
target.setCoords();
canvas.renderAll();
return false;
}
});
});