侯海平

(安徽財(cái)貿(mào)職業(yè)學(xué)院 安徽合肥 230001)

一種基于矩陣?yán)碚摰亩鄨D組合變換研究

侯海平

(安徽財(cái)貿(mào)職業(yè)學(xué)院 安徽合肥 230001)

文章結(jié)合幾何變換中的矩陣?yán)碚?，分析了圖形變換中平移、縮放、旋轉(zhuǎn)的理論基礎(chǔ)；研究了如何使用WPF中圖形變換的相關(guān)類以及輔助類解決圖形變換問題；重點(diǎn)分析了多圖組合的變換操作，提出相應(yīng)的變換方案。

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

在計(jì)算機(jī)動(dòng)畫和計(jì)算機(jī)輔助設(shè)計(jì)領(lǐng)域中經(jīng)常會(huì)對(duì)虛擬場景中的物體進(jìn)行各種操作，目的在于更好地觀察物體本身，發(fā)現(xiàn)物體本身內(nèi)部結(jié)構(gòu)和原理。這些操作包括改變它的位置、改變它的大小、改變它的角度等[1]。準(zhǔn)確地說這些操作也就是對(duì)圖形進(jìn)行平移、旋轉(zhuǎn)、縮小或放大等變換[2]。

一、幾何變換在圖形設(shè)計(jì)中的應(yīng)用

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

（一）平移。在二維坐標(biāo)中有點(diǎn)(x,y),假設(shè)要對(duì)該點(diǎn)進(jìn)行水平方向移動(dòng)a個(gè)單位長度，垂直方向移動(dòng)b個(gè)單位長度，則該點(diǎn)新的坐標(biāo)為(x1,y1)，其中x1=x+a,y1=y+b,這就是一個(gè)平移模型[3]。

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

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

二、幾何變換中的矩陣?yán)碚?/h2>

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

P’=M1·P+M2

其中P’和P表示向量，矩陣M1是一個(gè)2×2的矩陣，M2表示平移項(xiàng)。為了能夠?qū)⒍S幾何變換的乘法和平移項(xiàng)組合成單一矩陣，必須將二維坐標(biāo)(x,y)擴(kuò)充到三維來表示，也就是齊次坐標(biāo)(x,y,h),h是一個(gè)齊次參數(shù)[1]。

這樣對(duì)于圖形中每一個(gè)點(diǎn)就可以擴(kuò)充為一個(gè)單位三維坐標(biāo),用矩陣表示就是[x y 1]。一個(gè)圖形的點(diǎn)集就可以表示為

則設(shè)變換矩陣為T，就需要將其轉(zhuǎn)換成3×3的矩陣，即

圖形的變換可以表達(dá)為點(diǎn)集與變換矩陣的乘積，結(jié)果為變換后的圖形點(diǎn)集矩陣，表示為

（一）平移。將T矩陣中a設(shè)定為1，b設(shè)定為0，c設(shè)定為0，d設(shè)定為1。對(duì)于點(diǎn)(x,y)來說就是上式中第一行的計(jì)算結(jié)果為[x+ey+f1]一行三列的矩陣,前兩項(xiàng)就是平移后的坐標(biāo)(x+e, y+f)。e表示x方向平移量，f表示y方向平移量。

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

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

三、WPF中的圖形變換策略

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

（一）圖形變換相關(guān)類。為了能夠方便對(duì)圖形進(jìn)行操作處理，WPF提供了較多的圖形變換類。針對(duì)之前介紹的平移變換、縮放變換、旋轉(zhuǎn)變換分別提供了TranslateTransform類、ScaleTransform類、RotateTransform類，這些類都是有關(guān)矩陣?yán)碚撛谧儞Q中運(yùn)用的具體形式。具體說明如表1所示。

表1 圖形變換類

實(shí)際的開發(fā)過程中往往包含了多種變換形式，既可能是其中一種變換形式也可能是多種變換形式的疊加，這就要求每一個(gè)圖形都支持以上三種變換類，為了能夠較好的支持開發(fā)，WPF還提供了一個(gè)TransformGroup類，該類支持所有的變換形式，可以看成是各種變換形式的集合，支持多個(gè)變換的疊加。同時(shí)，為了在復(fù)雜變換過程中簡化開發(fā)代碼，WPF還開放了最原始的由矩陣?yán)碚撝蔚腗atrixTransform類。具體說明如表2所示。

