Cinci comenzi pentru desenarea liniilor în SVG
În primul rând, vom determina începutul căii. Pentru aceasta, folosiți comanda M. Această comandă nu desenează, ci mișcă cursorul în punctul cu coordonatele date. Există două versiuni ale acestei comenzi. M indică faptul că coordonatele sunt absolute și m indică coordonatele relative (punctul de referință este punctul de referință anterior). În general, acest ordin de definiție funcționează pentru toate comenzile de cale. Codul de mai jos va muta cursorul într-un punct cu coordonatele 10 10
Există trei echipe pentru desen liniar. O linie arbitrară este trasă de comanda L sau l. Dacă aveți nevoie de o linie orizontală, utilizați comanda H sau h. În acest caz, este indicată doar o coordonată x. Coordonata y rămâne aceeași ca și punctul anterior. De asemenea, există o comandă pentru liniile verticale V sau v. Aici este indicată coordonata y. Când specificați coordonatele, nu uitați că punctul de referință este situat în colțul din stânga sus. Când vă deplasați spre dreapta, coordonatul x crește. Pe măsură ce vă deplasați în jos, coordonatele y cresc. Coordonatele pot avea valori negative. Exemplul de mai jos va desena un pătrat cu partea 80.
Să examinăm drumul spre puncte.
- Mai întâi, puneți cursorul în punctul 10 10 (comanda M10 10)
- Desenați o linie orizontală de 80 px (h80). Deoarece h în litere mici, atunci punctul de referință a fost coordonatele punctului anterior. Aceeași linie poate fi trasă folosind comanda H90.
- Apoi, trageți o linie verticală la 80px în jos (v80). Același lucru se poate face și cu comanda V90.
- Suntem în colțul din dreapta jos. Comanda h-80 desenează linia de 80px spre stânga.
- Ultima linie pe care am tras-o cu comanda L, deși aș putea folosi o altă comandă V sau Z.
Z - închide calea care leagă ultimul punct de primul punct. Același pătrat poate fi desenat după cum urmează
curbe SVG
Echipa A atrage o parte a elipsei (arc). La fel ca și pentru elipsă, pentru arc trebuie să specificăm două raze rx și ry. Apoi, indicăm câte grade se rotește axa X a elipsei. Următoarele două valori determină care parte a elipsei să fie afișată. Ultimele coordonate sunt sfârșitul arcului. Pe coordonate și raze nu vom locui. Aici totul este clar. Înțelegeți unghiul de rotație. În cazul graficelor, este mai bine să vedeți o dată. Codul de mai jos desenează două arce. Al doilea este rotit 45 de grade.
Arcul face parte din cale. Pentru a obține un arc, trebuie să desenați o elipsă prin două puncte de control. Problema este că pentru razele date pot fi trase două arce prin două puncte. Cum să facem așa încât să fie desenată una de care avem nevoie? Există două valori pentru acest lucru: drapelul. Primul determină dacă arcul ar trebui să fie mai mare de 180 de grade (1 - mai mult de 180, 0 - mai mic de 180). Al doilea parametru determină direcția mișcării arcului. Prin două puncte, putem desena un arc în sensul acelor de ceasornic (valoarea 1) și în sens antiorar (valoarea 0). Că era mai clar că privim exemplul de mai jos. Primul și al patrulea arc sunt părți ale unei elipse, a doua și a treia parte a aceleiași elipse, dar situate mai jos. Să presupunem că avem nevoie de un al treilea arc. Arc mai mare de 180 de grade înseamnă primul parametru 1. Deplasare de-a lungul arcului în direcția negativă, apoi al doilea parametru este 0.
Bezier curbe
Pentru o curbă Bezier cubică Trebuie specificate trei seturi de coordonate. Primele sunt coordonatele punctului de control de la începutul liniei, al doilea sunt coordonatele punctului de control al capătului liniei și ultimele coordonate ale punctului final al liniei. Dacă ați folosit un program pentru grafica SVG, probabil că vă amintiți că, dacă trasați o linie și faceți clic pe punctul final, veți vedea o linie cu un punct la sfârșit. Dacă tragem acest punct în direcții diferite, atunci curbura liniei originale se va schimba. Acesta este punctul de control. Punctele de control determină panta liniei. Funcția Bezier conduce o linie netedă de la pantă de la început până la panta de la capăt. Pentru a desena astfel de linii utilizați comanda C x1 y1, x2 y2, x y
Pentru a unifica curbele Bezier, folosiți comanda S x2 y2, x y. În acest caz, valoarea primului punct de control este considerată ca fiind valoarea oglindă a celui de-al doilea punct de referință al liniei anterioare.
Dacă S nu urmează altă comandă S sau C, atunci se presupune că ambele puncte de control sunt aceleași.
În SVG, este disponibil un alt tip de curbă Bezier. Curba patratică este mai simplă decât cea cubică. Este necesar un singur punct de control, care determină panta curbei la punctele de început și de sfârșit. Este desenată cu ajutorul comenzii
Q x1 y1, x y
Ca și pentru o funcție cubică, este posibilă combinarea mai multor câmpuri cu ajutorul comenzii
T x y
Funcția funcționează numai dacă există o funcție T sau Q înaintea acesteia. În caz contrar, se va trasa o linie dreaptă.
Ambele curbe dau rezultate similare. Cubic permite ajustarea mai precisă a aspectului curbei.
Articole similare
Trimiteți-le prietenilor: