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

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 6490 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:

var canvas = document.getElementById("rotate"); var ctx = canvas.getContext("2d"); ctx.fillStyle="blue"; ctx.fillRect(10,10,90,10); ctx.save(); // metoda zapamiętująca bieżące ustawienia rysowania ctx.rotate(30 * Math.PI / 180); ctx.fillRect(10,10,90,10); 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:

var canvas = document.getElementById("rotateandtranslate"); var ctx = canvas.getContext("2d"); ctx.fillStyle="blue"; ctx.fillRect(10,10,90,10); ctx.save(); // metoda zapamiętująca bieżące ustawienia rysowania ctx.translate(50, 15); // przemieszczenie ctx.rotate(30 * Math.PI / 180); // obrót ctx.translate(-50, -15); // przemieszczenie ctx.fillStyle="black"; ctx.fillRect(10,10,90,10); 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:

var canvas = document.getElementById("scale"); var ctx = canvas.getContext("2d"); ctx.font = "30px Arial"; ctx.fillStyle="blue"; ctx.fillText("Some text", 10, 40); ctx.save(); // metoda zapamiętująca bieżące ustawienia rysowania ctx.scale(2, -1.); // skalowanie tekstu ctx.strokeStyle="black"; ctx.strokeText("Some text", 10, -40); 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:

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

Wynik działania powyższego skryptu: