좌표에서 픽셀 가져 오기

Question

2 점 x 및 y 점이 있습니다. 3 점 사이의 각도를 계산하려고합니다. 예를 들어 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를 필요로한다. 로컬에서 테스트하는 경우 포함시켜야합니다.

재미있게 보내세요!