[Canvas] Nachylenie lini złożonej z obrazków Opcje

[markuz]

Witam,

Posiadam kolejny i już ostatni problem do rozwiązania. Jako iż matematyka nie jest moją najmocniejszą stroną zwracam się do Was o radę.
Mam linię którą chce narysowac za pomocą obrazków. Linia posiada x1, y1, x2, y2.

Na podstawie współrzędnych obliczam długość wektora:

[JAVASCRIPT] pobierz, plaintext 
Math.round(Math.sqrt(Math.pow(x1 - x2,2) + Math.pow(y1 - y2,2)))
[JAVASCRIPT] pobierz, plaintext 

Dzięki czemu wiem ile obrazków ma znajdować się w danej lini.
Nastepnie za pomocą petli rysuje te obrazki:

[JAVASCRIPT] pobierz, plaintext 
for(var d = 0; d < Math.round(length/ribbon_size); d++) { 
    canvas.drawImage(this, line.x1 + (d * ribbon_size), line.y1 - Math.round(ribbon_size/2), ribbon_size, ribbon_size);
}
[JAVASCRIPT] pobierz, plaintext 

Problem polega na tym, że niektóre linie są ustawione pod różnym katem. Wiem, że do tego słuzy funkcja:

[JAVASCRIPT] pobierz, plaintext 
canvas.rotate(radians);
[JAVASCRIPT] pobierz, plaintext 

Znalazłem skrypt który na podstawie współrzędnych oblicza kąt (w radianach):

[JAVASCRIPT] pobierz, plaintext 
Math.atan2(-(line.y2 - line.y1), (line.x2 - line.x1))
[JAVASCRIPT] pobierz, plaintext 

Po połączeniu wszystkiego:

[JAVASCRIPT] pobierz, plaintext 
var length = Math.round(Math.sqrt(Math.pow(line.x1 - line.x2,2) + Math.pow(line.y1 - line.y2,2)));
var theta = Math.atan2(-(line.y2 - line.y1), (line.x2 - line.x1));
canvas.save(); 
canvas.rotate(theta); 
for(var d = 0; d < Math.round(length/ribbon_size); d++) { 
    canvas.drawImage(this, line.x1 + (d * ribbon_size), line.y1 - Math.round(ribbon_size/2), ribbon_size, ribbon_size);
}
canvas.restore(); 
[JAVASCRIPT] pobierz, plaintext 

Rysowane są tylko linie poziome, reszty nie widac na canvas.
Ma ktoś jakiś pomysl?

Edit. Problem może tkwić w punkcie według którego jest nachylana dana linia. tzn. canvas.translate(x, y); Aczkolwiek nadal nie wiem dokładnie ocb.

Ten post edytował markuz 23.05.2014, 10:36:23

[trueblue]

Przyda się? http://www.p01.org/releases/Drawing_lines_in_JavaScript/

[markuz]

Raczej nie. W podanym linku rysuje gość linie, bez tła i to w czystym HTML. Znalazłem coś podobnego: http://jsfiddle.net/m1erickson/R278u/, ale to nadal nie to samo - chociaz będę kombinował.

Gotowe rozwiązanie:

kod: http://jsfiddle.net/bb6D2/
podgląd: http://jsfiddle.net/bb6D2/show/

Dzisiaj dopisałem rysowanie tła z obrazków na podstawie krzywej Bezier'a, może komuś się przyda:
http://jsfiddle.net/pNSLT/

Ten post edytował markuz 29.05.2014, 09:49:02