transform - metoda obiektu CanvasCtx
Opis:
Zastąpi bieżącą macierz transformacji inną.
Składnia:
Object transform(Long a, Long b, Long c, Long d, Long e, Long f)
Parametry:
| a | (Long) (domyślnie 1) Pozioma proporcja rysowania |
|---|
| b | (Long) (domyślnie 0) Poziomy skos rysowania |
|---|
| c | (Long) (domyślnie 0) Pionowy skos rysowania |
|---|
| d | (Long) (domyślnie 1) Pionowa proporcja rysowania |
|---|
| e | (Long) (domyślnie 0) Poziome przesunięcie rysowania |
|---|
| f | (Long) (domyślnie 0) Pionowe przesunięcie rysowania |
|---|
Notatka:
Transformacje umożliwiają odwzorować pozycję z jednego układu współrzędnych do drugiego. Umożliwia rysowanie identycznego kształtu do różnie zwiększonej/zmniejszonej, odwróconej, przesuniętej, lustrzanie odwróconej 2D powierzchni. Prostrzym jest transformacja współrzędnych 2D powierzchni aniżeli przeliczać współrzędne wszystkich obiektów dla uzyskania identycznego efektu. Wszystkie transformacje pozycji są zdefiniowane 6 zmiennymi wartościami
a, b, c, d, e, f (z 9) macierzy tranformacji dla 2D powierzchni. Wartość domyślna nietransformowanej 2D powierzchni to
1, 0, 0, 1, 0, 0 (tzw. macierz jednostkowa). Macierz transformacji jest częścią składową powierczni do rysowania. Metody
save oraz
restore zapisują również taką macierz transformacji.
Metody transformacji
transform,
translate,
scale lub
rotate wpływają na niektóre (lub wszastkie) wartości macierzy transformacji.
Każda z tych metod zachowuje ważny aktualny stan macierzy transformacji oraz do niej przeprowadzi swoją zmianę. To znaczy, że zmiany są kumulatywne oraz naliczają się.
Przeciwnie metoda transformacji
setTransform najpierw ustawi bieżącą macierz transformacji na wartość domyślną a ponad nią przeprowadzi transformację transform. Jako jedyna z metod transformacji umożliwia wyzerować kumulowane transformacje oraz ustawić nową transformację bez kumulacji.
Metoda ta działa także w
Web panelach.
Przykłady transformacji graficznych na wikimedia.org:
https://commons.wikimedia.org/wiki/File:2D_affine_transformation_matrix.svgPrzykład1:
Zmienna
ctx reprezentuje obszar do rysowania (
CanvasCtx). Ta jest ustawiana w karcie "
Draw" na początku skryptu rysującego zdarzenia
onDraw następująco:
var ctx =
pEvent.
GetCtx(1);
JavaScriptWybierz oraz skopiuj do schowka
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);nie rotuj:
JavaScriptWybierz oraz skopiuj do schowka
ctx.transform(1, 0, 0, 1, 0, 0);wlewo:
JavaScriptWybierz oraz skopiuj do schowka
ctx.transform(0, -1, 1, 0, 0, dy);w dół:
JavaScriptWybierz oraz skopiuj do schowka
ctx.transform(-1, 0, 0, -1, dx, dy);w prawo:
JavaScriptWybierz oraz skopiuj do schowka
ctx.transform(0, 1, -1, 0, dx, 0);przewrócić:
JavaScriptWybierz oraz skopiuj do schowka
ctx.transform(-1, 0, 0, 1, dx, 0);wlewo oraz przewrócić:
JavaScriptWybierz oraz skopiuj do schowka
ctx.transform(0, 1, 1, 0, 0, 0);w dół oraz przewrócić:
JavaScriptWybierz oraz skopiuj do schowka
ctx.transform(1, 0, 0, -1, 0, dy);w prawo oraz przewrócić:
JavaScriptWybierz oraz skopiuj do schowka
ctx.transform(0, -1, -1, 0, dx, dy);