第02章-數(shù)字墨跡與動(dòng)態(tài)繪圖基礎(chǔ)

工業(yè)和信息化部“十二五”規(guī)劃教材

普通高等學(xué)?！笆濉币?guī)劃教材

《C#網(wǎng)絡(luò)應(yīng)用編程》第3版

第2章數(shù)字墨跡與動(dòng)態(tài)繪圖基礎(chǔ)2Ch2數(shù)字墨跡與動(dòng)態(tài)繪圖基礎(chǔ)2.1Ribbon控件及其基本用法2.2WPF中的數(shù)字墨跡2.3自定義墨跡畫板2.4利用自定義墨跡畫板實(shí)現(xiàn)動(dòng)態(tài)繪2.5功能擴(kuò)展建議2.1Ribbon控件及其基本用法2.1.1設(shè)計(jì)選項(xiàng)卡2.1.2在多個(gè)選項(xiàng)卡中重用選項(xiàng)42.1.1設(shè)計(jì)選項(xiàng)卡WPF提供的Ribbon控件將界面分為兩大部分,上部是功能區(qū)（將應(yīng)用程序的功能組織到窗口頂部的一系列選項(xiàng)卡中）,下部是處理界面比傳統(tǒng)的菜單欄和工具欄具有更強(qiáng)的展現(xiàn)效果注意Ribbon控件屬于高級(jí)控件，默認(rèn)沒有放到工具箱中，因此，使用該控件前，首先需要通過添加引用的辦法將其添加到項(xiàng)目中52.1.1設(shè)計(jì)選項(xiàng)卡添加Ribbon控件2.1.1設(shè)計(jì)選項(xiàng)卡Ribbon控件主要包括以下子項(xiàng)：QuickAccessToolBar（快速訪問工具欄）、ApplicationMenu（應(yīng)用程序菜單）、RibbonTab（選項(xiàng)卡）。在QuickAccessToolBar和RibbonTab子項(xiàng)內(nèi)，除了可以使用一般的WPF控件外，最常見的做法是在該控件的子項(xiàng)中包含Ribbon專用的子控件。2.1.1設(shè)計(jì)選項(xiàng)卡ShowQuickAccessToolBarOnTop屬性可控制快速訪問工具欄顯示的位置（控制顯示在功能區(qū)的上部還是下部）。RibbonApplicationMenu的Visibility屬性可控制菜單的可見形式（顯示、隱藏、折疊）。設(shè)置快速訪問工具欄作為窗口的標(biāo)題欄要將根元素（默認(rèn)是Window元素）改為RibbonWindow即可。這并不是必需的，開發(fā)人員可根據(jù)需要決定是否這樣做。2.1.1設(shè)計(jì)選項(xiàng)卡演示示例：設(shè)計(jì)Ribbon控件（具體實(shí)現(xiàn)課本P25）2.1.2在多個(gè)選項(xiàng)卡中重用選項(xiàng)要在Ribbon的多個(gè)選項(xiàng)卡中重復(fù)使用完全相同的選項(xiàng)，辦法是將這些選項(xiàng)設(shè)計(jì)為單獨(dú)的WPF用戶控件。具體做法在項(xiàng)目中添加一個(gè)WPF用戶控件首先修改為讓其繼承自RibbonTab將RibbonTab包含的項(xiàng)復(fù)制到該用戶控件中2.1.2在多個(gè)選項(xiàng)卡中重用選項(xiàng)例如：InkExamples項(xiàng)目中MyRibbonTab用戶控件部分XAML代碼<RibbonTab......d:DesignHeight="300"d:DesignWidth="300"><RibbonGroupHeader="墨跡工具"><RibbonRadioButtonLabel="球形曲線"IsChecked="True"/><RibbonRadioButtonLabel="矩形曲線"/></RibbonGroup><RibbonGroupHeader="編輯工具"><RibbonRadioButtonx:Name="rrbPen"Label="鋼筆"……/><RibbonRadioButtonLabel="套索"/></RibbonGroup></RibbonTab>2.1.2在多個(gè)選項(xiàng)卡中重用選項(xiàng)隱藏類代碼......publicpartialclassMyRibbonTab:RibbonTab{......}在Ribbon控件中如何使用MyRibbonTab用戶控件。<RibbonWindowx:Class="InkExamples.MainWindow"......xmlns:uc="clr-namespace:InkExamples.UserControls"......><Ribbonx:Name="ribbon"Grid.Row="0">.....<uc:MyRibbonTabx:Name="rt2"Header="例2"/>

