Canvas - przesunięcie, obrót i skalowanie rysowanych elementów w JavaScript
Stronę tą wyświetlono już: 6324 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:
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:
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:
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ć:
[1] |
Zapis wyrażenia w formacie TeX-a:
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:
Wynik działania powyższego skryptu:
Tytuł:
JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera
Autor:
Jon Duckett
Tytuł:
JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych
Autor:
Laurence Lars Svekis, Maaike van Putten, Rob Percival
Tytuł:
JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript
Autor:
Kyle Simpson
Tytuł:
JavaScript dla dzieci dla bystrzaków
Autor:
Chris Minnick, Eva Holland
Tytuł:
Modularny JavaScript dla zaawansowanych
Autor:
Nicolas Bevacqua
Tytuł:
JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi
Autor:
Lynn Beighley
Tytuł:
Matematyka dla programistów JavaScript
Autor:
Jacek Piechota
Tytuł:
JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera
Autor:
Jon Duckett
Tytuł:
ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript
Autor:
Nicholas C. Zakas
Tytuł:
JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II
Autor:
Simon Timms