Skip to content

Instantly share code, notes, and snippets.

@jocap
Created March 27, 2014 01:04
Show Gist options
  • Save jocap/9797638 to your computer and use it in GitHub Desktop.
Save jocap/9797638 to your computer and use it in GitHub Desktop.
Draw a line between two coordinates (pixels). According to my calculations, Dx should be divided by 2, but for some reason in reality, it shouldn't. Hm.
function draw_line_between(ax, ay, bx, by)
{
var comp_x = ax - bx
var comp_y = ay - by
var _angle = Math.atan(comp_y/comp_x)*180/Math.PI // Yes, I like my angles in degrees...
var _distance = Math.sqrt(Math.abs(comp_x*comp_x + comp_y*comp_y))
var div = document.createElement("div")
var Dy = Math.cos((180-90-_angle)*(Math.PI/180))*(_distance/2);
var Dx = Math.sin((90-(180-_angle)/2)*(Math.PI/180))*Math.sin((_angle/2)*(Math.PI/180))*(_distance)
document.getElementsByTagName("body")[0].appendChild(div)
div.style.position = "absolute"
div.style.top = (-parseInt(ay)+Dy).toString()+"px"
div.style.left = (parseInt(ax)-Dx).toString()+"px"
div.style.width = _distance.toString()+"px"
div.style.height = "1px"
div.style.background = "black"
div.style.WebkitTransform = "rotate("+_angle.toString()+"deg)"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment