第10章 計算機繪圖原理及其應(yīng)用

第10章

計算機繪圖原理及其應(yīng)用

北京理工大學(xué)計算機系金旭亮

主要內(nèi)容

■計算機繪圖原理

HGDIClock程序分析

?設(shè)計打印系統(tǒng)

2010-9-20北京理工大學(xué)計算機系（共98頁）2

10.1計算機繪圖原理

圖形

蒙通過數(shù)學(xué)方法生成的規(guī)則的圖案

什么是GDI+

HGDI：GraphicDeviceInterface

MGDI+是由.NETFramework中的

System.Drawing命名空間提供的一組類，它

使開發(fā)人員可以利用Windows內(nèi)置的圖形功

能輕松地創(chuàng)建圖形應(yīng)用程序。

2010-9-20北京理工大學(xué)計算機系（共98頁）6

使用GDI+繪圖

2010-9-20北京理工大學(xué)計算機系（共98頁）7

GDI+命名空間

HSystem.Drawing

HSystem.Drawing.Drawing2D

施System.Drawing.Imaging

施System.Drawing.Printing

0System.Drawing.Text

菱System.Drawing.Design

所有這些名字空間都在動態(tài)鏈接庫

System.Drawing.DLL中。

2010-9-20北京理工大學(xué)計算機系（共98頁）8

繪圖表面--Graphics對象(1)

HGraphics對象：

表示可視元素的繪圖界面，所有可視元素的

實際呈現(xiàn)是由Graphics對象來完成的

,繪圖表面的特性：

(1)長大寬

