Canvas座標系轉換

2022-03-27 16:34:06 字數 1522 閱讀 1429

canvas中的座標是從左上角開始的,x軸沿著水平方向(按畫素)向右延伸,y軸沿垂直方向向下延伸。左上角座標為x=0,y=0的點稱作原點。在預設座標系中,每乙個點的座標都是直接對映到乙個css畫素上。

但是如果影象的每次繪製都參考乙個固定點將缺少靈活性,於是在canvas中引入「當前座標系」的概念,所謂「當前座標系」即指影象在此時繪製的時候所參考的座標系,它也會作為影象狀態的一部分。比如rotate旋轉操作,改變當前座標系也就是改變了rotate的參考點,試想下如果沒有當前座標系的概念,無論是旋轉,縮放,傾斜等操作不就只能參考畫布左上角原點了嗎。

預設座標系如下圖所示:

1. 如果呼叫context.translate(100,50),當前座標系與預設座標系相對位置如下圖

2. 如果呼叫context.scale(2,2),當前座標系與原預設座標系的刻度如下,紅色代表當前座標系

3. 如果呼叫context.rotate(math.pi/6)順時針旋轉30度,當前座標系與預設座標系相對位置如下圖

矩陣變換transform

上文提到的座標變形的三種方式,平移translate,縮放scale以及旋轉rotate都可以通過transform做到。

現在我們先來看看矩陣變換的定義:context.transform(m11,m12,m21,m22,dx,dy),該方法使用乙個新的變化矩陣與當前變換矩陣進行乘法運算。

m11 m21 dx m12 m22 dy 0 0 1

也就是說假設a(x,y)要變換成b(x』,y』)可以通過乘以上述矩陣即可得到。

1 平移context.translate(dx,dy)

x』=x+dx

y』=y+dy

可以使用context.transform (1,0,0,1,dx,dy)代替context.translate(dx,dy)。

也可以使用context.transform(0,1,1,0.dx,dy)代替。

2 縮放context.scale(sx,sy)

x』=sx*x

y』=sy*y

(其中,sx和sy分別表示在x軸和y軸上的縮放倍數)

可以使用context.transform(sx,0,0,sy,0,0)代替context.scale(sx,sy);

也可以使用context.transform (0,sy,sx,0, 0,0)代替;

3 旋轉context.rotate(θ)

x』=x*cosθ-y*sinθ

y』=x*sinθ+y*cosθ

可以用context.transform(math.cos(θ*math.pi/180),math.sin(θ*math.pi/180),-math.sin(θ*math.pi/180),math.cos(θ*math.pi/180),0,0)替代context.rotate(θ)。

也可以使用context.transform(-math.sin(θ*math.pi/180),math.cos(θ*math.pi/180),math.cos(θ*math.pi/180),math.sin(θ*math.pi/180), 0,0)替代。

座標系轉換

根據halcon的演算法,設座標系1 影象 的點 px,py 座標系2 世界 的點為 qx,qy 則 qx px qy hommat2d py 1 1 其中 hommat2d為乙個3乘3的矩陣,且第三行為 0,0,1 1 0 tx cos phi sin phi 0 1 sin theta 0 sx...

座標系轉換

根據此圖 1.已知p在xy座標系下的座標,x0,y0,的值,可以算出p在x0y0座標系下的值 2.已知p在xy和x0y0下的座標,根據多組值便可算出兩個座標系之間的轉換關係 uf原點座標及旋轉 double x0 281.321 double y0 440.215 double rz 1.583 大...

座標系轉換

問題 假設世界座標系 o wx wy wz w 下有點p x w y w z w 已知區域性座標系 o lx ly lz l 三個座標軸向量 vec i w vec j w vec k w 求區域性座標系到世界座標系的轉換矩陣 r t 答 t vec i w vec j w vec k w vec ...