使用 translate() 和 scale() 缩放画布图像，但使用 javascript 获取与原始画布图像相同的 x 和 y 坐标

Question

在初始比例为 1.08 的画布图像上双击后，它会给出在我缩放画布图像后不匹配的 x 和 y。我想要相同的 x 和 y 甚至画布被缩放。即使在缩放画布之后我需要相同或拖动画布，我也需要相同的 x 和 y 而无需更改。因为我想计算画布上绘制的 2 个点之间的距离，所以如果我计算没有缩放的两点之间的距离（单击加号按钮后）和缩放后，对于画布图像的同一区域，两者都是不同的。为什么？

html

<input type="button" id="plus" value="+">
<input type="button" id="minus" value="-">    
<canvas id="myCanvas" width="500" height="500"></canvas>

javascript

<script>
function draw(scale, translatePos){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.save();
    context.translate(translatePos.x, translatePos.y);
    context.scale(scale, scale);
    t = scale ;
    context.drawImage(img, 0, 0, img.width,    img.height,     // source rectangle
                   0, 0, canvas.width, canvas.height); // destination rectangle;


    context.restore();
}

var initialize = (function(){
    var canvas = document.getElementById("myCanvas");

    var translatePos = {
        x: canvas.width/10,
        y: canvas.height/10 
    };

    var scale = 1.0;
    var scaleMultiplier = 0.92;
    var startDragOffset = {};
    var mouseDown = false;
    var t = 1.0;


    img = new Image();
    img.src = 'http://irlen.com/wp-content/uploads/2015/09/world-map-large.png';

    // add button event listeners
    document.getElementById("plus").addEventListener("click", function(){
        scale /= scaleMultiplier;
        draw(scale, translatePos);
    }, false);

    document.getElementById("minus").addEventListener("click", function(){
        scale *= scaleMultiplier;
        draw(scale, translatePos);
    }, false);
 canvas.addEventListener("dblclick", function(evt){


        alert(evt.clientX / t +' '+evt.clientY);

    });
    // add event listeners to handle screen drag
    canvas.addEventListener("mousedown", function(evt){
        mouseDown = true;
        startDragOffset.x = evt.clientX - translatePos.x;
        startDragOffset.y = evt.clientY - translatePos.y;
    });

    canvas.addEventListener("mouseup", function(evt){
        mouseDown = false;
    });

    canvas.addEventListener("mouseover", function(evt){
        mouseDown = false;
    });

    canvas.addEventListener("mouseout", function(evt){
        mouseDown = false;
    });

    canvas.addEventListener("mousemove", function(evt){
        if (mouseDown) {
            translatePos.x = evt.clientX - startDragOffset.x;
            translatePos.y = evt.clientY - startDragOffset.y;
            draw(scale, translatePos);
        }
    });

    draw(scale, translatePos);
}());
</script>

Answer 1

根据给定的代码和提供的链接，我可以看到您只需将当前距离除以最新的比例因子。

new_measure = getDistance(x1,x2,y1,y2) / scaleFactor;