(2)分辨率：像素/英寸(PPD點/英寸(DPI)

(3)顏色深度

2010-9-20北京理工大學(xué)計算機系(共98頁)9

繪圖表面--Graphics對象（2）

,屏幕上的窗口

■送到打印機上的頁面

鬣內(nèi)存中的位圖或圖像

2010-9-20北京理工大學(xué)計算機系（共98頁）10

獲取Graphics對象

(1)從Paint事件的參數(shù)中獲取

(2)用CreateGraphics方法創(chuàng)建(示例工程:

DrawOnButton)

(3)對Image對象調(diào)用Graphics.Fromlmage獲取

(示例工程：DrawOnImage)

2010-9-20北京理工大學(xué)計算機系(共98頁)11

圖形重繪原理

as示例工程：PaintEvent

2010-9-2012

繪圖基本數(shù)據(jù)結(jié)構(gòu)

M點：Point（X,Y）與PointF

H矩形：Rectangle

左上角（X,Y）——右下角（X,Y）

?無所不在的矩形——每個可繪圖的對象都有一

個矩形

HSize與SizeF

注意：為了避免累積誤差，我們一般在圖像處理當(dāng)中采用

浮點坐標(biāo)

2010-9-20北京理工大學(xué)計算機系（共98頁）13

矩形的重要方法

部某點是否在矩形內(nèi)？Contains

0矩形的放大與縮小：Inflate（為正放大，為負(fù)縮?。?/p>

DimrectAsNewRectangle(100,100,50z50)

Dimrect2AsRectangle=Rectangle.Inflate(rectz50,50)

2010-9-2014

矩形的重要方法

?求兩個矩形的交集:Intersect

H求并集：Union

M平移：Offset

2010-9-20北京理工大學(xué)計算機系（共98頁）15

顏色（1）

?顏色的RGB模型

基本顏色口

自定義顏色（Q）

色調(diào)?

飽和度⑤）

顏色亮度上）

確定添加到自定義顏色達(dá)）

2010-9-20北京理工大學(xué)計算機系（共98頁）16

顏色(2)

顏色的HSB模型

i.Hue:色調(diào)0…360

2.Saturation:飽和度0…1

3.Brightness:亮度0…1

2010-9-20北京理工大學(xué)計算機系(共98頁)17

使用顏色

H創(chuàng)建Color對象：

DimclrAsColor

clr=Color.FromArgb(255,255,0,255)

■另一個方法：

Color.FromKnownColor(???)

2010-9-20北京理工大學(xué)計算機系（共98頁）18

顏色的Alpha通道（1）

?Alpha表示所呈現(xiàn)圖形后面的對象的透明度。

Alpha混合處理的顏色對于各種底紋和透明度

效果很有用。如果需要指定Alpha部分，則

它應(yīng)為Color.FromArgb方法中四個參數(shù)的第

一個參數(shù)，并且需要從0到255之間的一個

整數(shù)

2010-9-20北京理工大學(xué)計算機系（共98頁）19

顏色的Alpha通道（2）

?示例工程Alpha

2010-9-20-山小任一1-八千“殲4兒不、K?o〃一20

筆

?筆用于描繪線條（示例：LineCap）

0

嗎線條謂點和線型

2010-9-20北樂埋_L大字計舁機系（不比貝）21

畫刷（1）

?畫刷用于填充圖形

H紋理畫刷實例（MyArtist）

選取圖像文件

2010-9-20北京理工大學(xué)計算機系（共98頁）22

畫刷（2）

H漸變畫刷（示例工程：UseGradient）

2010-9-20北京理工大學(xué)計算機系（共98頁）23

字體（1）

菱對聯(lián)（實例：DuiLian）

海

壁

納

立

百

千

川

仞

有

無

容

欲

乃

則

大

剛

2010-9-20北京理工大學(xué)計算機系（共98頁）24

字體（2）

藝術(shù)字體（實例:BeautifulText）

■

嗎藝術(shù)字體

廠豎行輸出設(shè)置字體設(shè)置字體背景

Draw?

［水滴石穿，

水筒石穿/

2010-9-20北京理工大學(xué)計算機系（共98頁）25

路徑

菱GraphicsPath：此類封裝了一系列相連接的直

線、曲線、圓弧等圍成的圖形

M示例工程UsePath

2010-9-20北京理工大學(xué)計算機系（共98頁）26

區(qū)域

￡示例工程：UseRegion

2010-9-20北京理工大學(xué)計算機系（共98頁）27

區(qū)域的有限與無限

?展示W(wǎng)indows的“畫筆”程序

“未命名-畫圖□0S

要獲得幫助，話在“幫助”菜單中，單擊“幫助主題”.264,49

2010-9-20北京理工大學(xué)計算機系（共98頁）28

應(yīng)用區(qū)域（1）

■給繪圖表面指定一個文字形狀的區(qū)域示例:

ArtistText

2010-9-20北京理工大學(xué)計算機系（共98頁）29

應(yīng)用區(qū)域（2）

H異形窗體（示例OtherShapeForm）

2010-9-20北京理工大學(xué)計算機系（共98頁）30

坐標(biāo)系（1）

?直角坐標(biāo)系與屏幕坐標(biāo)系

2010-9-20北京理工大學(xué)計算機系（共98頁）31

坐標(biāo)系(2)

as極坐標(biāo)系

x-rcos0

y=/sin8

2010-9-20北京理工大學(xué)計算機系(共98頁)32

坐標(biāo)變換（1）

x平移：

g.TranslateTransform(100,75)

■￡平移示例________________________百回留

原港發(fā)*

水平平移100像素，垂直平移75像素。

2010-9-20北京理工大學(xué)計算機系（共98頁）33

坐標(biāo)變換（2）

?平移的應(yīng)用

■aForal-JteJSl

中國/、

2010-9-20北京理工大學(xué)計算機系（共98頁）34

坐標(biāo)平移代碼

PrivateSubForml_Paint()Handles

MyBase.Paint

DimgAsGraphics

g=e.Graphics

g.TranslateTransform(-3,-3)

g.DrawString(〃中國人〃，NewFont(〃宋體〃，

80,FontStyle.Bold),Brushes.Red,100,100)

g.ResetTransform()

g.DrawString(〃中國人〃，NewFont(〃宋體〃，

80,FontStyle.Bold),Brushes.Black,100,100)

EndSub

2010-9-20北京理工大學(xué)計算機系（共98頁）35

坐標(biāo)變換（3）

H旋轉(zhuǎn)

g.RotateTransform(45)

咽旋轉(zhuǎn)示例曰回國

2010-9-20北京理工大學(xué)計算機系（共98頁）36

坐標(biāo)變換(4)

縮放：坐標(biāo)系的縮放是指坐標(biāo)原點不變，但

單位長度所占的像素數(shù)目有變化

’水平放大兩倍，垂直放大三倍

g.ScaleTransform(2.OF,3.OF)

2010-9-20北京理工37

坐標(biāo)變換（5）

復(fù)坐標(biāo)變換綜合實例（RotateText）：

嗎旋轉(zhuǎn)的字體____________一回留

實現(xiàn)方法：

平移坐標(biāo)系，將原

點移至屏幕中心，

Hello,World然后，再將坐標(biāo)移

旋轉(zhuǎn)45度，循環(huán)8次

2010-9-20北京理工大學(xué)計算機系（共98頁）38

開發(fā)繪圖程序必須注意

?豈一個繪圖對象使用完畢時，最好馬上調(diào)用其Dispose方法。

0示例：

PrivateSubFormlPaint(ByVaisenderAsObject,ByVaie

AsSystem.Windows.Forms.PaintEventArgs)Handles

MyBase.Paint

DimgAsGraphics

g-e.Graphics

DimpAsNewPen(Color.Blue,7)

g.DrawLine(p,10,10,50,50)

p.Dispose()

EndSub

2010-9-20北京理工大學(xué)計算機系（共98頁）39

繪制數(shù)學(xué)圖案

簡單的循環(huán)，創(chuàng)建奇特的效果

H實例CircleArea

2010-9-20北京理工大學(xué)計算機系（共98頁）41

繪制函數(shù)圖形

H示例工程DrawMathFunc

36x

/(x)=1+

(x+3)2

2010-9-20北京理工大學(xué)計算機系（共98頁）42

繪制函數(shù)圖形

0運行結(jié)果：

巧用遞歸

￡實例DrawCircles

嗚使用遞歸生成美麗的圖案

開始繪制遞歸深度

2010-9-20北京理工大學(xué)計算機系（共98頁）44

計算機圖形學(xué)

0GDI+的坐標(biāo)變換功能使我們可以很方便地平移、縮放

和旋轉(zhuǎn)圖形。

復(fù)通過附加一人變換矩陣，應(yīng)用線性代數(shù)的方法，我們

可以把圖形坐標(biāo)映射到某種新坐標(biāo)值上，從而創(chuàng)造出

變形的效果。

這個矩陣在GDI+中是一個Matrix類的實例，可以被傳

送給Transform系列方法。

復(fù)更多的理論請去學(xué)習(xí)計算機圖形學(xué)，然后，我們就可

以使用方便強大的GDI+創(chuàng)建讓人目瞪口呆的計算機圖

形。

復(fù)推薦鉆研：分形算法

2010-9-20北京理工大學(xué)計算機系（共98頁）45

補充材料:

分形技術(shù)簡介

口分形之父：Mandelbrot（左上圖：Voss為他做的分形頭像）

□1975年出版分形幾何專著《分形、機遇和維數(shù)》，標(biāo)志著分形理論的誕生。

口分形是大自然的幾何。

口右上圖：著名的Mandelbrot集。這個點集均出自公式:Z^l=Z2n+C。他是曼德

勃羅教授在二十世紀(jì)七十年代發(fā)現(xiàn)的。只要你計算的點足夠多，不管你把圖案放

大多少倍,都能顯示出更加復(fù)雜的局部.這些局部既與整體不同，又有某種相似的地

方，具有無窮無盡的細(xì)節(jié)和自相似性。

2010-9-20北京理工大學(xué)計算機系（共98頁）47

分形概念

?通俗地講，分形的本質(zhì)就是局部同整體相似。

復(fù)分形是一種具有自相似特性的現(xiàn)象、圖像或者

物理過程。也就是說，在分形中，每一組成部

分都在特征上和整體相似，只僅僅是變小了一

些而已。

麓局部都可以看成整體的副本。

2010-9-20北京理工大學(xué)計算機系（共98頁）48

2010-9-20北京理工大學(xué)計算機系（共98頁）49

2010-9-20北京理工大學(xué)計算機系（共98頁）50

2010-9-20北京理工大學(xué)計算機系（共98頁）51

2010-9-20北京理工大學(xué)計算機系（共98頁）52

處理圖像

怎樣顯示一幅圖片

dimpicfilenameAsString

DimimgAsImage

'選擇文件

img=NewBitmap(picfilename)

g.Drawlmage(img,0,0)

2010-9-20北京理工大學(xué)計算機系（共98頁）55

縮放圖像

■方法：

Drawlmage(圖像對象,圖像大小)

?代碼：

g.Drawlmage(img,NewRectangle(0,0,

Me.Panell.Width,Me.Height))

2010-9-20北京理工大學(xué)計算機系（共98頁）56

在圖像上輸出字

復(fù)獲取圖像對象所在容器的Graphics對象g,然

后，調(diào)用

2010-9-20北京理工大學(xué)計算機系（共98頁）57

創(chuàng)建圖像特效

蒙圖像特效是依靠對圖像的像素點直接進行操作

實現(xiàn)的。并可對像素進行數(shù)學(xué)變換

■其方法是：

調(diào)用GetPixel得到點的顏色，然后，進行相應(yīng)

處理后，再用SetPixel寫回到圖像中

?實例：

加亮圖片

2010-9-20北京理工大學(xué)計算機系（共98頁）58

圖像特效實例

M加亮圖片:GetBrightPic

■L加亮圖片?回國I

2010-9-20北京理工大學(xué)計算機系（共98頁）59

使用GDI+播放動畫

HGIFPlayer

QGIF播放器

2010-9-20北京理工大學(xué)計算機系（共98頁）60

GIFPlayer程序分析

H使用ImageAnimator類來播放GIF動畫

?使用動態(tài)事件綁定來進行畫面切換

H在Form的Resize過程中創(chuàng)建Graphics對象

2010-9-20北京理工大學(xué)計算機系（共98頁）61

10.2GDIClock程序分析

GDI+綜合實例分析：小鬧鐘

2010-9-20北京理工大學(xué)計算機系（共98頁）63

基本原理

?使用GDI+繪制圖形

?使用時鐘激發(fā)事件

2010-9-20北京理工大學(xué)計算機系（共98頁）64

如何實現(xiàn)程序的自動運行一背景

?什么叫注冊表？展示注冊表的結(jié)構(gòu)與作用

注冊表是一個存儲設(shè)備，包含有關(guān)應(yīng)用程序、用

戶和默認(rèn)系統(tǒng)設(shè)置的信息。例如，應(yīng)用程序可以

使用注冊表來存儲在應(yīng)用程序關(guān)閉后需要保留的

信息，并在應(yīng)用程序重新加載時訪問那些同樣的

信息。

■注冊表的生死輪回回到DOS時代

2010-9-20北京理工大學(xué)計算機系（共98頁）65

如何實現(xiàn)程序的自動運行(方案)

?實現(xiàn)程序自動運行的基本方法:

(1)修改注冊表

(2)將程序放入“啟動”菜單

(3)將程序開發(fā)為Windows服務(wù)

(4)做成病毒

2010-9-20北京理工大學(xué)計算機系(共98頁)66

如何實現(xiàn)程序的自動運行（實現(xiàn)）

建要點：

利用注冊表實現(xiàn)程序的開機自動運行

■使用System.Win32.Registry類訪問注冊表

■實際代碼：在類RegSettings中。

2010-9-20北京理工大學(xué)計算機系（共98頁）67

如何實現(xiàn)程序退出時保存設(shè)置

?每次程序運行時都自動保存上次的設(shè)置參數(shù),

這是如何做到的？

■方案：

可以利用配置文件

2010-9-20北京理工大學(xué)計算機系（共98頁）68

配置文件的內(nèi)容

<configuration>

<appSettings>

<addkey="Top"value="326"/>

<addkey="Left"value=“518〃/>

<addkey二〃Width"value=〃192”/>

<addkey="Height“value="166"/>

<addkey="FillColor“value二〃LightYellow”/>

<addkey二〃TextColor"value=〃T6777216”/>

</appSettings>

</configuration>

2010-9-20北京理工大學(xué)計算機系（共98頁）69

程序退出時保存設(shè)置(實現(xiàn))

?存取配置文件：AppSettings類中的代碼，這

里使用了XML技術(shù)，創(chuàng)建XMLDocumet,然后使

用XPath來存取信息。

?窗體的LoadSettings()用于實現(xiàn)裝入配置信

息，在窗體的Load事件中運行。

施SaveSettings(),在窗體的Closing事件中

、一/一

三仃。

2010-9-20北京理工大學(xué)計算機系(共98頁)70

程序退出時保存設(shè)置（改進）

?此程序現(xiàn)在不能保存漸變填充設(shè)置，請加上此

功能

2010-9-20北京理工大學(xué)計算機系（共98頁）71

創(chuàng)建自畫菜單

?基本原理：

(1)OwnerDraw屬性

(2)Measureltem事件決定菜單項的大小

(3)Drawltem事件繪出菜單

2010-9-20北京理工大學(xué)計算機系(共98頁)72

繪制時鐘

?整個時鐘的代碼被封裝成一個類

2010-9-20北京理工大學(xué)計算機系（共98頁）73

何時繪制時鐘？

H主窗體的frmClock_Paint事件過程

Me.SetStyle(Controlstyles.ResizeRedraw,

True),在改變窗體大小時重繪

罐D(zhuǎn)raw。有兩個重載的方法，一個用于繪制數(shù)字

時鐘，一個用于繪制模擬時鐘

2010-9-20北京理工大學(xué)計算機系(共98頁)74

怎樣實現(xiàn)平滑的時鐘顯示？

夏關(guān)鍵處理好Paint事件

,導(dǎo)致窗體閃爍的罪魁禍?zhǔn)资钦l？

