視窗坐標(biāo)系與用戶坐標(biāo)系及變換概述

1、視窗坐標(biāo)系與用戶坐標(biāo)系及變換概述坐標(biāo)系統(tǒng)svg存在兩套坐標(biāo)系統(tǒng)：視窗坐標(biāo)系與用戶坐標(biāo)系。默認(rèn)狀況下，用戶坐標(biāo)系與視窗坐標(biāo)系的點是一一對應(yīng)的，都為原點在視窗的左上角，x軸水平向右，y軸豎直向下；如下圖所示： svg的視窗位置普通是由css指定，尺寸由svg元素的屬性width和height設(shè)置，但是假如svg是存儲在embedded對象中(例如object元素，或者其他svg元素)，而且包含svg的文檔是用css或者xsl格式化的，并且這些外圍對象的css或者其他指定尺寸的值已經(jīng)可以計算出視窗的尺寸了，則此時會用法外圍對象的尺寸。 這里需要區(qū)別視窗，視窗坐標(biāo)系，用戶坐標(biāo)系的概念： 視窗：指的是網(wǎng)

2、頁上面可視的矩形局域，長度和寬度都是有限的，這個區(qū)域普通與外圍對象的尺寸有關(guān)。 視窗坐標(biāo)系：本質(zhì)是一個坐標(biāo)系，有原點，x軸與y軸；而且在兩個方向上是無限延長的。默認(rèn)狀況下，原點在視窗的左上角，x軸水平向右，y軸豎直向下。可以對這個坐標(biāo)系的點舉行變換。 用戶坐標(biāo)系：本質(zhì)是一個坐標(biāo)系，有原點，x軸與y軸；而且在兩個方向上是無限延長的。默認(rèn)狀況下，原點在視窗的左上角，x軸水平向右，y軸豎直向下?？梢詫@個坐標(biāo)系的點舉行變換。 默認(rèn)狀況下，視窗坐標(biāo)系與用戶坐標(biāo)系是重合的，但是這里需要注重，視窗坐標(biāo)系屬于的是創(chuàng)建視窗的元素，視窗坐標(biāo)系確定好以后，囫圇視窗的坐標(biāo)基調(diào)就確定了。但是用戶坐標(biāo)系是屬于每個圖形元

3、素的，只要圖形舉行了坐標(biāo)變換，就會創(chuàng)建新的用戶坐標(biāo)系，這個元素中全部的坐標(biāo)和尺寸都用法這個新的用戶坐標(biāo)系。 容易點說：視窗坐標(biāo)系描述了視窗中全部元素的初始坐標(biāo)概況，用戶坐標(biāo)系描述了每個元素的坐標(biāo)概況，默認(rèn)狀況下，全部元素都用法默認(rèn)的與視窗坐標(biāo)系重合的那個用戶坐標(biāo)系。 坐標(biāo)空間變換讓我們回顧一下canvas用戶坐標(biāo)的變換，它們是通過平移，縮放，旋轉(zhuǎn)函數(shù)實現(xiàn)的；每次變換后對以后繪制的圖形都起作用，除非再次舉行變換，這是"當(dāng)前"用戶坐標(biāo)系統(tǒng)的概念。canvas惟獨唯一一個用戶坐標(biāo)系。在svg中，狀況徹低不同。svg本身作為一種向量圖元素，它的兩個坐標(biāo)系統(tǒng)本質(zhì)上都可

4、以算作"用戶坐標(biāo)系統(tǒng)"；svg的兩個坐標(biāo)空間都是可以變換的：視窗空間變換和用戶空間變換。視窗空間變換由相關(guān)元素(這些元素創(chuàng)建了新的視窗)的屬性viewbox控制；用戶空間變換由圖形元素的transform屬性控制。視窗空間變換應(yīng)用于對應(yīng)的囫圇視窗，用戶空間變換應(yīng)用于當(dāng)前元素及其子元素。 視窗變換 - viewbox屬性 全部的能建立一個視窗的元素(看下一節(jié))，再加上marker,pattern,view元素，都有一個viewbox屬性。 viewbox屬性值的格式為(x0,y0,u_width,u_height)，每個值之間用逗號或者空格隔開，它們共同確定了

5、視窗顯示的區(qū)域：視窗左上角坐標(biāo)設(shè)為(x0,y0)、視窗的寬設(shè)為u_width，高為u_height；這個變換對囫圇視窗都起作用。 這里一定不要混淆：視窗的大小和位置已經(jīng)由創(chuàng)建視窗的元素和外圍的元素共同確定了(例如最外層的svg元素建立的視窗由css，width和height確定)，這里的viewbox其實是設(shè)置這個確定的區(qū)域能顯示視窗坐標(biāo)系的哪個部分。viewbox的設(shè)置其實是包含了視窗空間的縮放和平移兩種變換。 變換的計算也很容易：以最外層的svg元素的視窗為例，假設(shè)svg的寬與長設(shè)置為width,height，viewbox的設(shè)置為(x0,y0,u_width,u_height)。則繪制的

6、圖形，寬和高的縮放比例分離為：width/u_width, height/u_height。視窗的左上角的坐標(biāo)設(shè)置為了(x0,y0)。 體味下面幾種代碼繪出的結(jié)果的不同： 復(fù)制代碼 代碼如下: 上面的例子繪制的圖中你可以看到綠色和紅色的矩形，這種狀況下視窗坐標(biāo)系的點還是與視窗上的點是一一對應(yīng)的，這個也是默認(rèn)狀況。 復(fù)制代碼 代碼如下: 上面的例子繪制的圖中這個你只能看到綠色的矩形，而且綠色的矩形顯示在屏幕上是200*200像素的，這個時候坐標(biāo)點已經(jīng)不是一一對應(yīng)了，圖被放大了。 復(fù)制代碼 代碼如下: 上面的例子繪制的圖中，視窗坐標(biāo)系的單位被縮小，所以兩個矩形都縮小了。在日常工作中，我們常常需要完

7、成的一個任務(wù)就是縮放一組圖形，讓它適應(yīng)它的父容器。我們可以通過設(shè)置viewbox屬性達(dá)到這個目的。 能建立新視窗的元素任何時候，我們都可以嵌套視窗。創(chuàng)建新的視窗的時候，也會創(chuàng)建新的視窗坐標(biāo)系和用戶坐標(biāo)系，固然也包括裁減路徑也會創(chuàng)建新的。下列是能建立新視窗的元素列表：svg：svg支持嵌套。symbol：當(dāng)被use元素實例化的時候創(chuàng)建新的視窗。 image：引用svg元素時會創(chuàng)建新視窗。foreignobject：創(chuàng)建新視窗去渲染里面的對象。 保持縮放的比例 - preserveaspectratio屬性有些時候，特殊是當(dāng)用法viewbox的時候，我們期望圖形占領(lǐng)囫圇視窗，而不是兩個方向上按相同

8、的比例縮放。而有些時候，我們卻是希翼圖形兩個方向是根據(jù)固定的比例縮放的。用法屬性preserveaspectratio就可以達(dá)到控制這個的目的。這個屬性是全部能建立一個新視窗的元素，再加上image,marker,pattern,view元素都有的。而且preserveaspectratio屬性惟獨在該元素設(shè)置了viewbox以后才會起作用。假如沒有設(shè)置viewbox，則preserveaspectratio屬性會被忽視。屬性的語法如下：preserveaspectratio="defer "注重3個參數(shù)之間需要用法空格隔開。defer:可選參數(shù)，只對ima

9、ge元素有效，假如image元素中preserveaspectratio屬性的值以"defer"開始，則意味著image元素用法引用的縮放比例，假如被引用的沒有縮放比例，則忽視"defer"。全部其他的元素都忽視這個字符串。align:該參數(shù)打算了統(tǒng)一縮放的對齊方式，可以取下列值： none - 不強制統(tǒng)一縮放，這樣圖形能完整填充囫圇viewport。 xminymin - 強制統(tǒng)一縮放，并且把viewbox中設(shè)置的和對齊到viewport的最小x值和y值處。 xmidymin - 強制統(tǒng)一縮放，并且把vivewbox中x

10、方向上的中點對齊到viewport的x方向中點處，簡言之就是x方向中點對齊，y方向與上面相同。 xmaxymin - 強制統(tǒng)一縮放，并且把viewbox中設(shè)置的 + 對齊到viewport的x值最大處。 類似的還有其他類型的值：xminymid,xmidymid,xmaxymid,xminymax,xmidymax,xmaxymax。這些組合的含義與上面的幾種狀況類似。 meetorslice：可選參數(shù)，可以去下列值： meet - 默認(rèn)值，統(tǒng)一縮放圖形，讓圖形所有顯示在viewport中。 slice - 統(tǒng)一縮放圖形，讓圖形彌漫viewport，超出的部分被剪裁掉。 用戶坐標(biāo)系的變換 -

11、transform屬性該類型變換是通過設(shè)置元素的transform屬性來指定的。這里需要注重，transform屬性設(shè)置的元素的變換，只影響該元素及其子元素，與別的元素?zé)o關(guān)，不影響別的元素。 平移 - translate平移變換把相關(guān)的坐標(biāo)值平移到指定的位置，該變換需要傳入兩個軸上平移的量?？蠢樱?復(fù)制代碼 代碼如下: 這個例子繪制一個矩形，并把它的起點(0,0)平移到(30,40)處。雖然可以挺直設(shè)置(x,y)的坐標(biāo)值，但是用法平移變換去實現(xiàn)也很便利。這個變換其次個參數(shù)可以省略，默認(rèn)當(dāng)0處理。旋轉(zhuǎn) - rotate旋轉(zhuǎn)一個元素也是一個很頻繁的任務(wù)，我們可以用法rotate變換實現(xiàn)，該變換需

