從座標獲取像素

Question

我有2個座標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

代碼（你會發現在演示所有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。如果您在本地進行測試，請不要忘記包含它們。

玩得開心！