Menu
so i'm working on a canvas that you can only drag a image from side to side and use the mouse wheel to re size the image by zooming in and out on it here is the code i have so far please feel free to ask any more details. I'm trying to find a way that's compact to do this and require minimum code.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="kinetic-v5.1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "container",
width: 1800,
height: 800
});
var layer = new Kinetic.Layer();
// image
var image1 = new Kinetic.Image({
image: imageObj,
x: stage.getWidth() / 2 - 896 / 1,
y: stage.getHeight() / 2 - 255 / 2,
width: 200,
height: 157,
draggable: true,
dragBoundFunc: function (pos) {
if (pos.x < this.minX) { }
this.minX = pos.x;
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
// add cursor styling
image1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
image1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(image1);
stage.add(layer);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'image1.png';
</script>
</body>
</html>
949
One way would be to use a zoom helper. For example:
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;
}
};
Here is a demo with code you provided in as an example slightly changed.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
