I using Kinetijs in my project and trying to implement zoom using mousewheel
. I don't know why the event is not getting triggered. I am doing this:
//... a helper object for zooming
var zoomHelper = {
stage: null,
scale: 1,
zoomFactor: 1.1,
origin: {
x: 0,
y: 0
},
zoom: function(event) {
event.preventDefault();
var delta;
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
if (event.originalEvent.detail > 0) {
//scroll down
delta = 0.2;
} else {
//scroll up
delta = 0;
}
} else {
if (event.originalEvent.wheelDelta < 0) {
//scroll down
delta = 0.2;
} else {
//scroll up
delta = 0;
}
}
var evt = event.originalEvent,
mx = evt.clientX - zoomHelper.stage.getX(),
my = evt.clientY - zoomHelper.stage.getY(),
zoom = (zoomHelper.zoomFactor - delta),
newscale = zoomHelper.scale * zoom;
zoomHelper.origin.x = mx / zoomHelper.scale + zoomHelper.origin
.x - mx / newscale;
zoomHelper.origin.y = my / zoomHelper.scale + zoomHelper.origin
.y - my / newscale;
zoomHelper.stage.setOffset({
x: zoomHelper.origin.x,
y: zoomHelper.origin.y
});
zoomHelper.stage.setScale({
x: newscale,
y: newscale
});
zoomHelper.stage.draw();
zoomHelper.scale *= zoom;
}
};
$(function() {
var width = $(document).width() - 2,
height = $(document).height() - 5;
var stage = zoomHelper.stage = new Kinetic.Stage({
container: 'container',
width: width,
height: height,
draggable: true
});
var layer = new Kinetic.Layer();
var background=new Kinetic.Rect({
x:0,
y:0,
width: width,
height: height,
fill:'#E4E4E4'
});
var box1 = new Kinetic.Circle({
x: 50,
y: 50,
radius: 50,
fill: '#00D200',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
var box2 = new Kinetic.Circle({
x: 150,
y: 150,
radius: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
// add cursor styling
box1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
// add cursor styling
box2.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box2.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(background);
layer.add(box1);
layer.add(box2);
stage.add(layer);
$(stage.content).on('mousewheel DOMMouseScroll', zoomHelper.zoom);
});
I have created fiddle for this. I don't know whats going wrong. Please help.
mousewheel
event is non-standard and deprecated. Use wheel
event instead, and it will work fine: http://jsfiddle.net/Lhru88oq/4/
//... a helper object for zooming
var zoomHelper = {
stage: null,
scale: 1,
zoomFactor: 1.1,
origin: {
x: 0,
y: 0
},
zoom: function(event) {
event.preventDefault();
var delta;
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
if (event.originalEvent.detail > 0) {
//scroll down
delta = 0.2;
} else {
//scroll up
delta = 0;
}
} else {
if (event.originalEvent.wheelDelta < 0) {
//scroll down
delta = 0.2;
} else {
//scroll up
delta = 0;
}
}
var evt = event.originalEvent,
mx = evt.clientX - zoomHelper.stage.getX(),
my = evt.clientY - zoomHelper.stage.getY(),
zoom = (zoomHelper.zoomFactor - delta),
newscale = zoomHelper.scale * zoom;
zoomHelper.origin.x = mx / zoomHelper.scale + zoomHelper.origin
.x - mx / newscale;
zoomHelper.origin.y = my / zoomHelper.scale + zoomHelper.origin
.y - my / newscale;
zoomHelper.stage.setOffset({
x: zoomHelper.origin.x,
y: zoomHelper.origin.y
});
zoomHelper.stage.setScale({
x: newscale,
y: newscale
});
zoomHelper.stage.draw();
zoomHelper.scale *= zoom;
}
};
$(function() {
var width = $(document).width() - 2,
height = $(document).height() - 5;
var stage = zoomHelper.stage = new Kinetic.Stage({
container: 'container',
width: width,
height: height,
draggable: true
});
var layer = new Kinetic.Layer();
var background=new Kinetic.Rect({
x:0,
y:0,
width: width,
height: height,
fill:'#E4E4E4'
});
var box1 = new Kinetic.Circle({
x: 50,
y: 50,
radius: 50,
fill: '#00D200',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
var box2 = new Kinetic.Circle({
x: 150,
y: 150,
radius: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
// add cursor styling
box1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
// add cursor styling
box2.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box2.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(background);
layer.add(box1);
layer.add(box2);
stage.add(layer);
$(stage.content).on('wheel DOMMouseScroll', zoomHelper.zoom);
});
<script type="text/javascript" src="https://rawgit.com/ericdrowell/KineticJS/master/kinetic.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="container"></div>