2014-10-07 270 views
3

我有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每次移动点都在变化,我也有更新后的坐标,但是我无法获得我可以在公式中使用的整个像素来计算新角度。

+1

解释一些。我无法理解“我有一个像素,我没有坐标”。 – GramThanos 2014-10-07 20:32:13

+0

@ThanasisGrammatopoulos我有一个特定点(例如一条线的起点)的x和y坐标,所以我可以将一条线的起始点移动到x方向并保持高度相同以改变角度与基地一致。现在,如果我移动坐标变化,并通过使用鼠标移动来获得这些x和y位置。现在,我如何使用相同的2个坐标来计算使用此公式的角度,因为我正在拍摄3个像素,而现在我没有A像素。 – PSDebugger 2014-10-07 20:53:17

+0

我想我明白了。在旋转线条时,您不知道如何计算A的新x和y? – GramThanos 2014-10-07 20:58:13

回答

2

如果我明白你在问什么 - 你想创建一个计算器,形成 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。如果您在本地进行测试,请不要忘记包含它们。

玩得开心!

+0

+1这确实是一个很酷的演示 – 2014-10-08 07:46:18