.....</Ribbon></RibbonWindow>2.2WPF中的數(shù)字墨跡2.2.1墨跡畫板（InkCanvas）2.2.2觸筆和手勢(shì)2.2.3觸筆事件2.2.4墨跡筆畫（Stroke）和墨跡數(shù)據(jù)（StrokeCollection）2.2WPF中的數(shù)字墨跡數(shù)字墨跡是指用手指或觸筆在具有觸摸功能的屏幕表面劃動(dòng)時(shí)產(chǎn)生的動(dòng)態(tài)繪圖效果也可以在普通的臺(tái)式機(jī)上通過拖動(dòng)鼠標(biāo)來模擬手指或觸筆。WPF在System.Windows.Ink命名空間下提供了與數(shù)字墨跡相關(guān)的類2.2.1墨跡畫板（InkCanvas）InkCanvas控件在System.Windows.Controls命名空間下，實(shí)現(xiàn)墨跡的收集、復(fù)制、選擇、顯示和輸入等功能。利用InkCanvas，可以讓用戶修改或刪除現(xiàn)有的Stroke對(duì)象，同時(shí)還可以將其他控件添加到InkCanvas中。2.2.1墨跡畫板（InkCanvas）InkCanvas類的常用屬性如下1.DefaultDrawingAttributes屬性用于獲取或設(shè)置InkCanvas中新筆畫的繪制特性（DrawingAttributes對(duì)象）。該屬性的可選值有：Color（筆畫顏色）Width（觸筆寬度）Height（觸筆高度）StylusTip（觸筆形狀，圓形或者矩形）IsHighlighter（觸筆是否像熒光筆）FitToCurve（是否用貝塞爾曲線平滑法來呈現(xiàn)筆畫）IgnorePressure（筆畫粗細(xì)是否隨壓力自動(dòng)改變）。2.2.1墨跡畫板（InkCanvas）2．EditingMode屬性該屬性指定了觸筆、手指、鼠標(biāo)等設(shè)備與InkCanvas交互的模式屬性的值InkCanvasEditingMode枚舉來表示，默認(rèn)值為Ink?？蒊nk接收墨跡GestureOnly只響應(yīng)筆勢(shì)或手勢(shì)但不接收墨跡None不執(zhí)行任何操作Select用套索方式以及用觸筆與墨跡相交的方式選擇墨跡EraseByPoint當(dāng)觸筆與墨跡相交時(shí)清除相交處的墨跡EraseByStroke當(dāng)觸筆與墨跡相交時(shí)清除整個(gè)筆畫

