translate - metoda obiektu CanvasCtx
Opis:
Metoda przesunie pozycję (0,0) na powierzchni do rysowania.
Składnia:
Object translate(Long x, Long y)
Parametry:
| x | (Long) Przesunie wartość poziomo w kierunku x |
|---|
| y | (Long) Przesunie wartość pionowo w kierunku y |
|---|
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
panelach webowych.
Przykład:
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.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 100, 50);
