Question

我有一个点的坐标x和y。我想计算三点之间的角度，比如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每次移动点都会改变，我也有更新的坐标，但是我无法得到可以在公式中使用的整个像素来计算新的角度。

Answer 1

如果我理解你的要求 - 你想为它们之间形成的角度创建一个计算器 3个点（A，B中间，C）。

您的功能应该适用于最终计算，但您需要每次都记住该功能一点已经移动。

我创建了一个很好的小提琴来演示如何实现它：jQuery，jQuery-ui，html。

我使用了UI库的draggable()插件，允许用户手动拖动点而且我在拖动时重新计算角度。

看看：COOL DEMO JSFIDDLE

CODE（您将在演示中找到所有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＆amp; jQuery的UI。如果您在本地进行测试，请不要忘记包含它们。

玩得开心！

从坐标获取像素

1 个答案: