svg基礎 4 座標和變換

2021-04-14 02:12:25 字數 1558 閱讀 7068

座標和變換

元素在整個教程中都是通過座標定位的。現在是該討論這些座標所適應的系統的時候了。

當首次訪問文件時,使用者**(在大多數情況下,即瀏覽器)確定影象的觀察口。觀察口是文件實際可見的部分並且由乙個座標系統組成,該座標系統以左上角的點(0,0)為原點,其正的 x 軸向右而正的 y 軸向下。座標系統中的乙個畫素對應觀察口中的乙個畫素。

有幾個操作可以建立新的座標系統。變換(接下來介紹)在被變換元素內部建立新的座標系統,不過可以通過向文件新增另乙個 元素來直接建立新的座標系統。考慮下面的示例:具有相同 x 和 y 屬性的同一元素在不同的位置顯示,這是因為第二個元素實際上屬於另乙個座標系統,它從第乙個元素偏移 100 個畫素:

<?xml version="1.0"?>

coordinates

執行變換改變了元素所在的座標系統,改變了它的外觀。變換可以用來以數種方式改變元素的外觀:

translate(x,y):該變換按指定數量偏移元素。

scale(x, y):該變換更改元素的大小。可以分別控制 x 和 y 方向上縮放量,但如果只指定乙個值,那麼它將用於兩個方向。

rotate(n):該變換按指定的角度旋轉元素。

skewx(n)/ skewy(n) :這兩種變換根據適當的軸按指定的畫素數量偏斜元素。

也可以使用矩陣指定變換,不過這超出了本教程的範圍。

變換是累積的,並且既可以指定為單個變換屬性的一部分也可以指定為巢狀元素的一部分,如下所示:

<?xml version="1.0"?>

coordinates

transform!

在這個示例中要注意的可能最重要的事就是正在變換的是實際座標系統。物件本身實際上沒有變換,但它所在的座標系統中的更改使它看起來發生變化。考慮上面 的「transform!」文字。現在正在沿 y 方向將它平移負 250 個畫素,因此顯而易見文字應該消失,它會在觀察口頂部以上顯示。然而在平移發生前,座標系統進行了 90 度旋轉,所以負的 y 值實際上使文字向右移動了 250 個畫素。

沒有任何更改時,初始觀察口指定乙個大小,其左上方座標為 0,0,右下方座標為介於該大小值與 0,0 之間的畫素數目。但有時候期望的效果是按可用的大小(不管大小是多少)而不是按影象進行縮放。那就要用到 viewbox 屬性了。

viewbox 屬性重新對映觀察口,它指定將在觀察口左上角和右下角出現的新值。請記住:當在 web 頁面上放置 svg 圖形時, 標記的尺寸決定觀察口的大小。

例如,如果眼睛和眼鏡新增了 viewbox 屬性,如下所示:

<?xml version="1.0" standalone="no"?>

viewbox

. . .

頁面會在任何分配給該影象的框內顯示影象,進行適當的縮放。因此下面的 web 頁面:

preserveaspectratio 屬性確定如何實現縮放。none 值將使影象伸展以適應框,即使這樣會引起影象失真。xminymin值(如上所示)將影象的最小 x 和 y 值與框的最小 x 和 y 值對齊。其它可能的值有 xminymid、xminymax、xmidymin、xmidymid(預設值)、xmidymax、xmaxymin、xmaxymid 和 xmaxymax。

2 座標系統和顏色變換

gdi 定義了三種形式的座標系統 世界座標系統 頁面座標系統和裝置座標系統 測量相當於文件區域左上角的位置和測量相當於螢幕 桌面 左上角的位置之間的區別非常重要,gdi 為它們指定了不同的名稱 gdi 在裝置繪圖表面 如螢幕 印表機 繪製圖形之前,圖形的座標系統要經過幾步變換 現在改變到頁面座標系統...

openGL系列 1 座標變換

理解物體座標系 世界座標系 相機座標系 裁剪座標系不難,關鍵是要知道對這些座標系的操作分別對應哪些函式。1 gltranslatef glscalef glrotatef 在模型 視角座標系內進行平移 縮放 旋轉 2 glulookat 對眼睛 相機 座標系進行變換 3 通用型 glmatrixmo...

WP7 座標變換

在應用開發的過程中,有時需要使用到座標變換 平移,旋轉,縮放,三維變換等 wp7提供了一下幾種座標變換的方式 translatetransform 平移 rotatetransform 旋轉 scaletransform 縮放 skewtransform 傾斜 compositetransform ...