标签：zooming easeljs javascript canvas panning

我在此示例中无法修复平移 – 除非您移动缩放图像然后再次缩放(偏移设置为默认值并且视图跳转到初始位置 – 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");
    });
}); 

解决方法:

有点旧,但因为它仍然需要一个anwser：

伟大的json虽然小提琴.我在工作中使用它来修复bug.

只需更换：

  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;

奇迹般有效.
我分叉你的jsfiddle并相应地改变它.
http://jsfiddle.net/kz0dL78k/

标签：zooming,easeljs,javascript,canvas,panning
来源： https://codeday.me/bug/20190830/1769157.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。