即使缩放图像，也能找到图像上两点之间的距离

Question

我在画布上加载了一个图像。我想找到这张图片上点之间的距离。但是由于图像可能有点小用户可以放大（缩放图像）然后单击两个点找到距离。要在任何图像上点击点是很容易的部分

myImage.on('mousedown', function(e){

    console.log(e.layerX + " "+e.layerY);
}

虽然我不太确定 layerX 是不是更好。如果用户缩放了图像怎么办。那不是意味着距离会更大吗？那么正确的方法是什么？是不是先把layerX和layerY缩小再计算距离？

myImage.on('mousedown', function(e){
    var x, y;
    x = e.layerX / this.getScaleX();
    y = e.layerY / this.getScaleY();
    calculateDistance(x, y);

});

以上会计算出更准确的距离吗？在第二个级别，我想取这个距离，然后根据我校准的距离重新校准另一张照片（做相反的事情）。用例：

用户想要取两个点，但将图像放大。计算目的地并将图像缩小到其原始状态。用户在画布上添加了一张新图片，它显示了我知道它的物理宽度和高度的东西。所以系统会根据之前的校准重新计算图像的像素宽度和高度。所以正确的程序是

1. 取两个点（在放大的图像上）
2. 寻找距离
3. 用比例除以距离
4. 使用距离

或

1. 取两个点（在放大的图像上）
2. 按比例划分layerX和layerY
3. 计算距离
4. 使用距离

哪个更正确？

Answer 1

我会得到这两个点并除以图像比例。

See JSBin

html

<div id="holder">
    <img src="http://30.media.tumblr.com/tumblr_lzq1rfNV7N1qhze6fo1_500.jpg" />
</div>

css

#holder {
  width: 100%;
  height:auto;
}

#holder img {
  width: 100%;
  height:auto;
}

JavaScript

var last = {
  x:0,
  y:0
};
//dim is the original image dimensions
var dim = {
  width:500,
  height:427
};
var img = $("#holder img");
img.bind('mousedown',checkpoint);

function checkpoint(e){
  // ratio is the scaled image width/height
  // divided by the original width/height
  var ratio = {
    x:img.width()/dim.width,
    y:img.height()/dim.height
  };

  point = {
    x:e.clientX / ratio.x,
    y:e.clientY / ratio.y
  };
  var dis = distance(last.x,last.y,point.x,point.y);
  last=point;
  console.log(dis);
}

function distance(x1, y1, x2,y2){
    var dx = x2-x1;
    var dy = y2-y1;
    return Math.sqrt(dx*dx+dy*dy);
}

根据评论更新