。2.2.1墨跡畫板（InkCanvas）例2-1演示InkCanvas的基本用法。運(yùn)行效果如圖所示2.2.2觸筆和手勢(shì)1．觸筆（Stylus）觸筆（Stylus）類似于我們平時(shí)手寫用的筆，其用途是將筆和圖面接觸在一起繪制圖形或?qū)懽?。在智能手機(jī)、平板電腦以及車載導(dǎo)航儀上都有專用的觸筆。另外，在這些設(shè)備上，也都可以用手指來代替觸筆。對(duì)于臺(tái)式計(jì)算機(jī)來說，如果使用觸摸設(shè)備（觸摸屏），一樣可以用手指來代替觸筆。但是，由于大部分普通計(jì)算機(jī)的屏幕并沒有觸摸功能，所以只能用鼠標(biāo)來模擬。2.2.2觸筆和手勢(shì)2．手勢(shì)（Gesture）手勢(shì)表示用觸筆或手指在畫面上劃動(dòng)時(shí)產(chǎn)生的軌跡。其基本特征是：劃動(dòng)時(shí)既可以不顯示劃動(dòng)軌跡，也可以用墨跡顯示劃動(dòng)的軌跡，但是，一旦抬起觸筆或手指，劃動(dòng)時(shí)產(chǎn)生的墨跡就會(huì)自動(dòng)消失。目前的智能手機(jī)基本上都有手勢(shì)功能，而且可以用兩個(gè)手指同時(shí)向不同的方向劃動(dòng)。但是，用鼠標(biāo)來模擬手勢(shì)時(shí)，由于無法用一個(gè)鼠標(biāo)同時(shí)向不同的方向移動(dòng)，所以只能模擬單個(gè)手指劃動(dòng)時(shí)的手勢(shì)效果。2.2.2觸筆和手勢(shì)3．觸點(diǎn)（StylusPoint）觸點(diǎn)表示手指在圖面上劃動(dòng)或者按住鼠標(biāo)左鍵拖動(dòng)時(shí)收集到的數(shù)據(jù)點(diǎn)，有了這些數(shù)據(jù)點(diǎn)，就可以用它構(gòu)成墨跡筆畫（Stroke）。觸點(diǎn)用System.Windows.Ink命名空間下的StylusPoint結(jié)構(gòu)來表示，該結(jié)構(gòu)的屬性如下。X、Y：獲取或設(shè)置StylusPoint的X坐標(biāo)值或者Y坐標(biāo)值。PressureFactor屬性：獲取或設(shè)置觸筆施加于圖面設(shè)備的壓力大小Description屬性：指定StylusPoint中的StylusPointDescription包含哪些屬性。默認(rèn)情況下，所有StylusPoint對(duì)象均包含（x,y）坐標(biāo)以及觸點(diǎn)壓力屬性。2.2.2觸筆和手勢(shì)4．觸點(diǎn)壓力（PressureFactor）System.Windows.Ink命名空間下的PressureFactor類表示當(dāng)觸筆或手指按壓在圖面設(shè)備上時(shí)按壓力量的大小，簡(jiǎn)稱觸點(diǎn)壓力用鼠標(biāo)模擬時(shí)，可通過鼠標(biāo)移動(dòng)的快慢來表示，移動(dòng)越快，表示觸點(diǎn)壓力越??；移動(dòng)越慢，表示觸點(diǎn)壓力越大。觸點(diǎn)壓力最小為0.0，最大為1.0，默認(rèn)值為0.5。5．手寫識(shí)別手寫識(shí)別只是在數(shù)字墨跡的基礎(chǔ)上增加了文字識(shí)別技術(shù)，并將識(shí)別的文字自動(dòng)顯示出來供用戶選擇。由于這部分內(nèi)容超出了本書的范圍，因此不再介紹。2.2.3觸筆事件在所有WPF控件上，都可以用觸筆繪制，并引發(fā)相應(yīng)的觸筆事件。所有觸筆事件都有Stylus前綴。觸筆事件也都具有成對(duì)的“隧道/冒泡”事件，而且這些事件都始終在應(yīng)用程序線程上引發(fā)。當(dāng)用戶在任何一個(gè)WPF控件（或者叫元素）上用手指、觸筆或者拖動(dòng)鼠標(biāo)實(shí)現(xiàn)圖形繪制和平移時(shí)，如果屏幕有觸摸功能，都會(huì)引發(fā)該控件的觸筆事件。注意：對(duì)于InkCanvas控件來說，它還會(huì)自動(dòng)將鼠標(biāo)作為觸筆來處理。2.2.3觸筆事件1．常用事件（

InkCanvas為例）StylusDown事件：用戶在InkCanvas控件上用觸筆、手指與圖面接觸，或者按下鼠標(biāo)左鍵時(shí)，都會(huì)引發(fā)StylusDown事件?？梢栽诖耸录胁东@觸點(diǎn)集合（StylusPointCollection），剛按下時(shí)該集合中只有一個(gè)觸點(diǎn)。StylusMove事件：用戶在InkCanvas控件內(nèi)移動(dòng)觸筆或手指，或者按住鼠標(biāo)左鍵移動(dòng)鼠標(biāo)時(shí)，都會(huì)引發(fā)StylusMove事件。在移動(dòng)觸筆、手指或者鼠標(biāo)的過程中，可以持續(xù)獲得一系列觸點(diǎn)。StylusUp事件：用戶釋放鼠標(biāo)左鍵、拿開觸筆或者抬起手指時(shí)，都會(huì)引發(fā)StylusUp事件。2.2.3觸筆事件2．其他事件除了常用的觸筆事件外，還有一些觸筆事件，例如StylusEnter（觸筆進(jìn)入控件范圍內(nèi)時(shí)引發(fā)）StylusLeave（觸筆離開控件范圍內(nèi)時(shí)引發(fā)）StylusRange（觸筆懸停于此控件上方并位于圖面設(shè)備可檢測(cè)的范圍之內(nèi)時(shí)引發(fā)）StylusOutOfRange（觸筆懸停于此控件上方并位于圖面設(shè)備可檢測(cè)的范圍之外時(shí)引發(fā)）StylusInAirMove（在觸筆掠過控件但并未實(shí)際接觸圖面設(shè)備時(shí)引發(fā)）2.2.4墨跡筆畫（Stroke）和墨跡數(shù)據(jù)（StrokeCollection）筆畫觸筆（Stylus）在畫板上移動(dòng)時(shí)顯示的痕跡叫墨跡筆畫（Stroke），簡(jiǎn)稱筆畫。當(dāng)按住鼠標(biāo)左鍵拖動(dòng)時(shí)（模擬手指在觸摸屏、平板電腦、智能手機(jī)、導(dǎo)航儀等屏幕上劃動(dòng)），或者加載墨跡文件時(shí)，創(chuàng)建的筆畫用System.Windows.Ink命名空間下的Stroke對(duì)象來表示。注意使用時(shí)不要將筆畫（Stroke）和畫筆（Brush）混淆在一起。2.2.4墨跡筆畫（Stroke）和墨跡數(shù)據(jù)（StrokeCollection）1．Stroke對(duì)象Stroke對(duì)象的DrawingAttributes屬性用于獲取或設(shè)置筆畫的繪制特性。DrawingAttributes類該類用于指定Stroke的外觀。包括顏色、寬度、透明度、形狀等。Guid結(jié)構(gòu)全局唯一標(biāo)識(shí)符（GUID）是一個(gè)32位的十六進(jìn)制數(shù)（16個(gè)字節(jié)），繪制墨跡時(shí)，可用它表示唯一的墨跡ID。2.2.4墨跡筆畫（Stroke）和墨跡數(shù)據(jù)（StrokeCollection）用字符串表示Guid結(jié)構(gòu)時(shí)，一般用8-4-4-4-12的格式對(duì)其分組（每個(gè)字符表示一位十六進(jìn)制數(shù)，16個(gè)字節(jié)共32個(gè)字符），各組之間用連線符分隔。例如："00000001-0002-0003-0001-020304050607""ca761232-ed42-11ce-bacd-00aa0057b223""CA761232-ED42-11CE-BACD-00AA0057B223"Guid結(jié)構(gòu)有多種構(gòu)造函數(shù)，下面是其中的一種構(gòu)造函數(shù)語(yǔ)法。publicGuid(inta,//4字節(jié)shortb,//2字節(jié)shortc,//2字節(jié)byte[]d//8字節(jié)

)2.2.4墨跡筆畫（Stroke）和墨跡數(shù)據(jù)（StrokeCollection）構(gòu)造函數(shù)中參數(shù)a、b、c、d所占的字節(jié)數(shù)分別為：4、2、2、8例如： publicstaticinta=1; Guidid=newGuid(a++,2,3,newbyte[]{0,1,2,3,4,5,6,7}) strings=id.ToString();//首次調(diào)用結(jié)果為“00000001-0002- 0003-0001-020304050607”

