Canvas - przesunięcie, obrót i skalowanie rysowanych elementów w JavaScript

Stronę tą wyświetlono już: 237 razy

Obracanie obiektu względem danego punktu

Za pomocą metody rotate można jedynie obrócić obiekt względem początku układu współrzędnych. Nie ma tutaj możliwości ustawienia punktu obrotu. Oto prosty przykład:

Listing 1
  1. var canvas = document.getElementById("rotate");
  2. var ctx = canvas.getContext("2d");
  3. ctx.fillStyle="blue";
  4. ctx.fillRect(10,10,90,10);
  5. ctx.save(); // metoda zapamiętująca bieżące ustawienia rysowania
  6. ctx.rotate(30 * Math.PI / 180);
  7. ctx.fillRect(10,10,90,10);
  8. ctx.restore(); // metoda odzyskująca poprzednie ustawienia rysowania

Wynik działania powyższego kodu będzie następujący:

Obrócenie obiektu względem dowolnego punktu wymaga zaprzęgnięcia dodatkowo metody translate w następujący sposób:

Listing 2
  1. var canvas = document.getElementById("rotateandtranslate");
  2. var ctx = canvas.getContext("2d");
  3. ctx.fillStyle="blue";
  4. ctx.fillRect(10,10,90,10);
  5. ctx.save(); // metoda zapamiętująca bieżące ustawienia rysowania
  6. ctx.translate(50, 15); // przemieszczenie
  7. ctx.rotate(30 * Math.PI / 180); // obrót
  8. ctx.translate(-50, -15); // przemieszczenie
  9. ctx.fillStyle="black";
  10. ctx.fillRect(10,10,90,10);
  11. ctx.restore(); // metoda odzyskująca poprzednie ustawienia rysowania

Wynik działania powyższego kodu będzie następujący:

Skalowanie rysowanych elementów

Do skalowania rysowanych obiektów służy metoda scale, która przyjmuje dwa argumenty: wartość skalowania na osi x i wartość skalowania na osi y. Oto przykład:

Listing 3
  1. var canvas = document.getElementById("scale");
  2. var ctx = canvas.getContext("2d");
  3. ctx.font = "30px Arial";
  4. ctx.fillStyle="blue";
  5. ctx.fillText("Some text", 10, 40);
  6. ctx.save(); // metoda zapamiętująca bieżące ustawienia rysowania
  7. ctx.scale(2, -1.); // skalowanie tekstu
  8. ctx.strokeStyle="black";
  9. ctx.strokeText("Some text", 10, -40);
  10. ctx.restore();

Wynik działania powyższego skryptu:

Macierz transformacji liniowej i przesunięcia

Wcześniej omówione metody umożliwiają przesuwanie, skalowanie i obracanie, aczkolwiek wszystkie te elementy można zastąpić tworząc macierz transformacji i translacji (przesunięcia). Macierz ta w przypadku obiektów 2W ma następującą postać:

Macierz transformacji i rotacji [1]

Zapis wyrażenia w formacie TeX-a:

\begin{bmatrix} a_1 & a_2 & a_5\\ a_3 & a_4 & a_6\\ 0 & 0 & 1 \end{bmatrix}

gdzie:

a1, a2, a3, a4 - elementy macierzy przekształcenia liniowego a zarazem kolejne argumenty metody ustawiającej macierz przekształcenia liniowego i przemieszczenia; a5, a6 - elementy macierzy odpowiedzialne za przemieszczenie, które równocześnie są kolejnymi argumentami metody ustawiającej macierz przekształcenia liniowego i przemieszczenia.

Istnieją trzy metody związane z macierzą przekształcenia liniowego i przemieszczenia, pierwszą z nich jest metoda setTransform. Metoda ta przyjmuje wyżej opisane argumenty odpowiadające sześciu elementom macierzy przekształcenia i przesunięcia.

Kolejną metodą jest transform, która również przyjmuje te same argumenty z tą tylko różnicą, że mnoży ona macierz bieżącego przekształcenia i przemieszczenia z macierzą, której elementy składowe zostały podane na wejście tejże metody.

Ostatnia metoda resetTransform resetuje ustawienia macierzy transformacji do pierwotnego stanu.

Oto przykład zastosowania tych metod w praktyce:

Listing 4
  1. var canvas = document.getElementById("transform");
  2. var ctx = canvas.getContext("2d");
  3. var angle = Math.PI / 180 * 30;
  4. var cos = Math.cos(angle);
  5. var sin = Math.sin(angle);
  6. ctx.setTransform(cos, sin, - sin, cos, 50, 50);
  7. for(i = 0; i < 12; i++){
  8. ctx.fillStyle="rgb(" + parseInt(255 / 12 * i) + "," + parseInt(255 - 255 / 12 * i) + "," + parseInt(255 / 12 * i) + ")";
  9. ctx.fillRect(0, 0, 50, 10);
  10. ctx.transform(cos, sin, - sin, cos, 0, 0);
  11. }

Wynik działania powyższego skryptu:

Komentarze