表2 圖形變換輔助類

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

Remove方法對(duì)集合元素進(jìn)行操作。

1.TranslateTransform類的使用。

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

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

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

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

其中g(shù)roup為變換對(duì)象的TransformGroup類實(shí)例。本段代碼執(zhí)行后將會(huì)看到圖形由原位置，向右移動(dòng)5個(gè)像素，向下移動(dòng)10個(gè)像素。如圖1所示。

圖1平移圖形

圖2縮放圖形

圖3 旋轉(zhuǎn)圖形

2.ScaleTransform類的使用。

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

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

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

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

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

3.RotateTransform類的使用。

RotateTransform rt=new RotateTransform();//構(gòu)造旋轉(zhuǎn)變換

rt.Angle=45;//傳入逆時(shí)針旋轉(zhuǎn)的度數(shù)

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

該段代碼表示圖形將圍繞原點(diǎn)按逆時(shí)針方向旋轉(zhuǎn)。執(zhí)行本段代碼將會(huì)看到圖形在原位置旋轉(zhuǎn)了45度。如圖3所示。

四、多圖組合變換

WPF是通過Canvas來呈現(xiàn)圖形的，每一個(gè)圖形顯示在Canvas中的位置取決于圖形距離Canvas邊界最上邊和最左邊的距離。我們可以把離開上邊的距離看成y軸坐標(biāo)，與傳統(tǒng)坐標(biāo)所不同的是y軸的方向向下，距離最上邊越遠(yuǎn)，y值越大。所以對(duì)于任何圖形通過設(shè)置Canvas.Left和Canvas.Top，就相當(dāng)于將圖形定位到Canvas的坐標(biāo)系中，Canvas.Left相當(dāng)于水平方向的x坐標(biāo)，Canvas.Top相當(dāng)于垂直方向的y坐標(biāo)。在做具體的圖形變換時(shí)，我們只需要按照?qǐng)D形的中心點(diǎn)進(jìn)行變換即可。當(dāng)圖形的中心點(diǎn)確定后，整個(gè)圖形的位置就確定了。

在進(jìn)行平移操作時(shí)，只需平移中心點(diǎn)，依據(jù)原有中心點(diǎn)，根據(jù)平移量計(jì)算出新的中心點(diǎn)位置，就能重新將圖形移動(dòng)到想要的位置，此時(shí)圖形的寬和高無需做任何變化。

在進(jìn)行縮放操作時(shí)，我們可以將圖形先移動(dòng)至Canvas原點(diǎn)，根據(jù)縮放系數(shù)計(jì)算出圖形新的寬和高，當(dāng)圖形在原點(diǎn)縮放成功后，再進(jìn)行一次平移，將圖形移動(dòng)到原位置，就完成了圖形在Canvas中的縮放。

在進(jìn)行旋轉(zhuǎn)操作時(shí)，我們也將圖形的中心點(diǎn)移動(dòng)到Canvas的原點(diǎn)，按照原點(diǎn)旋轉(zhuǎn)指定度數(shù)，當(dāng)圖形在原點(diǎn)旋轉(zhuǎn)成功后，再進(jìn)行一次平移，將圖形移動(dòng)到原位置，就完成了圖形在Canvas中的旋轉(zhuǎn)。

（一）多圖組合變換前的準(zhǔn)備。根據(jù)以上分析我們可以得出結(jié)論，一個(gè)圖形的呈現(xiàn)形式取決于它的坐標(biāo)、大小和旋轉(zhuǎn)角度。坐標(biāo)是指相對(duì)于容器左上角的遠(yuǎn)近，大小就是圖形本身的寬和高，旋轉(zhuǎn)角度是圖形有沒有轉(zhuǎn)動(dòng)，這些因素確定后整個(gè)圖形的顯示效果也就確定了。

