javascript - Get the pixel from coordinates -

javascript - Get the pixel from coordinates -

i have 2 coordinates x , y of point. want calculate angle between 3 points, a,b,c.

now b point not have pixel contains 2 coordinates instead have pixel, how can single pixel can utilize in 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 proceed this.

a changing every time move point , have updated coordinates not able whole pixel can utilize in formula calculate new angle.

if understand asking - want create calculator angle formed between 3 dots (a, b middle, c).

your function should work final calculation need recall function every time point has moved.

i created nice fiddle demonstrate how can accomplish : jquery, jquery-ui, html.

i used draggable() plugin of ui library allow user manually drag dots around , i'm recalculating angle while dragging.

take look: cool demo jsfiddle

the code ( find html & css in demo):

$(function(){ //def position values: var defa = { top:20, left:220 }; var defb = { top:75, left:20 }; var defc = { top:200, left:220 }; //holds grade 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 , updates: function set_result() { var = 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 grade = radians * (180/math.pi); //degrees homecoming degree.tofixed(3); } //default position: function reset_pos() { $("#a").css(defa); $("#b").css(defb); $("#c").css(defc); set_result(); } //add lines , 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 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(); homecoming { y: _y + (_h/2), x: _x + (_w/2), width: _w, height: _h }; } });

this code requires jquery & jquery-ui. don't forget include them if test locally.

have fun!

javascript jquery html