I'm using EaselJS to work on an HTML5 canvas for some pretty easy stuff. All I want to do is pan, zoom and rotate an image... I want to zoom the image around my mouse pointer and I know there's lots of answers for that question but I've got that sorted. It's when I rotate the container it goes horribly wrong. Here's my zoom function:
function zoom(delta){
var p = container.globalToLocal(stage.mouseX, stage.mouseY);
var scale = Math.max(0.1, Math.min(container.scaleX + delta, 3));
container.scaleX = container.scaleY = scale;
var p2 = container.globalToLocal(stage.mouseX, stage.mouseY);
container.x += (p2.x - p.x) * scale;
container.y += (p2.y - p.y) * scale;
}
Here's my JSFiddle to see it working well but not when the container has been rotated around its centre. I just can't seem to work out how I could use my transforms on the container to account for any rotation, any help and explanation would be greatly appreciated.
Solution, you can see it in JS Fiddle :
function zoom(delta){
var p = container.globalToLocal(stage.mouseX, stage.mouseY);
var scale = Math.max(0.5, Math.min(container.scaleX + delta, 3));
container.scaleX = container.scaleY = scale;
var p2 = container.globalToLocal(stage.mouseX, stage.mouseY);
if(container.rotation == 0){
container.x += (p2.x - p.x) * scale;
container.y += (p2.y - p.y) * scale;
}else if (container.rotation == 90){
container.x -= (p2.y - p.y) * (scale);
container.y += (p2.x - p.x) * (scale);
}else if(container.rotation == 180){
container.x -= (p2.x - p.x) * scale;
container.y -= (p2.y - p.y) * scale;
}else{
container.x += (p2.y - p.y) * (scale);
container.y -= (p2.x - p.x) * (scale);
}
}
function rotate(r){
if((container.rotation+r) > 270){
container.rotation = 0;
}else{
container.rotation += r;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.