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

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

html

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>

功能图（比例、平移）{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
//透明帆布
clearRect（0，0，canvas.width，canvas.height）；
context.save（）；
context.translate（translatePos.x，translatePos.y）；
语境。尺度（尺度，尺度）；
t=刻度；
drawImage（img，0，0，img.width，img.height，//源矩形
0,0，canvas.width，canvas.height）；//目标矩形；
restore（）；
}
变量初始化=（函数（）{
var canvas=document.getElementById（“myCanvas”）；
变量translatePos={
x:canvas.width/10，
y:canvas.height/10
};
var标度=1.0；
var scaleMultiplier=0.92；
var startDragOffset={}；
var mouseDown=false；
var t=1.0；
img=新图像（）；
img.src=http://irlen.com/wp-content/uploads/2015/09/world-map-large.png';
//添加按钮事件侦听器
document.getElementById（“plus”）.addEventListener（“单击”，函数）（）{
scale/=scaleMultiplier；
绘制（缩放、平移）；
}，假）；
document.getElementById（“减号”）.addEventListener（“单击”，函数（）{
scale*=scaleMultiplier；
绘制（缩放、平移）；
}，假）；
canvas.addEventListener（“dblclick”，函数（evt）{
警报（evt.clientX/t+''+evt.clientY）；
});
//添加事件侦听器以处理屏幕拖动
canvas.addEventListener（“鼠标向下”，函数（evt）{
mouseDown=true；
startDragOffset.x=evt.clientX-translatePos.x；
startDragOffset.y=evt.clientY-translatePos.y；
});
canvas.addEventListener（“鼠标”，函数（evt）{
mouseDown=false；
});
canvas.addEventListener（“鼠标悬停”，函数（evt）{
mouseDown=false；
});
canvas.addEventListener（“mouseout”，函数（evt）{
mouseDown=false；
});
canvas.addEventListener（“mousemove”，函数（evt）{
如果（鼠标向下）{
translatePos.x=evt.clientX-startDragOffset.x；
translatePos.y=evt.clientY-startDragOffset.y；
绘制（缩放、平移）；
}
});
绘制（缩放、平移）；
}());

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

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

---

你能提供工作链接。。。这将很容易提供解决方案。根据图像画布放大缩小，绘制的线也重新绘制在相同的位置，我在放大前绘制。我想要解决方案，但我找不到，因为lineTo（x，y）：每次放大或缩小后，x和y的相关性都会改变。我需要实现哪种方法才能获得完美的解决方案？我已经更新了链接，您可以在那里查看，如果您在这方面有任何问题，请告诉我。您可以在一个数组中维护（存储）所有行（起点和终点）。每次重新绘制画布时，只需使用该数组重新绘制线条，并相应地使用scaleFactor。如果我从draw（scale，translatePos）函数中删除context.translate（translatePos.x，translatePos.y），则它将为我提供精确的。但我也希望在画布上拖动图像，并可能使用context.translate（translatePos.x，translatePos.y）。所以用这个我不能得到确切的新的。你能给我建议吗？即使在拖动图像后，我也希望所有行都回到图像的同一位置，但我无法得到它。请使用当前版本的代码为其创建链接。我会改变它。我添加了函数drawMeasure（），用于在放大和缩小后将线重新绘制回图像。拖动后，我还希望所有行都返回。但我不知道在哪种情况下需要添加函数drawMeasure（）。

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