画布通过旋转放大鼠标点

Canvas zoom into mouse point with a rotation

本文关键字：鼠标 放大 旋转 布通过      更新时间：2023-09-26

我正在使用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 可以看到它运行良好，但当容器围绕其中心旋转时则不然。我似乎无法弄清楚如何使用容器上的转换来解释任何旋转，任何帮助和解释将不胜感激。

解决方案，你可以在 JS 小提琴中看到它： 

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;
        }
    }
相关文章：