解決之道：

（1）只重繪部分區(qū)域

（2）使用摳俊沖/

2010-9-20北京理工大學(xué)計算機系（共98頁）75

在Clock類中

H在Draw。中設(shè)定InvalidRegion屬性

,在任何需要重繪的地方，調(diào)用：

ParentForm.Invalidate(InvalidRegion)

2010-9-20北京理工大學(xué)計算機系(共98頁)76

使用雙緩沖

■示例中問題的解決方案

蒙在FormLoad過程中使用雙緩沖

Me.SetStyle(Controlstyles.AHPaintinglnWmPaintOr

Controlstyles.UserPaintOrControlstyles.DoubleBuffer,

True)

2010-9-20北京理工大學(xué)計算機系（共98頁）77

怎樣顯示或不顯示窗體邊框？

?再次利用窗體的Region屬性，代碼在：

PublicSubClipForm(ByVaiClipAsBoolean)

由ToggleFrame()所調(diào)用。

2010-9-20北京理工大學(xué)計算機系(共98頁)78

繪制時鐘

?數(shù)學(xué)中的知識：坐標(biāo)變換

?請自行研究相關(guān)代碼

2010-9-20北京理工大學(xué)計算機系（共98頁）79

讓時鐘“走”

PublicSubNew(ByVaiParentAsForm)

