一種基于矩陣理論的多圖組合變換研究

侯海平

(安徽財貿職業學院 安徽合肥 230001)

一種基于矩陣理論的多圖組合變換研究

侯海平

(安徽財貿職業學院 安徽合肥 230001)

文章結合幾何變換中的矩陣理論，分析了圖形變換中平移、縮放、旋轉的理論基礎；研究了如何使用WPF中圖形變換的相關類以及輔助類解決圖形變換問題；重點分析了多圖組合的變換操作，提出相應的變換方案。

矩陣；圖形變換；多圖組合；WPF

在計算機動畫和計算機輔助設計領域中經常會對虛擬場景中的物體進行各種操作，目的在于更好地觀察物體本身，發現物體本身內部結構和原理。這些操作包括改變它的位置、改變它的大小、改變它的角度等[1]。準確地說這些操作也就是對圖形進行平移、旋轉、縮小或放大等變換[2]。

一、幾何變換在圖形設計中的應用

所謂幾何變換就是將圖形由一個幾何圖形變換到另一個圖形，所有的圖形都是由點線面構成，而這些點線面也可以相互轉換，通過轉換可以將面轉換成線，再將線轉換成點，最終每一個圖形也就由若干個點構成，這些點的集合就構成了圖形最基本的元素[2]。所以圖形的變換也就是具體點的變換，包括了平移、縮放、旋轉。

（一）平移。在二維坐標中有點(x,y),假設要對該點進行水平方向移動a個單位長度，垂直方向移動b個單位長度，則該點新的坐標為(x1,y1)，其中x1=x+a,y1=y+b,這就是一個平移模型[3]。

（二）縮放。縮放操作中，通常會指定一個縮放比例，假定水平方向縮放比例為Sx，垂直方向縮放比例為Sy。在二維維坐標中有點(x,y),現在要進行縮放操作，經過縮放后則該點新的坐標為(x1,y1)，其中x1=xSx,y1=ySy,這就是一個縮放模型[4]。

（三）旋轉。旋轉操作中，要設定2個前提，第一個為旋轉的圍繞點（通常為坐標原點），第二個為旋轉角度θ(按逆時針旋轉)。在二維坐標中有點(x,y),假設要對該點進行圍繞坐標原點旋轉 θ 度，則該點新的坐標為 (x1,y1)，其中x1=xcosθ-ysinθ,y1=xsinθ+ycosθ,這就是一個旋轉模型[5]。

二、幾何變換中的矩陣理論

無論是平移、縮放還是旋轉，這些變換都可以表示為矩陣計算的形式，通過矩陣的相乘構造出更復雜的變換[6]。所有的基本變換（平移、縮放和旋轉）又都可以表示為普通的矩陣形式：

P’=M1·P+M2

其中P’和P表示向量，矩陣M1是一個2×2的矩陣，M2表示平移項。為了能夠將二維幾何變換的乘法和平移項組合成單一矩陣，必須將二維坐標(x,y)擴充到三維來表示，也就是齊次坐標(x,y,h),h是一個齊次參數[1]。

這樣對于圖形中每一個點就可以擴充為一個單位三維坐標,用矩陣表示就是[x y 1]。一個圖形的點集就可以表示為

則設變換矩陣為T，就需要將其轉換成3×3的矩陣，即

圖形的變換可以表達為點集與變換矩陣的乘積，結果為變換后的圖形點集矩陣，表示為

（一）平移。將T矩陣中a設定為1，b設定為0，c設定為0，d設定為1。對于點(x,y)來說就是上式中第一行的計算結果為[x+ey+f1]一行三列的矩陣,前兩項就是平移后的坐標(x+e, y+f)。e表示x方向平移量，f表示y方向平移量。

（二）縮放。將T矩陣中b、c、e、f均設定為0。對于點(x,y)來說上式第一行的計算結果則為[axdy1]一行三列的矩陣,前兩項就是縮放后的坐標(ax,dy)。其中a表示x方向的縮放比例，d表示y方向的縮放比例。

（三）旋轉。將T矩陣中e、f均設定為0。由于需要設定2個前提，參考前文。對于點(x,y)按原點逆時針旋轉θ度，按上式進行計算，結果為[ax+cybx+dy1]一行三列的矩陣,前兩項就是平移后的坐標 (ax+cy,bx+dy)。那么a=cosθ,b=sinθ, c=-sinθ,d=cosθ。

三、WPF中的圖形變換策略

