测距逻辑

Question

天哪，很难给这个问题起个名字...

我一直在研究这个 "progress bar" 逻辑，当用户移动时 his/her 鼠标 - 指示器（在本例中为进度条）显示光标与所需对象的距离。

基本上就像"hot 'n cold"那样。

...这是问题部分

relativeDistance = ((maxMouseDistance - distance) / maxDistance);

        if ((maxMouseDistance - distance) > maxDistance){
             relativeDistance = 1- (((maxMouseDistance) / maxDistance) -1);
        }

由于我的代码和距离测量是基于三角学的，它有一个小问题：屏幕上实际上至少有两个点，所需距离相等。

试试看，你就会明白我的意思了。

关于如何摆脱它的任何想法...这可能是因为逻辑，但我就是不明白。

Answer 1

你的逻辑是正确的。它被称为轨迹。 http://www.bbc.co.uk/schools/gcsebitesize/maths/geometry/locirev1.shtml

Answer 2

这jsFiddle符合您的要求吗？

它使用离鼠标最近的角而不是最远的角。当鼠标在任何角落时它将显示 0%，当鼠标接近目标时显示正百分比，即使目标偏离中心。

(function () {

    var mX
    , mY
    , distance
    , $distance = $('#distance')
    , $element = $('#thetarget')
    , maxMouseDistance
    , relativeDistance;
    var theWidth = $(document).width();
    var theHeight = $(document).height();

    $("#theWidth").text(theWidth);
    $("#theHeight").text(theHeight);

    function pythagoras(length, height) {        
        var length2 = length * length
          , height2 = height * height
        return Math.sqrt((length2 + height2));
    }


    /**/
    var target = $("#thetarget");
    target.css({
      cursor: "default"
    , border: "1px solid black"
    , margin: 0});
    var position = target.position(); // top left of target element
    var tX = Math.floor(position.left)
    var tY = Math.floor(position.top)
    $("#targetPosition").text(tX + ":" + tY);

    var corners = [
      [0, 0]
    , [theWidth, 0]
    , [theWidth, theHeight]
    , [0, theHeight]
    ]

   function distanceToNearestCorner(x, y) {
     var cornerX = x < tX ? 0 : theWidth
     var cornerY = y < tY ? 0 : theHeight
   
     return pythagoras(cornerX - tX, cornerY - tY)
   }

    /*Mouse movement tracking*/
    $(document).mousemove(function (e) {
        /*Get mouse coordinates*/
        mX = e.pageX;
        mY = e.pageY;
    
        /*calculate distance between mouse and element*/
        distance = pythagoras(tX - mX, tY - mY);
        maxMouseDistance  = distanceToNearestCorner(mX, mY)
        relativeDistance = ((maxMouseDistance - distance) / maxMouseDistance);    

        $distance.text(distance);

        var decimals = distance / 100;
        var percents = 100 - (distance / 100);
        $("#mouse").text(mX + ":" + mY);
        //$("#distanceDecimals").text(decimals);
        //$("#dFarCorner").text(maxDistance);
        $("#md2FarCorner").text(maxMouseDistance);
        $("#formula").text("(E to C max / M to C max) / (M to E distance/100)");
        $("#theNumber").text(relativeDistance);
        $('.fill').width((relativeDistance * 100) + "%");
    });

})();

它不会更新所有字段，但会更新进度条。

原回答

你似乎有很多函数没有被调用。

这是我重写的...但它没有被调用：

function calculateDistance(elem, mouseX, mouseY) {
  var deltaX = elem.offset().left - mouseX;
  var deltaY = elem.offset().top - mouseY;
  var delta2 = deltaX * deltaX + deltaY * deltaY;
  var delta = Math.floor(Math.sqrt(delta2))
  return delta
}

var elem = document.getElementById("targetPosition")
var relativeDistance = calculateDistance(elem , mX, mY)

在我的实现中，elem 是您认为是目标的 HTML 元素。我的函数是毕达哥拉斯定理的应用：它 returns 沿 x 轴和 y 轴与目标的距离总和的平方根，给出鼠标与目标之间的最短线的长度。

当我将其插入您的 jsFiddle 时，当我的光标刚好位于“目标”的“T”上方时，我看到 0 出现在 M2E 距离字段中。

这是您要找的吗？

测距逻辑

Distance measurement logic

javascript

html

math

distance

trigonometry