ParentForm=Parent

ClockTimer二NewTimer()

ClockTimer.Interval=100，注意：為何不是一^秒？

AddHandlerClockTimer.Tick,AddressOfClockTimerTick

ClockTimer.Enabled=True

EndSub

2010-9-20北京理工大學(xué)計算機系（共98頁）80

實現(xiàn)鬧鐘

HClockTimer_Tick()中處理時間到，通過設(shè)

置ClockFiliBrush屬性并刷新實現(xiàn)閃爍

2010-9-20北京理工大學(xué)計算機系(共98頁)81

釋放資源

HPrivateSubDispose()Implements

IDisposable.Dispose

2010-9-20北京理工大學(xué)計算機系（共98頁）82

可能的改進

,如何將此程序放入托盤中？

■給程序加上音樂鬧鐘功能

蒙封裝此Clock為DLL,并提供可以激發(fā)的事件接

口，定時提醒。

2010-9-20北京理工大學(xué)計算機系（共98頁）83

10.3設(shè)計打印系統(tǒng)

編程實現(xiàn)打印的基本原理

H獲取打印機Graphics對象

H在打印機Graphics對象上繪圖

2010-9-20北京理工大學(xué)計算機系（共98頁）85

文件打印

器思索：

為何打印的類全部放在

ImportsSystem.Drawing.Printing下？

