Draw parallel lines along a path - PHP GD -
i need draw subway map (multiple routes along same path) using php's image library. here's example:
********* ******** * ******* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************** * ********************* **********************
it's easy enough draw 1 line along path. don't know how draw multiple lines follow path have equal amount of space between them.
for given point a, , more lines through it, first points you'll have decide whether points go 'inside'(b) track, or 'outside'(c):
********c d******a * q*****b * * * * * * e *
now, can calculate offset of point b point path length=offset (5px instance) along angle half clockwise angle between ae & ad 'inside' b (or clockwise angle ad ae 'outside' c, or use negative offset later on). you'll want point b on distance of 5px along line through angle angle ae + ((angle ad - angle ae) / 2)
i'm no means math wiz, , time needed calculate angles in javascript, i'll give example, rewrite php please (anybody does know math, feel free laugh & correct when needed):
var dx = b.x - a.x; var dy = b.y - a.y; if(dx == 0 && dy == 0){ answer = 0; } else if(dx > 0 && dy >= 0 ){ answer = math.atan(dy/dx); } else if(dx <= 0 && dy > 0){ answer = math.atan(dx/dy) + (math.pi * 0.5); } else if(dx <= 0 && dy <= 0){ answer = math.atan(dy/dx) + math.pi; } else if(dx >= 0 && dy <= 0){ answer = math.atan(dy/dx) + (math.pi * 1.5); }
so, in grid d=(0,10),a=(10,10), e=(20,20):
- the angle through ae = 45° (pi/4 rad),through ad = 180° (pi rad)
- the angle through ab
(45 + ((180-45)/2))
=> 112.5° (5/8 pi rad) - 5px offset a=(10,10) through angle 112.5° gives location b:
bx = ax + (cos(angle) * 5) = +/- 8.1
by = ay + (sin(angle) * 5) = +/- 14.6
- at 'sibling' point q next starting point d have no previous path reference / calculate angle from, i'd take perpendicular: angle dq = angle da + 90° (pi/2 rad) (in example dy+5, maybe don't start parallel 1 of 2 axis)
- rinse , repeat other points, draw lines between calculated coordinates.
Comments
Post a Comment