Unable to zoom the canvas???? any help would be appreciated using the jquery.mousewheel.js
I have been able to load a image via kinetic, but the zoom would not work at all.
I would like a fiddle of the zoom if possible with my code.
an example would be nice to understand its implication
enter code here
<!doctype html>
<html>
<head>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://rawgithub.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<script type="text/javascript" src="kinetics.js"></script>
<style>
canvas
{
border: 1px solid #aaa;
-moz-box-shadow: 3px 3px 8px #222;
-webkit-box-shadow: 3px 3px 8px #222;
box-shadow: 3px 3px 8px #222;
}
body {
background-image:
-moz-linear-gradient(45deg, #C0C0C0 25%, transparent 25%,transparent 75%, #C0C0C0 75%, #C0C0C0 100%),
-moz-linear-gradient(45deg, #C0C0C0 25%, transparent 25%,transparent 75%, #C0C0C0 75%, #C0C0C0 100%);
background-image:
-webkit-linear-gradient(45deg, #C0C0C0 25%, transparent 25%,transparent 75%, #C0C0C0 75%, #C0C0C0 100%),
-webkit-linear-gradient(45deg, #C0C0C0 25%, transparent 25%,transparent 75%, #C0C0C0 75%, #C0C0C0 100%);
-moz-background-size:20px 20px;
background-size:20px 20px;
-webkit-background-size:20px 20px;
background-position:0 0, 30px 30px;
padding:10px;
}
#container1, #container2 {
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:100px;
}
#container2 {
height:300px;
width:600px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<!-- <body onload="go_kinetics();"> -->
<body onload="test();">
<div id="container"></div>
<!--
<div id="container1"></div>
<div id="container2"></div>
-->
</body>
</html>
Here's a starting example of how to zoom into the KineticJS stage at a clicked zoom point:
You can substitute mousewheel events for button events to drive the zooming.
You can adjust this example to do panning by adding offsetX's to each element.
<!DOCTYPE HTML>
<html>
<head>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
</head>
<body>
<h3>Click on a point on the canvas.<br>The canvas will zoom at that point.<br>Then use zoom buttons.</h3>
<button id="larger">Zoom-In at clicked point</button>
<button id="smaller">Zoom-Out at clicked point</button>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
// parentGroup is used in jquery events
// so make it global
var parentGroup;
// load the image and then start the app
var image=new Image();
image.onload=function(){
start();
}
image.src="houseicon.png";
// build everything, wire events
function start(){
parentGroup=new Kinetic.Group({
x:0,
y:0,
width:image.width,
height:image.height
});
parentGroup.offsetX=0;
parentGroup.offsetY=0;
parentGroup.scalePtX=0;
parentGroup.scalePtY=0;
parentGroup.scaleFactor=1.00;
parentGroup.scaleBy=function(scaleChange){
// undo previous offset
this.offsetX += this.scalePtX/this.scaleFactor;
this.offsetY += this.scalePtY/this.scaleFactor;
// calc new scaling factor
var newScaleFactor = this.scaleFactor*(1+scaleChange);
// create new offset
this.offsetX -= this.scalePtX/newScaleFactor;
this.offsetY -= this.scalePtY/newScaleFactor;
// set new scale factor
this.scaleFactor=newScaleFactor;
// do the new offset
this.setOffset(this.offsetX,this.offsetY);
// do the new scale
this.setScale(this.scaleFactor);
layer.draw();
};
layer.add(parentGroup);
var kImage=new Kinetic.Image({
image:image,
x:0,
y:0,
width:image.width,
height:image.height
});
parentGroup.add(kImage);
var childGroup=new Kinetic.Group({
x:0,
y:0,
width:100,
height:50
});
parentGroup.add(childGroup);
var childRect=new Kinetic.Rect({
x:0,
y:0,
width:105,
height:25,
stroke:"lightgray",
fill:"skyblue"
});
childGroup.add(childRect);
var childText=new Kinetic.Text({
x:5,
y:3,
fontSize:18,
text:"Hello, World",
fill:"blue"
});
childGroup.add(childText);
layer.draw();
// scale up by +0.10 at parentGroup scalePtX/scalePtY
$("#larger").click(function(){
parentGroup.scaleBy(0.10);
});
// scale up by +0.10 at parentGroup scalePtX/scalePtY
$("#smaller").click(function(){
parentGroup.scaleBy(-0.10);
});
// set parentGroup scalePtX/scalePtY
$(stage.getContent()).on('click', function (event) {
var pos=stage.getPointerPosition();
var mouseX=parseInt(pos.x);
var mouseY=parseInt(pos.y);
parentGroup.scalePtX=mouseX;
parentGroup.scalePtY=mouseY;
});
} // end start
}); // end onload
</script>
</body>
</html>