,這是因為繪圖與打印本質(zhì)是一樣的。

38求同存異的思維方式

2010-9-20北京理工大學(xué)計算機系（共98頁）86

打印文本與圖形

H示例工程：PrintExamplel

2010-9-20北京理工大學(xué)計算機系（共98頁）87

打印作業(yè)與打印事件

照在?net框架的打印模塊中，打印的內(nèi)容是由應(yīng)

用程序邏輯直接提供的。打印作業(yè)是由

PrintDocument.Print方法初始化的，這就開始

了打印作業(yè)，然后，引發(fā)一個戢多個PrintPage

事件。通過在此事件中提供處理代碼，就能指

定要打印的內(nèi)容。

蠹打印作業(yè)中的每個頁面都會引發(fā)一個PrintPage

事件，所以，方法必須能夠?qū)崿F(xiàn)某些功能以跟

蹤打印作業(yè)，并且確保被打印的多頁面文檔的

頁面連續(xù)。否則，文檔的第一頁將會被打印多

次。

2010-9-20北京理工大學(xué)計算機系（共98頁）88

使用PrintDocument組件

使用PrintDocumentl_PrintPage()事件向打印

機傳送數(shù)據(jù)，注意其參數(shù)e的類型

2010-9-20北京理工大學(xué)計算機系(共98頁)89