WPF是WindowsPresentationFoundation的縮寫，它是一個Windows的圖形顯示框架，使用WPF可以簡化開發人員的開發過程，提高開發效率，并且能夠比較方便的調用Windows較為底層的圖形接口，WPF很好地結合了DirectX圖形加速方案，使用WPF開發的軟件顯示效果絢麗且性能良好。

（一）圖形變換相關類。為了能夠方便對圖形進行操作處理，WPF提供了較多的圖形變換類。針對之前介紹的平移變換、縮放變換、旋轉變換分別提供了TranslateTransform類、ScaleTransform類、RotateTransform類，這些類都是有關矩陣理論在變換中運用的具體形式。具體說明如表1所示。

表1 圖形變換類

實際的開發過程中往往包含了多種變換形式，既可能是其中一種變換形式也可能是多種變換形式的疊加，這就要求每一個圖形都支持以上三種變換類，為了能夠較好的支持開發，WPF還提供了一個TransformGroup類，該類支持所有的變換形式，可以看成是各種變換形式的集合，支持多個變換的疊加。同時，為了在復雜變換過程中簡化開發代碼，WPF還開放了最原始的由矩陣理論支撐的MatrixTransform類。具體說明如表2所示。

表2 圖形變換輔助類

（二）使用圖形變換類。通常是先獲取變換對象，再通過變換對象獲取TransformGroup類，這樣就獲取了變換實例的集合。在對該集合進行處理過程中，可以通過TransformGroup類的Children屬性來獲取該集合，再使用Add方法和

Remove方法對集合元素進行操作。

1.TranslateTransform類的使用。

TranslateTransformtt=newTranslateTransform();//構造平移變換

tt.X=5;//傳入X軸平移量

tt.Y=10;//傳入Y軸平移量

group.Children.Add(tt);//添加到變換集合中

其中group為變換對象的TransformGroup類實例。本段代碼執行后將會看到圖形由原位置，向右移動5個像素，向下移動10個像素。如圖1所示。

圖1平移圖形

圖2縮放圖形

圖3 旋轉圖形

2.ScaleTransform類的使用。

ScaleTransform st=new ScaleTransform ();//構造縮放變換

st.ScaleX=1.2;//傳入X軸縮放比例

st.ScaleY=1.2;//傳入Y軸縮放比例

group.Children.Add(st);//添加到變換集合中

該段代碼表示將放大圖片。執行本段代碼將會看到圖形在原位置放大1.2倍。如圖2所示。

3.RotateTransform類的使用。

RotateTransform rt=new RotateTransform();//構造旋轉變換

rt.Angle=45;//傳入逆時針旋轉的度數

group.Children.Add(rt);//添加到變換集合中

該段代碼表示圖形將圍繞原點按逆時針方向旋轉。執行本段代碼將會看到圖形在原位置旋轉了45度。如圖3所示。

四、多圖組合變換

WPF是通過Canvas來呈現圖形的，每一個圖形顯示在Canvas中的位置取決于圖形距離Canvas邊界最上邊和最左邊的距離。我們可以把離開上邊的距離看成y軸坐標，與傳統坐標所不同的是y軸的方向向下，距離最上邊越遠，y值越大。所以對于任何圖形通過設置Canvas.Left和Canvas.Top，就相當于將圖形定位到Canvas的坐標系中，Canvas.Left相當于水平方向的x坐標，Canvas.Top相當于垂直方向的y坐標。在做具體的圖形變換時，我們只需要按照圖形的中心點進行變換即可。當圖形的中心點確定后，整個圖形的位置就確定了。

在進行平移操作時，只需平移中心點，依據原有中心點，根據平移量計算出新的中心點位置，就能重新將圖形移動到想要的位置，此時圖形的寬和高無需做任何變化。

在進行縮放操作時，我們可以將圖形先移動至Canvas原點，根據縮放系數計算出圖形新的寬和高，當圖形在原點縮放成功后，再進行一次平移，將圖形移動到原位置，就完成了圖形在Canvas中的縮放。

在進行旋轉操作時，我們也將圖形的中心點移動到Canvas的原點，按照原點旋轉指定度數，當圖形在原點旋轉成功后，再進行一次平移，將圖形移動到原位置，就完成了圖形在Canvas中的旋轉。

（一）多圖組合變換前的準備。根據以上分析我們可以得出結論，一個圖形的呈現形式取決于它的坐標、大小和旋轉角度。坐標是指相對于容器左上角的遠近，大小就是圖形本身的寬和高，旋轉角度是圖形有沒有轉動，這些因素確定后整個圖形的顯示效果也就確定了。

