[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.setTransform()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

setTransform(a, b, c, d, e, f)
setTransform(matrix)

Przykłady:

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 400;

 const can = document.querySelectorAll("canvas");
 
 const ctx1 = can[0].getContext("2d");
 const ctx2 = can[1].getContext("2d");
 
 can[0].width = szer;
 can[0].height = wys; 
 can[1].width = szer;
 can[1].height = wys; 
 
 ctx1.setTransform(1, 0.4, 0.5, 1, 11, 11);
 ctx1.fillRect(0, 0, 50, 50);

 ctx1.fillStyle = "blue";
 ctx1.fillRect(200, 50, 200, 80)
 ctx1.setTransform(1, -0.4, -0.4, 1, 200, 50);

 ctx1.fillStyle = "orande";
 ctx1.fillRect(50, 50, 100, 100);

 ctx2.setTransform(1, 0.4, -0.4, 1, 30, 11);
 ctx2.fillStyle = "orange";
 ctx2.fillRect(300, 50, 50, 80);

 let trans = ctx1.getTransform();
 console.log(trans);
 ctx2.setTransform(trans);
 ctx2.beginPath();
 ctx2.arc(150, 150, 100, 0, 2 * Math.PI);
 ctx2.fill();

 return;

 };

</script>

<canvas width="100" height="100"></canvas><canvas width="100" height="100"></canvas>

 let matrix = new DOMMatrix();
 matrix.a = 1;
 matrix.b = 0;
 matrix.c = 0;
 matrix.d = 1;
 matrix.e = 260;
 matrix.f = -100;

Opis:
Metoda CanvasRenderingContext2D.setTransform() resetuje, zastępuje bieżącą transformację do formatu macierz tożsamości, a następnie wywołuje transformację opisaną przez argumenty metody. Umożliwia to skalowanie, obracanie, przenoszenie i pochylanie kontekstu. Zobacz także metodę transform() zamiast zastępować bieżącą macierz transformacji, to mnoży ją przez daną. Ta macierz transformacji jest mnożona po lewej stronie wektora kolumnowego reprezentującego każdy punkt rysowany na płótnie, aby uzyskać ostateczną współrzędną używaną na płótnie. Parametry setTransform() - ma dwa typy parametrów, które może zaakceptować. Starszy typ składa się z kilku parametrów reprezentujących poszczególne komponenty macierz transformacji do ustawienia: a (m11) - komórka w pierwszym wierszu i pierwszej kolumnie macierzy, b (m12) - komórka w drugim wierszu i pierwszej kolumnie macierzy, c (m21) - komórka w pierwszym wierszu i drugiej kolumnie macierzy, d (m22) - komórka w drugim wierszu i drugiej kolumnie macierzy, e (m41) - komórka w pierwszym wierszu i trzeciej kolumnie macierzy, f (m42) - komórka w drugim wierszu i trzeciej kolumnie macierzy, Alternatywnie możesz przekazać pojedynczy parametr będący obiektem zawierającym powyższe wartości jako właściwości. Nazwy parametrów są kluczami właściwości i jeśli występują dwie nazwy synonimiczne np. m11 i a, muszą mieć tę samą wartość liczbową lub < /span>, a pozostałe domyślnie domyślnie mają wartość i TypeError zostanie rzucony. Użycie formy obiektowej pozwala na pominięcie niektórych parametrów a d 1 0. Jeśli punkt pierwotnie miał współrzędne X, y, to po przekształceniu będzie miał współrzędne AX + Cy + mi, BX + Dy + F. To znaczy e i f kontrolują poziome i pionowe przenoszenie kontekstu. Kiedy b i c są 0, a i d kontroluj poziome i pionowe skalowanie kontekstu. Kiedy a i d są 1, b i c kontroluj poziome i pionowe pochylenie kontekstu. Wartość zwracana undefined.

Wartości parametrów:

a - oznacza skalowanie poziome
b - oznacza przechylenie poziome
c - oznacza pochylenie pionowe
d - oznacza skalowanie pionowe
e - oznacza ruch poziomy
f - oznacza ruch w pionie

Zobacz też:
DOMMatrix - 
transform() -