EaselJS -破碎的平移缩放图像
EaselJS - broken panning on zoomed image
我在这个例子中有问题修复平移-它工作得很好,除非你移动缩放图像,然后再次缩放(偏移量设置为默认值,视图跳转到初始位置- http://jsfiddle.net/p2Qzg/)。有什么办法解决这个问题吗?我已经试着解决这个问题三天了,没有任何好的结果。
var canvas= document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var stage = new createjs.Stage("myCanvas");
function addCircle(r,x,y){
var g=new createjs.Graphics().beginFill("#ff0000").drawCircle(0,0,r);
var s=new createjs.Shape(g)
s.x=x;
s.y=y;
stage.addChild(s);
stage.update();
}
addCircle(10,200,100);
addCircle(5,canvas.width/2,canvas.height/2);
addCircle(3,400,400);
canvas.addEventListener("mousewheel", MouseWheelHandler, false);
canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
var zoom;
function MouseWheelHandler(e) {
if(Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)))>0)
zoom=1.1;
else
zoom=1/1.1;
stage.regX += stage.mouseX - stage.regX;
stage.regY += stage.mouseY - stage.regY;
stage.x=stage.mouseX;
stage.y=stage.mouseY;
stage.scaleX=stage.scaleY*=zoom;
stage.update();
}
stage.addEventListener("stagemousedown", function(e) {
var offset={x:stage.x-e.stageX,y:stage.y-e.stageY};
stage.addEventListener("stagemousemove",function(ev) {
stage.x = ev.stageX+offset.x;
stage.y = ev.stageY+offset.y;
stage.update();
});
stage.addEventListener("stagemouseup", function(){
stage.removeAllEventListeners("stagemousemove");
});
});
有点老了,但它仍然需要一个答案:
很棒的json。我在我的工作中使用它并修复了错误。
替换:
stage.regX += stage.mouseX - stage.regX;
stage.regY += stage.mouseY - stage.regY;
用这些代码行:
var local = stage.globalToLocal(stage.mouseX, stage.mouseY);
stage.regX=local.x;
stage.regY=local.y;
很有魅力。我对你的文件进行了修改。http://jsfiddle.net/kz0dL78k/
相关文章:
- 自动缩放图像以匹配文本高度
- 使用-webkit transform:scale()缩放图像
- 缩放图像灯箱
- 保持可缩放图像的纵横比
- 使用 HTML 输出标记查看可缩放图像并分配 src
- 使用弹性框和缩放图像并保持在同一行上
- 查找图像上两点之间的距离,即使缩放图像也是如此
- 当只给定宽度或高度时,是否所有浏览器都按比例缩放图像
- 获取缩放图像的尺寸
- 从输入[类型=文件]缩放图像
- 如何防止 javascript drawImage() 缩放图像
- HTML 画布:缩放图像以适合而不拉伸
- 缩放图像,而不是在调整浏览器窗口大小时环绕图像
- 从中心缩放图像(fabricjs)
- 使用 CSS 在 HTML 中缩放图像
- jQuery SpriteSpin 缩放图像
- 如何更改数据缩放图像值
- 使用 jquery 悬停时缩放图像
- 使用鼠标向下拖动以缩放图像缩略图
- 我如何创建鼠标滚轮可缩放图像