publicstaticclass { publicstaticintId=0; publicstaticNewId(){returnId++;} }2.2.4墨跡筆畫（Stroke）和墨跡數(shù)據(jù)（StrokeCollection）注意如果隨機(jī)生成id，只需要用哈希函數(shù)或者Random類隨機(jī)生成每個(gè)值，然后判斷是否和已經(jīng)存在的id相同，如果相同，再次隨機(jī)生成。一般用Guid的靜態(tài)NewGuid方法自動(dòng)獲取新的GUID。例如：Guidid=Guid.NewGuid();這種方式能確保每次創(chuàng)建的id都不相同。這樣一來，繪圖時(shí)我們就不需要自己去創(chuàng)建和維護(hù)每個(gè)對(duì)象的ID號(hào)了。2.2.4墨跡筆畫（Stroke）和墨跡數(shù)據(jù)（StrokeCollection）2．StrokeCollection對(duì)象在WPF中，墨跡數(shù)據(jù)用墨跡集合（StrokeCollection對(duì)象）來表示該集合中的每個(gè)成員都是一個(gè)Stroke對(duì)象，而且每個(gè)Stroke對(duì)象都自動(dòng)擁有自己的生命周期。在InkCanvas類或者從該類繼承的類中，WPF會(huì)自動(dòng)將一組Stroke對(duì)象收集到一個(gè)StrokeCollection內(nèi)，并自動(dòng)提供常用的墨跡管理和操作方法（命中測(cè)試、擦除、轉(zhuǎn)換、序列化、保存、加載、復(fù)制、粘貼等）。直接用從InkCanvas繼承的類和StrokeCollection對(duì)象來實(shí)現(xiàn)墨跡的各種處理功能。2.3自定義墨跡畫板2.3.1靜態(tài)呈現(xiàn)和動(dòng)態(tài)呈現(xiàn)2.3.2制作自定義墨跡控件2.3.1靜態(tài)呈現(xiàn)和動(dòng)態(tài)呈現(xiàn)墨跡呈現(xiàn)方法：動(dòng)態(tài)和靜態(tài)。為了能繪制各種自定義的形狀，一般情況下，我們需要?jiǎng)?chuàng)建一個(gè)既能動(dòng)態(tài)呈現(xiàn)墨跡又能靜態(tài)呈現(xiàn)墨跡的自定義墨跡控件。2.3.1靜態(tài)呈現(xiàn)和動(dòng)態(tài)呈現(xiàn)1．靜態(tài)呈現(xiàn)靜態(tài)呈現(xiàn)是指將墨跡添加到控件之后再顯示墨跡。添加方式有：通過觸筆添加、從剪貼板中粘貼、從文件中加載靜態(tài)呈現(xiàn)墨跡的辦法是自定義從Stroke類繼承的類。由于Stroke對(duì)象會(huì)自動(dòng)收集StylusPoint數(shù)據(jù)、創(chuàng)建筆畫以及將筆畫添加到自定義的墨跡控件上，因此我們只需要在自定義的類中重寫引發(fā)觸筆事件的DrawCore方法，即可實(shí)現(xiàn)靜態(tài)呈現(xiàn)功能。其他引發(fā)觸筆事件的方法可以根據(jù)需要決定是否重寫。2.3.1靜態(tài)呈現(xiàn)和動(dòng)態(tài)呈現(xiàn)2．動(dòng)態(tài)呈現(xiàn)動(dòng)態(tài)呈現(xiàn)是指在移動(dòng)觸點(diǎn)的過程中同時(shí)呈現(xiàn)墨跡。在這種方式下，墨跡看上去好像是用觸筆畫出來的。動(dòng)態(tài)呈現(xiàn)墨跡的辦法：是將自定義墨跡控件的DynamicRenderer屬性設(shè)置為自定義的從DynamicRenderer類繼承的類。在自定義的類中，分別重寫引發(fā)觸筆事件的方法，常用的有OnStylusDown、OnStylusMove以及OnDraw等。其中OnDraw是必須重寫的方法，其他方法可以根據(jù)需要決定是否重寫。注意如果用鼠標(biāo)來模擬觸筆，動(dòng)態(tài)呈現(xiàn)時(shí)，它每次收集到的墨跡數(shù)據(jù)只有兩個(gè)點(diǎn)，注意這和靜態(tài)呈現(xiàn)時(shí)已經(jīng)有很多個(gè)點(diǎn)的情況完全不同。2.3.2制作自定義墨跡控件創(chuàng)建自定義墨跡畫板創(chuàng)建自定義墨跡畫板的辦法就是讓其繼承自InkCanvas類。一個(gè)InkCanvas可以具有一個(gè)或多個(gè)動(dòng)態(tài)呈現(xiàn)的對(duì)象（DynamicRenderer）。在自定義的墨跡畫板中，我們只需要將多個(gè)DynamicRenderer對(duì)象分別添加到StylusPlugIns屬性中，再將其賦值給DynamicRenderer屬性，即可將其添加到自定義的InkCanvas中DynamicRenderer對(duì)象是一個(gè)特殊的StylusPlugIns對(duì)象，在WPF應(yīng)用程序中，使用InkCanvas或者使用繼承自InkCanvas類的自定義墨跡控件，不需要顯式聲明StylusPlugIns，只需要設(shè)計(jì)從DynamicRenderer繼承的類，即可實(shí)現(xiàn)動(dòng)態(tài)的即時(shí)呈現(xiàn)。2.3.2制作自定義墨跡控件制作自定義墨跡畫板的主要設(shè)計(jì)步驟如下。創(chuàng)建一個(gè)從InkCanvas派生的類。將自定義的DynamicRenderer分配給InkCanvas.DynamicRenderer屬性。重寫OnStrokeCollected方法。在此方法中，移除已添加到InkCanvas中的原始筆畫，然后創(chuàng)建一個(gè)自定義筆畫，將其添加到Strokes屬性中。最后再使用包含該自定義筆畫的新InkCanvasStrokeCollectedEventArgs調(diào)用基類相應(yīng)的方法。2.4利用自定義墨跡畫板實(shí)現(xiàn)動(dòng)態(tài)繪圖2.4.1繪制球形2.4.2繪制球形序列2.4.3繪制矩形和矩形序列2.4.4繪制圖像和圖像序列2.4.5繪制漸變直線2.4.6繪制漸變曲線和文字2.4.7選擇、編輯、縮放與橡皮擦2.4.8保存和打開墨跡文件2.4.1繪制球形【例2-2】演示如何利用InkCanvas自定義墨跡畫板，并利用它繪制單個(gè)球形或圓環(huán)，運(yùn)行效果如圖2-3所示。圖2-3例2-2的運(yùn)行效果2.4.2繪制球形序列【例2-3】使用鼠標(biāo)拖動(dòng)的辦法，在自定義墨跡畫板中繪制任意數(shù)量的球形序列，或者用球形序列繪制單個(gè)大小固定的球形。程序運(yùn)行效果如圖2-4所示。圖2-4例2-3的運(yùn)行效果2.4.3繪制矩形和矩形序列【例2-4】使用鼠標(biāo)拖動(dòng)的辦法，在自定義墨跡畫板中繪制單個(gè)矩形和任意數(shù)量的矩形序列。運(yùn)行效果如圖2-5所示。圖2-5例2-4的運(yùn)行效果2.4.4繪制圖像和圖像序列【例2-5】使用鼠標(biāo)拖動(dòng)的辦法，在自定義墨跡畫板中繪制單個(gè)圖像和任意數(shù)量的圖像序列。運(yùn)行效果如圖2-6所示。圖2-6例2-5的運(yùn)行效果2.4.5繪制漸變直線【例2-6】使用鼠標(biāo)拖動(dòng)的辦法，在自定義墨跡畫板中繪制任意數(shù)量和方向的漸變直線。運(yùn)行效果如圖2-7所示。圖2-7例2-6的運(yùn)行效果2.4.6繪制漸變曲線和文字【例2-7】使用鼠標(biāo)拖動(dòng)的辦法，在自定義墨跡畫板中繪制純色或者漸變的曲線和文字。運(yùn)行效果如圖2-8所示。圖2-8例2-7的運(yùn)行效果2.4.7選擇、編輯、縮放與橡皮擦1．選擇、編輯、縮放當(dāng)利用【套索選擇】工具或者【全選】工具選擇墨跡后，可直接通過鼠標(biāo)移動(dòng)所選筆畫，或者通過鼠標(biāo)拖動(dòng)其周圍的控制點(diǎn)，編輯或縮放所選筆畫，圖2-9演示了套索選擇的范圍。圖2-9套索選擇2.4.7選擇、編輯、縮放與橡皮擦選擇了筆畫，即可對(duì)其縮放，圖2-10所示為套索選擇的對(duì)象縮小后的效果。圖2-10縮放套索選擇的筆畫2.4.7選擇、編輯、縮放與橡皮擦橡皮擦：既可以按照墨跡擦除筆畫中的一部分（或者利用它把一個(gè)墨跡分為幾部分），也可以一次性刪除所選的筆畫，圖2-11演示了墨跡擦除的效果圖2-11利用墨跡擦除將筆畫分為多個(gè)部分2.4.8保存和打開墨跡文件1．自定義墨