資訊專欄INFORMATION COLUMN
摘要：計算機(jī)圖形學(xué)中的應(yīng)用非常廣泛的變換是一種稱為仿射變換的特殊變換，在仿射變換中的基本變換包括平移旋轉(zhuǎn)縮放剪切這幾種。表示縮小，表示放大錯切圖像錯切變換在圖像幾何形變方面非常有用，常見的錯切變換分為方向與方向的錯切變換。
二維圖形學(xué)的變換
使用過前端的css3，canva,svg的小伙伴應(yīng)該對平移，旋轉(zhuǎn)，縮放，剪切這些效果變換應(yīng)該很熟悉了，但應(yīng)該大部分小伙伴應(yīng)該不清楚其中的原理，在二維圖形方面如果能熟練使用圖形學(xué)的基礎(chǔ)算法，結(jié)合canva,svg會有意想不到的驚喜。
計算機(jī)圖形學(xué)中的應(yīng)用非常廣泛的變換是一種稱為仿射變換的特殊變換，在仿射變換中的基本變換包括平移、旋轉(zhuǎn)、縮放、剪切這幾種。
平移設(shè)某點(diǎn)向x方向移動dx,y方向移動dy ,[x,y]為變換前坐標(biāo),[X,Y]為變換后坐標(biāo)。
則
X = x+dx; Y = y+dy;
以矩陣表示：
首先要明確旋轉(zhuǎn)在二維中是繞著某一個點(diǎn)進(jìn)行旋轉(zhuǎn)，三維中是繞著某一個軸進(jìn)行旋轉(zhuǎn)。二維旋轉(zhuǎn)中最簡單的場景是繞著坐標(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(θ+?)
通過三角函數(shù)展開得到
x′=rcosθcos??rsinθsin? y′=rsinθcos?+rcosθsin?
帶入x和y表達(dá)式得到
x′=xcosθ?ysinθ y′=xsinθ+ycosθ
寫成矩陣的形式是：
盡管圖示中僅僅表示的是旋轉(zhuǎn)一個銳角θ的情形，但是我們推導(dǎo)中使用的是三角函數(shù)的基本定義來計算坐標(biāo)的，因此當(dāng)旋轉(zhuǎn)的角度是任意角度（例如大于180度，導(dǎo)致v’點(diǎn)進(jìn)入到第四象限）結(jié)論仍然是成立的。
繞任意點(diǎn)的二維旋轉(zhuǎn) 縮放 簡單縮放簡單縮放可以直接通過將縮放系數(shù)sx,sy與對應(yīng)x,y坐標(biāo)相乘：
x’=x*sx,y’=y*sy基于一個固定點(diǎn)縮放
x’ = x * sx + sy(1-sx) y’ = y * sy + yf(1-sy)
其中sx,sy屬于縮放系數(shù)。0~1表示縮小，>1表示放大
錯切圖像錯切變換在圖像幾何形變方面非常有用，常見的錯切變換分為X方向與Y方向的錯切變換。對應(yīng)的數(shù)學(xué)矩陣分別如下：
根據(jù)上述矩陣假設(shè)P(x1, y1)為錯切變換之前的像素點(diǎn)，則錯切變換以后對應(yīng)的像素
P’(x2, y2)當(dāng)X方向錯切變換時：
x2 = x1 - y1 * tanθ y2 = y1
當(dāng)Y方向錯切變換時：
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) 順時針90度旋轉(zhuǎn)
var a = { x: 150, y: 75 }
//套用上文公式
//- 0.5 * Math.PI 因為canvas的0
var x = 100 + (a.x - 100) * Math.cos(Math.PI / 2) - (a.y - 75) * Math.sin(Math.PI / 2);
//y為簡化后
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();
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/93880.html
摘要：本文會介紹位圖處理，矢量圖和圖像處理，重點(diǎn)是，并且最后會附上一個小應(yīng)用。以上列舉部分，更多備胎在此矢量圖處理講完位圖再說矢量圖。矢量圖在繪制圖標(biāo)商業(yè)動畫元素上應(yīng)用非常廣范。 計算機(jī)圖像處理是一門很成熟的技術(shù)，任何一門可操作系統(tǒng)接口的語言都能很輕易的實(shí)現(xiàn)各種處理操作。但是前端限于瀏覽器環(huán)境和接口限制，處理起來會有諸多不便，這里所說的前端圖像處理，是真的指不借助任何后端服務(wù)純前端實(shí)現(xiàn)的圖像...
摘要：本文會介紹位圖處理，矢量圖和圖像處理，重點(diǎn)是，并且最后會附上一個小應(yīng)用。以上列舉部分，更多備胎在此矢量圖處理講完位圖再說矢量圖。矢量圖在繪制圖標(biāo)商業(yè)動畫元素上應(yīng)用非常廣范。 計算機(jī)圖像處理是一門很成熟的技術(shù)，任何一門可操作系統(tǒng)接口的語言都能很輕易的實(shí)現(xiàn)各種處理操作。但是前端限于瀏覽器環(huán)境和接口限制，處理起來會有諸多不便，這里所說的前端圖像處理，是真的指不借助任何后端服務(wù)純前端實(shí)現(xiàn)的圖像...
摘要：如你所見，這系列文章都是我自己的碎碎叨，當(dāng)然啦，目的是為了能更好的梳理自己學(xué)習(xí)的知識，加強(qiáng)印象，順便再來做個總結(jié)，這樣能更加扎實(shí)的學(xué)習(xí)。 一直就很想學(xué)習(xí)WebGL相關(guān)的知識，現(xiàn)在也找到了工作，生活也差不多趨向穩(wěn)定了，加上學(xué)校也沒那么多課程了，所以我肯定要利用起來這個時間啊！因為腿摔傷了，國慶估計是在家躺7天，所以更加要抓住這么好的學(xué)習(xí)時機(jī)了。如你所見，這系列文章都是我自己的碎碎叨，當(dāng)然...
摘要：微積分微積分的課程我們也同樣是推薦和的課程。還有一個斯坦福大學(xué)的統(tǒng)計學(xué)習(xí)入門英文字幕相當(dāng)不錯。所以，除了繪制數(shù)學(xué)圖形外，學(xué)習(xí)數(shù)學(xué)就應(yīng)該完全與編程有機(jī)結(jié)合。 無論是三大數(shù)學(xué)軟件Matlab（通信、控制等工程例外）、Maple、Mathematica，還是三大統(tǒng)計軟件Spass、Stata、SAS，這些可視化的軟件本身就是編程的一個體現(xiàn)，它們在一定程度上降低了我們使用數(shù)學(xué)的門檻，但另一方面...
閱讀 1548·2021-11-24 09:39
閱讀 3758·2021-11-24 09:39
閱讀 1942·2021-11-16 11:54
閱讀 1542·2021-09-30 09:47
閱讀 1820·2021-09-26 10:16
閱讀 2399·2021-09-22 15:33
閱讀 1531·2021-09-14 18:01
閱讀 2532·2021-09-07 09:59