PringPageEventArgs對象

?與打印相關(guān)的信息被封裝到

PringPageEventArgs對象中。使用其Graphic

對象可以繪圖。

H通過計算基于MarginBounds方框的打印坐標(biāo)，

可以指定打印發(fā)生在頁邊距之內(nèi)。發(fā)生在頁邊

距之外的打印，如頁眉和頁腳，可以通過計算

基于PageBounds方框的打印坐標(biāo)來指定。

2010-9-20北京理工大學(xué)計算機系（共98頁）90

使用PrintDocument組件

?HasMorePage屬性用于控制是否繼續(xù)激發(fā)

PrintPage事件。

2010-9-20北京理工大學(xué)計算機系（共98頁）91

控制打印

H示例工程PrinterExample3

2010-9-20北京理工大學(xué)計算機系（共98頁）92

打印預(yù)覽

H實例：PrintExample5

噌打印預(yù)覽陽

/Q，圓國畫圖畫一―親記一頁目

;?n:

1??G?，ff??*t—?

:i::ru;;nrzn^4l^:x?r3:=■:

??m?.AWBa?*<?at；???一?■?，i.?*'!?0.■*■?

??-■—，?.v???MLtr?*MiRU?*??^

*?

??????????????**????..■??????

?**?????-???，?>V9?.y????》??，?a”??，ww????o6

**??M?o0?4?(*?

■???，??>?■?-.4WW???

????W???'?T

?**-9TUK?vr*.??>*'?，>9?■?*，w?w

??X?????W??.V??W.??*.??.

?V■*?*???J?:0'E(■?--?*????■?*T

?■■?，i?vatx????->*??-??^*rv?A

?1?,A4?<*v：?<—wwi*r-?wr4ut1：?rrt?>tM?>

?*?■-V*BeBJL??fMWM)??*|

????????????Uwwt-*a-??7??r-????

???，??、，?????/??*■?'?#<4?，?-，4F，??????*??4M?