Question

我正在使用EaselJS处理HTML5画布，以获得一些非常简单的东西。我想做的就是平移，缩放和旋转图像......我想缩放鼠标指针周围的图像，我知道这个问题有很多答案，但我已经对它进行了排序。当我旋转容器时，它出现了可怕的错误。这是我的缩放功能：

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;
}

这是我的JSFiddle看到它运作良好但不是当容器围绕其中心旋转时。我似乎无法弄清楚如何在容器上使用我的变换来解释任何轮换，任何帮助和解释都将非常感激。

Answer 1

解决方案，您可以在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;
        }
    }

画布使用旋转

1 个答案: