Svg útvonalon
Öt parancs az SVG rajzvonalakhoz
Először meghatározzuk az út kezdetét. Ehhez használja az M. parancsot. Ez a parancs nem rajzol, hanem a kurzort a megadott koordinátákkal a pontra mozgatja. Ennek a parancsnak két változata létezik. M fejléc jelzi, hogy a koordináták abszolút értékek, m pedig relatív koordinátákat jelöl (a referenciapont az előző útpont). Általában ez a definíciós sorrend minden útvonalparancsra érvényes. Az alábbi kód a kurzort a 10 10 koordinátájú pontra mozgatja
Három csapat van az egyenes vonalhoz. Az L vagy L parancs tetszőleges vonalat húz. Ha vízszintes vonalra van szüksége, használja a H vagy a h parancsot. Ebben az esetben csak egy x koordinátát jelez. Az y koordináta ugyanaz marad, mint az előző pont. A V vagy v függőleges vonalakra is van parancs. Itt látható az y koordináta. A koordináták meghatározásakor ne felejtsük el, hogy a referenciapont a bal felső sarokban található. Ha jobbra mozog, az x koordináta nő. Ahogy lefelé halad, az y koordináta növekszik. A koordináták negatív értékeket vehetnek fel. Az alábbi példa egy négyzetet rajzol a 80 oldallal.
Vizsgáljuk meg a pontokat.
- Először tegye a kurzort a 10 10 pontra (M10 10 parancs)
- Rajzolj egy 80px (h80) vízszintes vonalat. Mivel h a kisbetűs, akkor a referenciapont volt az előző pont koordinátái. Ugyanaz a vonal húzható a H90 parancs használatával.
- Ezután húzza meg a függőleges vonalat 80px lefelé (v80). Ugyanez a V90 paranccsal is elvégezhető.
- A jobb alsó sarokban vagyunk. A h-80 parancs balra húzza a 80px vonalat.
- Az utolsó sor, amit az L paranccsal rajzoltam, bár egy másik V vagy Z parancsot használhattam.
Z - zárja az utat, amely az utolsó pontot az elsőhöz kapcsolja. Ugyanazt a négyzetet lehet rajzolni az alábbiak szerint
görbék SVG
Az A csapat az ellipszis részét képezi. Ugyanúgy, mint az ellipszis esetében, az ívnek két sugarat és rx-et kell megadnunk. Ezután jelezzük, hogy hány fokkal az ellipszis X-tengelyét forgatjuk. A következő két érték határozza meg az ellipszis mely részét mutatja. Az utolsó koordináták az ív vége. A koordinátákon és sugarakon nem fogunk lakni. Itt minden világos. Értsd meg a forgási szöget. Grafika esetén jobb látni egyszer. Az alábbi kód két ívből áll. A második forgatás 45 fok.
Az ív része az ösvénynek. Egy ív készítéséhez ellipszist kell rajzolni két vezérlőponton keresztül. A probléma az, hogy az adott sugarakhoz két ív húzható két ponton keresztül. Hogyan lehet úgy tenni, hogy az, amire szükségünk van, rajzolódik? Ennek két értéke van: a zászló. Az első meghatározza, hogy az ív több mint 180 fok legyen (1 - több mint 180, 0 - kevesebb, mint 180). A második paraméter határozza meg az ívmozgás irányát. Két ponton keresztül egy körívet az óramutató járásával megegyező irányba (1 érték) és az óramutató járásával ellentétes irányba (0 érték) húzhatunk. Hogy világosabb volt, megnézzük az alábbi példát. Az első és a negyedik ív egy ellipszis része, ugyanazon ellipszis második és harmadik része, de az alábbiakban. Tegyük fel, hogy szükségünk van egy harmadik ívre. Az 180 ° -nál nagyobb íveltség jelenti az első 1. paramétert. Az ív mentén mozgás negatív irányban, akkor a második paraméter 0.
Bezier görbék
Köbméteres Bezier-görbe esetén Három koordináta-készletet kell megadni. Az első a vonal elején lévő vezérlőpont koordinátái, a második pedig a vonal végpontjának vezérlőpontjának koordinátái és a vonal végpontjának utolsó koordinátái. Ha egy svg grafika programot használtál, akkor valószínűleg emlékszel arra, hogy ha rajzolsz egy vonalat, és kattints a végpontra, látni fogsz egy sort egy ponttal a végén. Ha ezt a pontot különböző irányba húzzuk, akkor az eredeti vonal görbülete megváltozik. Ez a vezérlőpont. Az ellenőrző pontok határozzák meg a vonal lejtését. A Bezier függvény sima vonalat vezet a lejtőn az elején a lejtőn a végén. Az ilyen vonalak rajzolásához használja a C x1 y1, x2 y2, x y parancsot
A Bezier-görbék egységesítéséhez használja az S x2 y2, x y parancsot. Ebben az esetben az első vezérlőpont értékét az előző sor második referenciapontjának tükörértékeként kell venni.
Ha S nem követ egy másik S vagy C parancsot, akkor feltételezzük, hogy mindkét ellenőrző pont ugyanaz.
Az SVG-ben egy másik típusú Bezier-görbe áll rendelkezésre. A kvadratikus görbe egyszerűbb, mint a köbméter. Csak egy vezérlőpontra van szükség, amely meghatározza a görbe meredekségeit a kezdő és végpontokban. A parancs segítségével rajzolódik ki
Q x1 y1, x y
Ugyanúgy, mint egy köbös funkcióhoz, több parancsmásolatot is kombinálhatunk a parancs segítségével
T x y
A funkció csak akkor működik, ha előtte volt egy T vagy Q funkció. Ellenkező esetben egy egyenes vonalat fognak rajzolni.
Mindkét görbe hasonló eredményeket ad. A Cubic lehetővé teszi a görbe megjelenését.