【JS圖形學(xué)基礎(chǔ)】二維圖形學(xué)的變換

mozillazg 發(fā)布于2019-08-22 15:56 / 2724人閱讀

摘要：計(jì)算機(jī)圖形學(xué)中的應(yīng)用非常廣泛的變換是一種稱(chēng)為仿射變換的特殊變換，在仿射變換中的基本變換包括平移旋轉(zhuǎn)縮放剪切這幾種。表示縮小，表示放大錯(cuò)切圖像錯(cuò)切變換在圖像幾何形變方面非常有用，常見(jiàn)的錯(cuò)切變換分為方向與方向的錯(cuò)切變換。

二維圖形學(xué)的變換

使用過(guò)前端的css3，canva,svg的小伙伴應(yīng)該對(duì)平移，旋轉(zhuǎn)，縮放，剪切這些效果變換應(yīng)該很熟悉了，但應(yīng)該大部分小伙伴應(yīng)該不清楚其中的原理，在二維圖形方面如果能熟練使用圖形學(xué)的基礎(chǔ)算法，結(jié)合canva,svg會(huì)有意想不到的驚喜。

計(jì)算機(jī)圖形學(xué)中的應(yīng)用非常廣泛的變換是一種稱(chēng)為仿射變換的特殊變換，在仿射變換中的基本變換包括平移、旋轉(zhuǎn)、縮放、剪切這幾種。

平移

設(shè)某點(diǎn)向x方向移動(dòng)dx,y方向移動(dòng)dy ,[x,y]為變換前坐標(biāo),[X,Y]為變換后坐標(biāo)。
則

 X = x+dx;  Y = y+dy;

以矩陣表示：

旋轉(zhuǎn)

首先要明確旋轉(zhuǎn)在二維中是繞著某一個(gè)點(diǎn)進(jìn)行旋轉(zhuǎn)，三維中是繞著某一個(gè)軸進(jìn)行旋轉(zhuǎn)。二維旋轉(zhuǎn)中最簡(jiǎn)單的場(chǎng)景是繞著坐標(biāo)原點(diǎn)進(jìn)行的旋轉(zhuǎn)，如下圖所示：

如圖所示點(diǎn)v 繞原點(diǎn)旋轉(zhuǎn)θ角，得到點(diǎn)v’，假設(shè) v點(diǎn)的坐標(biāo)是(x, y) ，那么可以推導(dǎo)得到 v’點(diǎn)的坐標(biāo)（x’, y’)，設(shè)原點(diǎn)到v的距離是r，原點(diǎn)到v點(diǎn)的向量與x軸的夾角是?

x=rcos?y=rsin?
 
x′=rcos(θ+?)y′=rsin(θ+?)

通過(guò)三角函數(shù)展開(kāi)得到

x′=rcosθcos??rsinθsin?
 
y′=rsinθcos?+rcosθsin?

帶入x和y表達(dá)式得到

x′=xcosθ?ysinθ
 
y′=xsinθ+ycosθ

寫(xiě)成矩陣的形式是：

盡管圖示中僅僅表示的是旋轉(zhuǎn)一個(gè)銳角θ的情形，但是我們推導(dǎo)中使用的是三角函數(shù)的基本定義來(lái)計(jì)算坐標(biāo)的，因此當(dāng)旋轉(zhuǎn)的角度是任意角度（例如大于180度，導(dǎo)致v’點(diǎn)進(jìn)入到第四象限）結(jié)論仍然是成立的。

繞任意點(diǎn)的二維旋轉(zhuǎn)

縮放 簡(jiǎn)單縮放

簡(jiǎn)單縮放可以直接通過(guò)將縮放系數(shù)sx,sy與對(duì)應(yīng)x,y坐標(biāo)相乘：

x’=x*sx,y’=y*sy

基于一個(gè)固定點(diǎn)縮放

x’ = x * sx + sy(1-sx)
y’ = y * sy + yf(1-sy)

其中sx,sy屬于縮放系數(shù)。0~1表示縮小，>1表示放大

錯(cuò)切

圖像錯(cuò)切變換在圖像幾何形變方面非常有用，常見(jiàn)的錯(cuò)切變換分為X方向與Y方向的錯(cuò)切變換。對(duì)應(yīng)的數(shù)學(xué)矩陣分別如下：

根據(jù)上述矩陣假設(shè)P(x1, y1)為錯(cuò)切變換之前的像素點(diǎn)，則錯(cuò)切變換以后對(duì)應(yīng)的像素

P’(x2, y2)當(dāng)X方向錯(cuò)切變換時(shí)：

x2 = x1 - y1 * tanθ
y2 = y1

當(dāng)Y方向錯(cuò)切變換時(shí)：

x2 = x1
y2 = y1 - x1 * tanθ

實(shí)例 svg canvas

只貼上旋轉(zhuǎn)的demo,其他都可以仿照套用

旋轉(zhuǎn)

橘色的點(diǎn)圍繞藍(lán)色旋轉(zhuǎn)

var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    context.fillStyle = "#3399ff";
    context.arc(100, 75, 5, 0, 2 * Math.PI);
    context.fill();

    //點(diǎn)a圍繞(100，75) 順時(shí)針90度旋轉(zhuǎn)
    var a = { x: 150, y: 75 }
    //套用上文公式
    //- 0.5 * Math.PI 因?yàn)閏anvas的0
    var x = 100 + (a.x - 100) * Math.cos(Math.PI / 2) - (a.y - 75) * Math.sin(Math.PI / 2);
    //y為簡(jiǎn)化后
    var y = 75 + (a.x - 100) * Math.sin(Math.PI / 2);
    context.beginPath();
    context.fillStyle = "#fe9901";
    context.arc(x, y, 5, 0, 2 * Math.PI);
    context.fill();

    //圍繞100，75 60度旋轉(zhuǎn)
    var x = 100 + 50 * Math.cos(Math.PI / 3);
    var y = 75 + 50 * Math.sin(Math.PI / 3);
    context.beginPath();
    context.fillStyle = "#fe9901";
    context.arc(x, y, 5, 0, 2 * Math.PI);
    context.fill();