那么對于多個圖形呈現在一個容器中，并且打算對多個圖形同時做變換操作，這一多圖組合的變換也會受坐標、大小和旋轉角度影響。為了能夠準確的計算出多圖組合的變換，必須提前計算出組合內每個圖形的坐標（為了計算方便使用中心點取代）、大小和旋轉角度。

同時需要計算出組合后的大圖形的中心點、大小和旋轉角度。假定每次組合時，組合后的圖形旋轉角度為0，表示沒有做過任何旋轉。而組合后圖形的中心點取決于所有單個圖形組成大圖形的外邊界構成圖形的中心。如圖4所示。

圖4 兩個圖形組合后的圖形

假設圖形2的中心點x坐標和y坐標都比圖形1的中心點x坐標和y坐標大，則有：

組合圖形的中心點x坐標=(圖形2的中心點x坐標+圖形2的寬度)/2+圖形1的中心點x坐標-圖形1的寬度/2

組合圖形的中心點y坐標=(圖形2的中心點y坐標+圖形2的高度)/2+圖形1的中心點y坐標-圖形1的高度/2

組合圖形的寬度=圖形2的中心點x坐標+圖形2的寬度

組合圖形的高度=圖形2的中心點y坐標+圖形2的高度

其中圖形2的中心點x坐標代表了兩個圖形中心點x坐標中的最大者，圖形2的中心點y坐標代表了兩個圖形中心點y坐標中的最大者。因此，即使是多個圖形也可以按此原則求出最大x坐標和最大y坐標。再用該x坐標加上對應寬度的一半就是該組合后圖形的寬度，用該y坐標加上對應高度的一半就是該組合圖形的高度。

（二）多圖組合變換的實現。

1.多圖組合的平移。對于組合圖形的平移變換，與每個圖形的平移變換并沒有兩樣，所謂組合圖形的平移變換也就是對每一個小圖形逐個進行平移。具體來說就是獲取每個小圖形的TransformGroup實例，對其中的TranslateTransform進行操作，平移每個小圖形的結果就是對組合圖形的平移。

2.多圖組合的縮放。組合圖形的縮放比例與組合內的每個小圖形縮放比例仍然是一致的。首先計算出組合圖形的中心點平移至Canvas原點平移量，再將每個小圖形平移至相對新中心點的位置，然后再計算出每個小圖形平移至Canvas原點的平移量，將每個小圖形平移至Canvas原點，再按縮放比例對每個小圖形進行縮放。當縮放完畢后，按剛才一系列平移的相反次序再進行平移至相對原始中心點的位置。至此完成多圖組合的縮放。如圖5所示。

圖5 多圖組合的縮放

3.多圖組合的旋轉。先計算出組合圖形的中心點平移至Canvas原點的平移量，再將每個小圖形平移至相對新中心點的位置，然后再將每個小圖形再次平移至Canvas的原點位置進行旋轉，每個小圖形的旋轉角度與整個組合后的大圖形旋轉角度保持一致，所不同的是每個小圖形的平移量是不同的。當每個小圖形的旋轉完畢后，再按之前平移的相反次序進行平移，平移至相對原始中心點的位置。至此完成多圖組合的旋轉。如圖6所示。

圖6 多圖組合的旋轉

五、結語

計算機圖形變換是圖形處理中非常重要的環節。利用矩陣理論能夠非常好的解決圖形中所有點的變換問題。本文通過使用WPF中提供的圖形變換類以及相關輔助類實現了單一圖形的變換操作。重點分析研究了多圖組合時圖形變換的問題，并提供了相應的解決方案，該解決方案較好的實現了多圖組合的圖形變換操作。

[1][美]DONALD HEARN.計算機圖形學:第3版[M].蔡士杰譯，北京:電子工業出版社,2005:188.

[2]王汝傳.計算機圖形學教程[M].北京:人民郵電出版社, 2009:126.

[3]張雁.制圖學[M].北京:高等教育出版社，1955:208-224.

[4]JanP.Norbye.發動機設計與制圖[M].華盛頓：奇爾頓圖書出版社,1971:102-105.

[5]MarthaLAbellJamesP.Braselton.Mathematica的舉例應用[M].紐約：埃森威爾圖書出版社,2004:103-110.

[6]劉極峰.計算機輔助設計與制造[M].北京：高等教育出版社，201l：5-150.

[責任編輯 鄭麗娟]

TP311

A

2095-0438（2017）06-0142-04

2017-03-02

侯海平（1980-），男，安徽無為人，安徽財貿職業學院講師，碩士，研究方向：軟件工程、管理信息化。

安徽省高等學校省級質量工程教學研究重點項目（編號：2015jyxm629）；安徽省高等學校省級質量工程教學研究重點項目（編號：2016jyxm0032）