Koordinātu pārveidojumi

Last modified by superadmin on 2018-01-12 20:38

Koordinātu pārveidojumi

Vispārīgā sintakse - lietojam elementu g un atribūtu transform:

<g transform="...">
...
</g>

Starp <g transform="..."> un </g> varam aprakstīt figūras vai tekstu un citus SVG objektus. Šie objekti attēlosies nevis noklusētajā koordinatu sistēmā, kuras sākumpunkts ir kreisais augšējais ekrāna stūris, bet transformētajā koordinatu sistēmā. Starp <g transform="..."> un </g> drīkst rakstīt citas transformacijas. Tas nozīmē, ka mēs transformējam tālāk jau transformēto koordinātu sistēmu. Minēsim svarīgākās transformācijas:

Paralēlā pārnese

Lietojam konstrukciju <g transform="translate(tx,ty)">, kur skaitļi tx un ty ir jaunas koordinatu sistēmas koordinatu sakuma punkts. Šajā transformācijā koordinātu sākums tiek pārnests uz norādīto punktu, koordinātu asis paliek paralēlas sākotnējās sistēmas asīm.

<svg width="400" height="400">
<g transform="translate(50,50)">
   <text x="30" y="30" style="font-size:10; font-family:Verdana">
      Text here(Translated)
   </text>
</g>
</svg>

Teksta sākuma koordinātes jaunajā sistēmā ir (30,30), bet jaunās koordinatu sistēmas sākums ir punktā (50,50) sākotnējā koordinatu sistēmā, tātad teksta sākuma koordinātes sākotnējā koordinatu sistēmā ir (30+50,30+50)=(80,80).

Piemērs: translate.svg

Pagrieziens

To veic ar konstrukciju: <g transform="rotate(rotate_angle,cx,cy)">, kur cx un cy ir punkta koordinātes, ap kuru tiek veikts pagrieziens, rotate_angle ir leņķis, par kuru pagriezīsies koordinātu sistēma. Ja iekavās norādīts tikai viens skaitlis, tad pagriezienu veic par šo leņķi ap sākotnējās koordinātu sistēmas koordinātu sākumpunktu.

<svg width="400" height="400">
<g transform="translate(80,50)">
    <g transform="rotate(60)">
        <text x="0" y="0" style="font-size:15; font-family:Verdana;fill:blue">
            Text (rotated)
        </text>
    </g>
</g>
</svg>

Šajā piemērā teksts pagriezts par 60 grādiem; turklāt koordinātu sistēma vispirms pārnesta uz punktu (80,50).

Piemērs: rotate.svg

<svg width="400" height="400">
<g transform="rotate(90,200,200)">
  <rect x="10" y="10" width="90" height="80" fill="yellow" stroke="blue" stroke-width="2"/>
</g>
</svg>

Šajā piemērā veikts 90 grādu pagrieziens ap punktu (200,200). Tas ir ekvivalents paralēlajai pārnesei par (200,200), pagriezienam un pārnesei atpakaļ - par (-200,-200).

Piemērs: rotate2.svg

Izstiepšana/saspiešana, sašķiebšana, vispārīgais pārveidojums ar matricu

Šos pārveidojumus veic, norādot transform atribūtu vienādu attiecīgi ar scale(2 1) (kur iekavās norāda izstiepšanas/saspiešanas koeficientus), skewX(30) (kuru asi atstāt nekustīgu un par cik grādiem nošķiebt otru asi), vai matrix(-0.57,1,-1,0.57,160,50) (kur iekavās rakstītie 6 skaitļi ir koeficienti homogēno koordinātu pārveidojumam ar matricu, pie kam, pēdējā matricas rindā ir koeficienti 0 0 1).

Piemērs: scale.svg

Piemērs: skew.svg

Piemērs: matrix.svg

Visos piemēros uzskatāmības dēļ ir uzzīmētas jauno koordinātu sistēmu asis.

Tags:
Created by Kalvis Apsītis on 2008-05-01 18:11
    
This wiki is licensed under a Creative Commons 2.0 license
XWiki Enterprise 6.4 - Documentation