Question

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

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

});

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

用户希望获得两分但是可以缩放图像。计算目的地并将图像缩小到其原始状态。用户在画布上添加一张新图片，其中显示了我知道其物理宽度和高度的内容。因此，系统根据之前完成的校准重新计算图像的像素宽度和高度。所以正确的程序将是

取两点（放大图像）
查找距离
用比例分割距离
使用距离

或

取两点（放大图像）
以比例
计算距离
使用距离

哪一个更正确？

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

根据评论更新

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

1 个答案: