html transform和svg transform
一些基本的變換型別是一樣的,包括:位移translate, 旋轉rotate, 縮放scale, 斜切skew以及直接矩陣matrix。
但只侷限於2d層面的變換,svg似乎只支援二維變換,類似translatex, rotatex也都是不支援的,最重要的是中心點的預設值不同。
svg transform translate位移
html元素的偏移是相對自己的中心點(下圖左),svg元素的偏移是相對於左上角(下圖右)。
雖然兩者的相對位置不一樣,但是,對於單純地位移來講,無論你相對於那個點位置,實際偏移的位置都是一樣的,因此,從表現上講,兩者最終的位置看上去還是一樣的。
svg元素也能使用css3的transform進行變換(非ie瀏覽器),但是只能支援2d層面的幾個屬性,例如translatex(tx).translatey(ty)以及translatez(tz).translate(tx[, ty])則並不支援。
而且,多個引數值的時候,可以使用逗號,或者直接空格分隔,但是不能包含單位,下面這種無單位寫法才可以:
transform="translate(30 12)"
transform="translate(30, 12)"
另外,和css3的transform一樣,svg中的translate位移也是支援多宣告累加的。例如:
transform="translate(30 12) translate(30 12)"
等同於:
transform="translate(60 24)"
需要注意的是,倆個translate中間不要混有其他的transform變換。否則,最終的位移就不是簡單的相加了。
svg transform rotate旋轉
html元素的旋轉是相對自己的中心點,svg元素預設是svg左上角為中心變換的
svg transform 旋轉的引數依然沒有單位。
transform="rotate(45)"
具體語法為:rotate(angle[,x y]),這裡有個可選引數[,x y],這個引數[,x y]是用來變換中心點的。
svg元素預設是基於左上角的,
x="30"
y="30"
width="120"
height="90"
rx="10"
ry="10"
fill="#a0b3d6"
transform="rotate(45, 90 75)">
rect>
同樣的,rotate旋轉可以多個值並存
transform: rotate(45deg) rotate(-45deg);
transform="rotate(45) rotate(-45)"
需要注意的是,svg屬性的transform宣告的中心變換座標是不能共享的。
svg transform scale縮放
css控制的transform和svg元素屬性控制的transform的座標系統是不一樣的。乙個預設元素中心(下圖左),乙個是svg畫布左上角(下圖右)
svg中的縮放的語法就比較單純了,就scale(sx[, sy]), sx表示橫座標縮放比例,sy表示縱座標縮放比例。
當我們要實現svg元素居中縮放的效果,還需要使用translate手動偏移。
即先translate其中心點位置到元素的中心座標位置,然後縮放,然後座標再反方向還原回去。
例如,某元素中心點座標是(95, 75), 垂直縮放1.5倍的效果則是:
transform="translate(95 75) scale(1, 1.5) translate(-95 -75)"
svg transform skew斜切奇葩的是,svg transform skew斜切不支援skew(x[, y])這種語法,而只能是skewx或者skewy
同樣的,由於變換中心點的差異,css實現的變換和svg屬性變換往往最後的位置是不一樣的:
不僅如此,如果元素的中心點不是就是svg的左上角,則skewx(α1) skewx(α2)的最終位置和skewx(α1 + α2)是不一樣的(位移和旋轉不會這樣子)。
參考自:
gdal座標變換(x,y變經緯度)
最近因為一些原因需要讀取地理資料,我使用的工具是gdal,在處理資料的時候遇到一些小的問題,自己折騰了會兒,現在分享出來,避免大家浪費時間。include gdal priv.h include ogrsf frmts.h include gdal.h include ogr srs api.h i...
SLAM用到的相機模型 矩陣表示以及座標變換矩陣
說白了,單目相機就是針孔相機,需要建立三個座標系,現在來對這個簡單的針孔模型進行幾何建模。設 o x y z 為相機座標系,習慣上我們讓 z 軸指向相機前方,x 向右,y 向下。o 為攝像機的光心,也是針孔模型中的針孔。現實世界的空間點 p,經過小孔 o 投影之後,落在物理成像平面 o x y 上,...
MFC 螢幕座標 視窗座標 邏輯座標 物理座標
int nwidth getsystemmetrics sm cxscreen 螢幕寬度 int nheight getsystemmetrics sm cyscreen 螢幕高度 int cx getsystemmetrics sm cxfullscreen int cy getsystemmet...