javascript - 从坐标中获取像素

Question

我有一个点的 2 个坐标 x 和 y。我想计算三点之间的 Angular ，比如 A、B、C。

现在对于 B 点，我没有包含 2 个坐标的像素，而是我有像素，我怎样才能获得可以在我的公式中使用的单个像素。

function find_angle(A,B,C) {
var AB = Math.sqrt(Math.pow(B.x-A.x,2)+ Math.pow(B.y-A.y,2));    
var BC = Math.sqrt(Math.pow(B.x-C.x,2)+ Math.pow(B.y-C.y,2)); 
var AC = Math.sqrt(Math.pow(C.x-A.x,2)+ Math.pow(C.y-A.y,2));
var abc = (BC*BC)+ (AB*AB)-(AC*AC);

var x = abc/(2*BC*AB);

 var Angle = FastInt((Math.acos(x) * 180/3.14159));
   document.getElementById("Angle").value = Angle;

 }

如何进行。

每次我移动点时 A 都会改变，我也有更新的坐标，但我无法获得可在公式中使用的整个像素来计算新 Angular 。

Answer 1

如果我明白你在问什么——你想为两者之间形成的 Angular 创建一个计算器3 个点(A、B 中间、C)。

您的函数应该适用于最终计算，但您需要每次都调用该函数一个点移动了。

我创建了一个很好的 fiddle 来演示如何使用 jQuery、jQuery-ui、html 实现它。

我使用了 UI 库的 draggable() 插件来允许用户手动拖动圆点我正在重新计算拖动时的 Angular 。

看看:COOL DEMO JSFIDDLE

代码(您将在演示中找到所有 HTML 和 CSS):

$(function(){
    //Def Position values:
    var defA = { top:20, left:220 };
    var defB = { top:75, left:20 };
    var defC = { top:200, left:220 };

    //Holds the degree symbol:
    var degree_symbol = $('<div>').html('&#12444;').text();

    //Point draggable attachment.
    $(".point").draggable({
      containment: "parent",
      drag: function() {
          set_result(); //Recalculate
      },
      stop: function() {
          set_result(); //Recalculate
      }
    });

    //Default position:
    reset_pos();

    //Reset button click event:
    $("#reset").click(function(){ reset_pos(); });

    //Calculate position of points and updates:
    function set_result() {
        var A = get_middle("A");
        var B = get_middle("B");
        var C = get_middle("C");
        angle = find_angle(A,B,C);
        $("#angle").val(angle + degree_symbol);
        connect_line("AB");
        connect_line("CB");        
    }

    //Angle calculate:    
    function find_angle(A,B,C) {
        var AB = Math.sqrt(Math.pow(B.x-A.x,2)+ Math.pow(B.y-A.y,2));    
        var BC = Math.sqrt(Math.pow(B.x-C.x,2)+ Math.pow(B.y-C.y,2)); 
        var AC = Math.sqrt(Math.pow(C.x-A.x,2)+ Math.pow(C.y-A.y,2));
        radians = Math.acos((BC*BC+AB*AB-AC*AC)/(2*BC*AB)); //Radians
        degree  = radians * (180/Math.PI); //Degrees
        return degree.toFixed(3);
    }

    //Default position:
    function reset_pos() {
        $("#A").css(defA);
        $("#B").css(defB);
        $("#C").css(defC);
        set_result();
    }

    //Add lines and draw them:
    function connect_line(points) {
        var off1 = null;
        var offB = get_middle("B");
        var thickness = 4;
        switch (points) {
            case "AB": off1 = get_middle("A"); break;
            case "CB": off1 = get_middle("C"); break;
        }
        var length = Math.sqrt(
            ((offB.x-off1.x) * (offB.x-off1.x)) + 
            ((offB.y-off1.y) * (offB.y-off1.y))
        );
        var cx = ((off1.x + offB.x)/2) - (length/2);
        var cy = ((off1.y + offB.y)/2) - (thickness/2);
        var angle = Math.atan2((offB.y-off1.y),(offB.x-off1.x))*(180/Math.PI);
        var htmlLine = "<div id='" + points + "' class='line' " +
                       "style='padding:0px; margin:0px; height:" + thickness + "px; " +
                       "line-height:1px; position:absolute; left:" + cx + "px; " + 
                       "top:" + cy + "px; width:" + length + "px; " +
                       "-moz-transform:rotate(" + angle + "deg); " + 
                       "-webkit-transform:rotate(" + angle + "deg); " + 
                       "-o-transform:rotate(" + angle + "deg); " + 
                       "-ms-transform:rotate(" + angle + "deg); " + 
                       "transform:rotate(" + angle + "deg);' />";
        $('#testBoard').find("#" + points).remove();
        $('#testBoard').append(htmlLine);
    }

    //Get Position (center of the point):
    function get_middle(el) {
        var _x = Number($("#" + el).css("left").replace(/[^-\d\.]/g, ''));
        var _y = Number($("#" + el).css("top").replace(/[^-\d\.]/g, ''));
        var _w = $("#" + el).width();
        var _h = $("#" + el).height();
        return { 
            y: _y + (_h/2), 
            x: _x + (_w/2),
            width: _w, 
            height: _h 
        };
    }

});

此代码需要 jQuery 和 jQuery-UI。如果您在本地进行测试，请不要忘记包含它们。

玩得开心!