# Get pixel from coordinates

I have 2 x and y coordinates of a point. I want to calculate the angle between three points, say A, B, C.

Now for point B, I don't have a pixel that contains 2 coordinates, instead I have a pixel, how can I get one pixel that I can use in my formula.

``````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;

}
```

```

How to do it.

A changes every time I move the point and I have the coordinates updated, but I cannot get the entire pixel that I can use in the formula to calculate the new angle.

+3

source to share

If I understand what you are asking, you want to create a calculator for the angle formed between 3 points (A, B middle, C).

Your function should work for the final calculation, but you need to remember the function every time the point moved.

I created a nice fiddle to demonstrate how you can achieve it: jQuery, jQuery-ui, html.

I used a `draggable()`

UI library plugin to allow the user to manually drag points around AND I recalculate the angle as I drag.

Take a look: COOL DEMO JSFIDDLE

CODE (you will find all HTML and CSS in the demo):

``````\$(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));
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();
}

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
};
}

});
```

```

This code requires jQuery and jQuery-UI. Remember to enable them if you check it locally.

Good luck!

+2

source

All Articles