html5 canvas - Android drawing lines with arrows -

html5 canvas - Android drawing lines with arrows -

im learining java+android, , topic draw in canvas finger, android helped me lot allow users drawing lines. but, in app want add together head of arrow each line. tryed using path.lineto add together triangle, probleme can't rotate right direction.

thinks help

you have math. lets lastly point of line a, , lastly 1 b. have calculate direction vector d a-b. vector should normalized, ie divided own length, , stretched length want arrow head lines be. using androids pointf class a,b , d, should this:

pointf = <initialize lastly point of line> pointf b = <initialize lastly 1 point of line> // difference vector pointf d = new pointf(a.x-b.x, a.y-b.y); // normalize d.set(d.x / d.length(), d.y / d.length()); // stretch to, say, 10 units d.set(10.0f * d.x, 10.0f * d.y);

now rotation part. want rotate 3/4*pi, 1 time clockwise , 1 time counterclockwise. can using rotation matrix. 2-dimensional case, quite simple:

float angle = 0.75f * math.pi; pointf dleft = new pointf(+d.x*math.cos(-angle)-d.y*math.sin(-angle),+d.x*math.sin(-angle)+d.y*math.cos(-angle)); pointf dright = new pointf(+d.x*math.cos(+angle)-d.y*math.sin(+angle),+d.x*math.sin(+angle)+d.y*math.cos(+angle));

note dleft , dright direction vectors. calculate 2 ending points of arrow lines, have add together these a. in pseudo-(non-java)-code do:

moveto(a); lineto(a+dleft); moveto(a); lineto(a+dright);

hope work; luck!

android html5-canvas drawing