12、要傳入旋轉(zhuǎn)的角度參數(shù)?？蠢樱?復(fù)制代碼 代碼如下: 這個例子會顯示一個旋轉(zhuǎn)45度的矩形。有幾點注重：1.這里的變換是以角度值為參數(shù)的。2.旋轉(zhuǎn)指的是相對于x軸的旋轉(zhuǎn)。3.旋轉(zhuǎn)是圍繞用戶坐標(biāo)系的原點(0,0)綻開的。傾斜 - skewtransform還支持傾斜變換，可以是沿著x軸的(左右傾斜，正角度為向右傾斜，其實是傾斜了y軸)，或者是沿著y軸的(上下傾斜，正角度為向下傾斜，其實是傾斜了x軸)傾斜；該變換需要傳入一個角度參數(shù)，這個角度參數(shù)會打算傾斜的角度?？聪旅娴睦樱?復(fù)制代碼 代碼如下: 從結(jié)果中，你可以挺直看到同樣尺寸的矩形，在不同的傾斜變換后，得到的位置和外形。這里注重矩形的起始位置

13、都已經(jīng)轉(zhuǎn)變了，這是由于在新的坐標(biāo)系統(tǒng)中，(30,30)已經(jīng)在不同的位置了?？s放 - scale縮放對象由縮放變換完成，該變換接受2個參數(shù)，分離指定在水平和豎直上的縮放比例，假如其次個參數(shù)省略則與第一個參數(shù)取相同的值?？聪旅娴睦樱?復(fù)制代碼 代碼如下: abc (scale)abc (scale) 變換矩陣 - matrix學(xué)過圖形學(xué)的都知道，全部的變換其實都是由矩陣表征的，所以上面的變換其實都可以用一個3*3矩陣去表示： 復(fù)制代碼 代碼如下: a c eb d f0 0 1 因為惟獨6個值用到了，所以也簡寫成a b c d e f。把matrix(a,b,c,d,e,f)賦給transfro

14、m就可以實施相應(yīng)的變換。變換會把坐標(biāo)和長度都轉(zhuǎn)換成新的尺寸。上面各種變換對應(yīng)的矩陣如下：平移變換1 0 1 0 tx ty： 復(fù)制代碼 代碼如下: 1 0 tx0 1 ty0 0 1 縮放變換sx 0 0 sy 0 0： 復(fù)制代碼 代碼如下: sx 0 00 sy 00 0 1 旋改變換cos(a) sin(a) -sin(a) cos(a) 0 0： 復(fù)制代碼 代碼如下: cos(a) -sin(a) 0sin(a) cos(a) 000 1 沿x軸的傾斜1 0 tan(a) 1 0 0： 復(fù)制代碼 代碼如下: 1 tan(a) 00 1 00 0 1 沿y軸的傾斜1 tan(a) 0 1

15、0 0： 復(fù)制代碼 代碼如下: 11 0tan(a) 1 000 1 變換本質(zhì)前面我們總結(jié)canvas的時候，我們知道各種變換都是作用在用戶坐標(biāo)系上的。在svg中，全部的變換也都是針對兩個坐標(biāo)系(本質(zhì)上都是"用戶坐標(biāo)系")的。當(dāng)給容器對象或圖形對象指定"transform"屬性，或者給"svg,symbol,marker,pattern,view"指定"viewbox"屬性以后，svg會按照當(dāng)前的用戶坐標(biāo)系統(tǒng)舉行變換，去創(chuàng)建新的用戶坐標(biāo)系，并作用于當(dāng)前

16、的對象以及它的子對象。該對象中指定的坐標(biāo)和長度的單位不再是1:1的對應(yīng)到外圍的坐標(biāo)系，而是隨著變形，轉(zhuǎn)換到新的用戶坐標(biāo)系中；這個新的用戶坐標(biāo)系是只作用于當(dāng)前的元素及其子元素。變換鏈transform屬性支持設(shè)置多個變換，這些變換只要中間用空格分開，然后一起放到屬性中就可以了。執(zhí)行效果跟按挨次自立執(zhí)行這些變換是一樣的。 復(fù)制代碼 代碼如下: 上面的效果與下面的一樣： 復(fù)制代碼 代碼如下: 單位最后說一下單位，任何坐標(biāo)和長度都可以帶和不帶單位。不帶單位的狀況不帶單位的值被認(rèn)為帶的是"用戶單位"，就是當(dāng)前用戶坐標(biāo)系的單位值。帶單位的狀況 svg中相關(guān)單位與css中是一樣的：em,ex,px,pt,pc,cm,mm和in。長度還可以用法"%"。相對度量單位：em和ex也與css中一樣，是相對于當(dāng)前字體的font-size和x-height來說的?？隙ǘ攘繂挝唬阂粋€px是等于一個"用戶單位"的，也就是"5px"與"5"是一樣的。但是