HTML5 MatrixTransform矩陣變換

2021-06-08 03:54:39 字數 1173 閱讀 3029

1,縮放操作

觀察下面的矩陣乘法

如果我們用[2  5]代表點(2,5),我們發現其乘以乙個矩陣後變成了[4,5],與之對應的點是(4,5),這相當與其x座標變成了原來的兩倍。

同理:經過矩陣乘法後點(2,5)的y座標變成了原來的兩倍(2,10)。

我們可以總結出這樣的結論:

可以將矩陣的第二和第三個元素設定為0並用矩陣中m11和m22來進行縮放操作,其中m11是對x座標進行縮放,m22是對y座標進行縮放

2,旋轉操作

觀察下面的矩陣乘法:

向量(-5,2)相當於是向量(2,5)按照順時針方向旋轉了90度。

但這裡並沒有總結出向縮放一樣的簡單結論,但我們可以知道,我們可以使用如下的2x2矩陣:

來對點進行線性變換(旋轉,縮放。注意:平移變換不是線性變換),即將點對應的矩陣乘以該線性變換矩陣便可。

3,平移操作

在矩陣加法中:

我們可以發現點(3,5)實際是在點(2,5)的基礎上想x方向平移1乙個單位。

同理,點(2,6)實際是在點(2,5)的基礎上想y方向平移1乙個單位。

我們可以得到如下結論:

我們可以使用點對應的矩陣加上如下的矩陣

來實現平移操作,其中offsetx實現了x軸方向上的平移,offsety實現了y方向上的平移。

4,幾種操作的融合

如果僅僅是簡單的單一操作(僅旋轉或僅平移等)我們就沒有必要在這裡進行討論了。現在我們需要將幾種幾何變換揉合在一起,比如平移物件的同時旋轉物件等,我們可以將矩陣乘法與加法揉合在一起進行混合運算。比如向量(2,3)先進行縮放和旋轉後再分別在x與y軸方向上平移了5個與6個單位

上面的這種變換稱為仿射變換(affine transformation)

注意:這種幾何變換在操作的先後順序上是需要注意的,不同的操作次序可以帶來不同的結果,比如上面的例子,如果我們先進行平移操作後進行縮放與旋轉將得到如下結果:

其實我們更希望將仿射變換中的幾個矩陣儲存到乙個矩陣中來,一種較好的方式是將變換用到的2x2矩陣變成3x3矩陣,這也就是為什麼我們wpf中的變換矩陣是3x3的。

在如下矩陣中:

其中m11,m12,m21,m22就來自於線性變換矩陣,用於指示旋轉縮放等線性變換;x, y來自與平移矩陣,用於指示平移變換。

由於最右邊一列始終是001,所以wpf中的matrixtransform類的建構函式僅僅需要指定6個引數。

html5介紹,什麼是html5,html5新特性

html5 將成為 html xhtml 以及 html dom 的新標準。html 的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。html5 是 w3c 與 whatwg 合作的結果。編...

HTML5學習之 HTML 5 拖放

拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性,即抓取物件以後拖到另乙個位置。在 html5 中,拖放是標準的一部分,任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...

html5 html5 本地儲存

最近一直在學習 html5,為了後期的移動專案進行知識儲備。html5 相對於 html4 新增加了一些有趣的標籤 屬性和方法,今天主要介紹下 html5 的本地儲存。html5 提供了兩種在客戶端儲存資料的新方法 兩個方法用法完全一樣,下面就以 localstorage 為例。早期我們都是使用 c...