那么對(duì)于多個(gè)圖形呈現(xiàn)在一個(gè)容器中，并且打算對(duì)多個(gè)圖形同時(shí)做變換操作，這一多圖組合的變換也會(huì)受坐標(biāo)、大小和旋轉(zhuǎn)角度影響。為了能夠準(zhǔn)確的計(jì)算出多圖組合的變換，必須提前計(jì)算出組合內(nèi)每個(gè)圖形的坐標(biāo)（為了計(jì)算方便使用中心點(diǎn)取代）、大小和旋轉(zhuǎn)角度。

同時(shí)需要計(jì)算出組合后的大圖形的中心點(diǎn)、大小和旋轉(zhuǎn)角度。假定每次組合時(shí)，組合后的圖形旋轉(zhuǎn)角度為0，表示沒有做過任何旋轉(zhuǎn)。而組合后圖形的中心點(diǎn)取決于所有單個(gè)圖形組成大圖形的外邊界構(gòu)成圖形的中心。如圖4所示。

圖4 兩個(gè)圖形組合后的圖形

假設(shè)圖形2的中心點(diǎn)x坐標(biāo)和y坐標(biāo)都比圖形1的中心點(diǎn)x坐標(biāo)和y坐標(biāo)大，則有：

組合圖形的中心點(diǎn)x坐標(biāo)=(圖形2的中心點(diǎn)x坐標(biāo)+圖形2的寬度)/2+圖形1的中心點(diǎn)x坐標(biāo)-圖形1的寬度/2

組合圖形的中心點(diǎn)y坐標(biāo)=(圖形2的中心點(diǎn)y坐標(biāo)+圖形2的高度)/2+圖形1的中心點(diǎn)y坐標(biāo)-圖形1的高度/2

組合圖形的寬度=圖形2的中心點(diǎn)x坐標(biāo)+圖形2的寬度

組合圖形的高度=圖形2的中心點(diǎn)y坐標(biāo)+圖形2的高度

其中圖形2的中心點(diǎn)x坐標(biāo)代表了兩個(gè)圖形中心點(diǎn)x坐標(biāo)中的最大者，圖形2的中心點(diǎn)y坐標(biāo)代表了兩個(gè)圖形中心點(diǎn)y坐標(biāo)中的最大者。因此，即使是多個(gè)圖形也可以按此原則求出最大x坐標(biāo)和最大y坐標(biāo)。再用該x坐標(biāo)加上對(duì)應(yīng)寬度的一半就是該組合后圖形的寬度，用該y坐標(biāo)加上對(duì)應(yīng)高度的一半就是該組合圖形的高度。

（二）多圖組合變換的實(shí)現(xiàn)。

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

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

圖5 多圖組合的縮放

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

圖6 多圖組合的旋轉(zhuǎn)

五、結(jié)語

計(jì)算機(jī)圖形變換是圖形處理中非常重要的環(huán)節(jié)。利用矩陣?yán)碚撃軌蚍浅：玫慕鉀Q圖形中所有點(diǎn)的變換問題。本文通過使用WPF中提供的圖形變換類以及相關(guān)輔助類實(shí)現(xiàn)了單一圖形的變換操作。重點(diǎn)分析研究了多圖組合時(shí)圖形變換的問題，并提供了相應(yīng)的解決方案，該解決方案較好的實(shí)現(xiàn)了多圖組合的圖形變換操作。

[1][美]DONALD HEARN.計(jì)算機(jī)圖形學(xué):第3版[M].蔡士杰譯，北京:電子工業(yè)出版社,2005:188.

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

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

[4]JanP.Norbye.發(fā)動(dòng)機(jī)設(shè)計(jì)與制圖[M].華盛頓：奇爾頓圖書出版社,1971:102-105.

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

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

[責(zé)任編輯 鄭麗娟]

TP311

A

2095-0438（2017）06-0142-04

2017-03-02

侯海平（1980-），男，安徽無為人，安徽財(cái)貿(mào)職業(yè)學(xué)院講師，碩士，研究方向：軟件工程、管理信息化。

安徽省高等學(xué)校省級(jí)質(zhì)量工程教學(xué)研究重點(diǎn)項(xiàng)目（編號(hào)：2015jyxm629）；安徽省高等學(xué)校省級(jí)質(zhì)量工程教學(xué)研究重點(diǎn)項(xiàng)目（編號(hào)：2016jyxm0032）