从坐标中获取像素

Get the pixel from coordinates

本文关键字：像素 获取 坐标      更新时间：2023-09-26

我有一个点的两个坐标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都在变化，我也有更新的坐标，但我无法获得公式中可以用来计算新角度的整个像素。

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

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

我创建了一个很好的fiddle来演示如何使用jQuery、jQueryui、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。如果您在本地进行测试，请不要忘记将它们包括在内。

玩得开心！

相关文章：