在Blend中繪制函數(shù)圖像的探索與實(shí)踐

摘 要：在Expression Blend 3中制作動(dòng)畫(huà)或教學(xué)課件，常需用到函數(shù)圖像，所需圖像最好直接在Blend 3中繪制。文章針對(duì)在Blend中繪制函數(shù)圖像進(jìn)行了探索。

關(guān)鍵詞：函數(shù)圖像；Blend；C#；繪圖工具

中圖分類(lèi)號(hào)：G434文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1673-8454（2011）20-0057-02

在Expression Blend 3中制作動(dòng)畫(huà)或教學(xué)課件，常需用到函數(shù)圖像，所需圖像如果利用其它軟件，如幾何畫(huà)板繪制好后再截圖放到Blend 3中，其背景不好處理，且不便對(duì)圖像進(jìn)行變換操作，需要時(shí)最好直接在Blend 3中繪制。但是，在Blend 3中繪制函數(shù)圖像存在如下問(wèn)題：①關(guān)鍵程序代碼和具體實(shí)現(xiàn)步驟如何？②Blend 3的屏幕坐標(biāo)系與Flash相同，都是以屏幕左上角為坐標(biāo)原點(diǎn)，向右為x軸，向下為y軸，這與平面直角坐標(biāo)系不一致，如何變換？③Blend 3的屏幕坐標(biāo)系，長(zhǎng)度單位為像素，與平面直角坐標(biāo)系的單位長(zhǎng)度也不一致，如何處理？

帶著以上問(wèn)題，筆者首先探索出不用坐標(biāo)變換而繪制橢圓的代碼，再逐步實(shí)現(xiàn)了坐標(biāo)變換及單位轉(zhuǎn)換。

一、繪制橢圓的關(guān)鍵代碼和具體步驟

1.定義點(diǎn)集

private PointCollection pc01 = new PointCollection();

2.利用多線段（Polyline）對(duì)象繪制橢圓

一個(gè)Silverlight應(yīng)用程序界面可以看成一個(gè)畫(huà)板，Rectangle（矩形）、Ellipse（橢圓）、Line（線段）、Polyline（多線段）等繪圖對(duì)象就好比不同類(lèi)型的畫(huà)筆和繪圖工具，有了這些繪圖工具，再結(jié)合C#程序代碼，就可以充分發(fā)揮想象力，創(chuàng)造出各種各樣的圖形界面。[1]

將點(diǎn)集中的點(diǎn)依次連接，就得到多線段（Polyline），當(dāng)相鄰點(diǎn)間距離足夠小時(shí)，所得的Polyline就是光滑曲線了。繪圖由下面的drawPolyline方法實(shí)現(xiàn)：

private void drawPolyline()

{

double x=0， y=0，t=0;

do {

x = 400 + 150*Math.cos(t);//計(jì)算點(diǎn)的橫坐標(biāo)

y = 300 + 100*Math.sin(t);//計(jì)算點(diǎn)的縱坐標(biāo)

pc01.Add(new Point(x，y)); //將點(diǎn)(x，y)加入到點(diǎn)集pc01中

t=t+0.01;//下一個(gè)點(diǎn)的參數(shù)，增量值越接近于0，圖形精度越高

}

while(t<7);//對(duì)于橢圓，參數(shù)t，取遍[0，2?仔]即可。

Polyline pl01 = new Polyline();//聲明多線段

pl01.Stroke = new SolidColorBrush(Colors.Blue);

pl01.StrokeThickness = 1;

pl01.Points = pc01; //應(yīng)用坐標(biāo)點(diǎn)集

LayoutRoot.Children.Add(pl01); //添加線段到界面布局對(duì)象上

}

drawPolyline方法中，屏幕坐標(biāo)x、y值的計(jì)算公式，來(lái)源于橢圓+=1的參數(shù)方程：x=400+150costy=300+100sint。

二、坐標(biāo)變換及單位轉(zhuǎn)換

drawPolyline方法實(shí)現(xiàn)了由點(diǎn)集構(gòu)成曲線。橢圓是封閉曲線，只要確定中心坐標(biāo)及長(zhǎng)、短半軸的值，不用坐標(biāo)變換即可繪出，以此思路，沒(méi)能繪出函數(shù)圖像，能不能用坐標(biāo)變換呢？

將平面直角坐標(biāo)系的坐標(biāo)原點(diǎn)放置在屏幕坐標(biāo)系的（400，300）處，根據(jù)坐標(biāo)變換公式：x=x′+hy=y′+k，其中，（h，k）為新系原點(diǎn)在原系下的坐標(biāo)，又考慮到此處的縱坐標(biāo)，y′遞增時(shí)y遞減，于是按公式x=400+x′y=300-y′進(jìn)行試驗(yàn)。以函數(shù)y=為例，公式具體化為x=400+x′y=300-，結(jié)果在第一象限繪出了一條曲線，坐標(biāo)變換的方向是對(duì)的，只是與在幾何畫(huà)板中繪制的圖像還有差別。

通過(guò)多次變換公式，如變成x=400+30x′y=300-、變成x=400+30x′y=300-30等，最后發(fā)現(xiàn)后者繪出的圖像與實(shí)際圖像一致。

一般情況，以k個(gè)像素為平面直角坐標(biāo)系下的一個(gè)單位，變換公式為：x=400+kx′y=300-ky′，其中，y′=f(x′)。

三、繪制函數(shù)y=圖像的關(guān)鍵代碼

修改drawPolyline方法，只將循環(huán)部分改為：

do {

x = 400 + 30*t;//30像素為平面直角坐標(biāo)的1個(gè)單位

y = 300 -30*Math.Sqrt(t);

pc01.Add(new Point(x，y));

t=t+0.001;//與上面代碼比較，提高了精度

}

while(t<14); //自變量小于14，屏幕坐標(biāo)系下橫坐標(biāo)小于820

對(duì)于其它函數(shù)，繪圖時(shí)，要注意的是變量t的初值與終值，t的值不僅決定所繪圖像的范圍，轉(zhuǎn)換成屏幕坐標(biāo)后，最好還要滿足0≤x≤800，0≤y≤600。

對(duì)于平面直角坐標(biāo)系的坐標(biāo)軸，可以直接在Blend 3的設(shè)計(jì)視圖中完成，也可以在幾何畫(huà)板等軟件中繪制好后，作為背景插入進(jìn)來(lái)。

結(jié)束語(yǔ)

由于有C#為后盾，在Blend 3中繪制圖像、制作動(dòng)畫(huà)，只要想得到，肯定做得到，只是相關(guān)資料較少，常常需要艱苦的探索。

參考文獻(xiàn)：

[1]銀光志.Silverlight3.0開(kāi)發(fā)詳解與最佳實(shí)踐[M].北京：清華大學(xué)出版社，2009.12.

（編輯：王天鵬）