分类：C#、VS2015
创建日期：2016-06-23
使用教材：（十二五国家级规划教材）《C#程序设计及应用教程》（第3版）
一、要点
该例子属于高级技术中的基本用法。对于初学者来说这是难点（难在还没有学习第13章WPF相关的绘图技术），因此，这里的关键是理解设计思路，而不是一开始就陷于细节的实现上。或者说，一旦你掌握了这些基本的设计思路，就会极大地提高你对面向对象编程的理解。
用到的技术：封装、继承、多态。
本补充示例的运行效果：
二、设计步骤
1、新建项目
项目名：WpfAdvanceDemo2
模板：WPF应用程序项目。
2、添加W0_DrawObject.cs文件
鼠标右击解决方案资源管理器中的项目名，选择【添加】->【类】，输入文件名W0_DrawObject.cs，然后将代码改为下面的内容：
using System;using System.Windows;using System.Windows.Controls;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Input.StylusPlugIns;using System.Windows.Media;namespace WpfAdvanceDemo2{ public abstract class W0_DrawObject : DynamicRenderer { protected Point previousPoint; public MyInkCanvas myInkCanvas { get; private set; } public DrawObjectStroke InkStroke { get; protected set; } public DrawingAttributes inkDA { get; set; } public abstract void CreateNewStroke(InkCanvasStrokeCollectedEventArgs e); public abstract Point Draw(Point first, DrawingContext dc, StylusPointCollection points); [ThreadStatic] protected Brush brush = Brushes.Gray; public W0_DrawObject(MyInkCanvas myInkCanvas) { this.myInkCanvas = myInkCanvas; this.inkDA = myInkCanvas.inkDA.Clone(); this.DrawingAttributes = inkDA; } protected override void OnStylusDown(RawStylusInput rawStylusInput) { inkDA = myInkCanvas.inkDA.Clone(); this.DrawingAttributes = inkDA; previousPoint = new Point(double.NegativeInfinity, double.NegativeInfinity); base.OnStylusDown(rawStylusInput); } protected override void OnStylusUp(RawStylusInput rawStylusInput) { base.OnStylusUp(rawStylusInput); this.InkStroke = null; } } public class DrawObjectStroke : Stroke { protected W0_DrawObject ink; public DrawObjectStroke(W0_DrawObject ink, StylusPointCollection stylusPoints) : base(stylusPoints) { this.ink = ink; this.DrawingAttributes = ink.inkDA.Clone(); this.DrawingAttributes.Color = Colors.Transparent; } protected virtual void RemoveDirtyStylusPoints() { if (StylusPoints.Count > 2) { for (int i = StylusPoints.Count - 2; i > 0; i--) { StylusPoints.RemoveAt(i); } } } }}3、添加W1_DrawRectangle.cs文件
鼠标右击解决方案资源管理器中的项目名，选择【添加】->【类】，输入文件名W1_DrawRectangle.cs，然后将代码改为下面的内容：
using System.Linq;using System.Windows;using System.Windows.Controls;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Input.StylusPlugIns;using System.Windows.Media;namespace WpfAdvanceDemo2{ public class W1_DrawRectangle : W0_DrawObject { public W1_DrawRectangle(MyInkCanvas myInkCanvas) : base(myInkCanvas) { } public override void CreateNewStroke(InkCanvasStrokeCollectedEventArgs e) { InkStroke = new DrawRectangleStroke(this, e.Stroke.StylusPoints); } public override Point Draw(Point first, DrawingContext dc, StylusPointCollection points) { Point pt = (Point)points.Last(); Vector v = Point.Subtract(pt, first); if (v.Length > 4) { Rect rect = new Rect(first, v); //填充 var b = new RadialGradientBrush(Colors.White, Colors.Red); dc.DrawRectangle(b, null, rect); //画轮廓 Pen pen = new Pen(Brushes.DarkRed, 1.0); dc.DrawRectangle(null, pen, rect); } return first; } protected override void OnStylusDown(RawStylusInput rawStylusInput) { base.OnStylusDown(rawStylusInput); previousPoint = (Point)rawStylusInput.GetStylusPoints().First(); } protected override void OnStylusMove(RawStylusInput rawStylusInput) { StylusPointCollection stylusPoints = rawStylusInput.GetStylusPoints(); this.Reset(Stylus.CurrentStylusDevice, stylusPoints); base.OnStylusMove(rawStylusInput); } protected override void OnDraw(DrawingContext drawingContext, StylusPointCollection stylusPoints, Geometry geometry, Brush fillBrush) { Draw(previousPoint, drawingContext, stylusPoints); base.OnDraw(drawingContext, stylusPoints, geometry, brush); } } public class DrawRectangleStroke : DrawObjectStroke { public DrawRectangleStroke(W1_DrawRectangle ink, StylusPointCollection stylusPoints) : base(ink, stylusPoints) { this.RemoveDirtyStylusPoints(); } protected override void DrawCore(DrawingContext drawingContext, DrawingAttributes drawingAttributes) { base.DrawCore(drawingContext, drawingAttributes); Point pt1 = (Point)StylusPoints.First(); ink.Draw(pt1, drawingContext, StylusPoints); } }}4、添加W2_DrawEllipse.cs文件
鼠标右击解决方案资源管理器中的项目名，选择【添加】->【类】，输入文件名W2_DrawEllipse.cs，然后将代码改为下面的内容：
using System.Linq;using System.Windows;using System.Windows.Controls;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Input.StylusPlugIns;using System.Windows.Media;namespace WpfAdvanceDemo2{ public class W2_DrawEllipse : W0_DrawObject { public W2_DrawEllipse(MyInkCanvas myInkCanvas) : base(myInkCanvas) { } public override void CreateNewStroke(InkCanvasStrokeCollectedEventArgs e) { InkStroke = new DrawEllipseStroke(this, e.Stroke.StylusPoints); } public override Point Draw(Point first, DrawingContext dc, StylusPointCollection points) { Point pt = (Point)points.Last(); Vector v = Point.Subtract(pt, first); double radiusX = (pt.X - first.X) / 2.0; double radiusY = (pt.Y - first.Y) / 2.0; Point center = new Point((pt.X + first.X) / 2.0, (pt.Y + first.Y) / 2.0); //填充 var b = new RadialGradientBrush(Colors.White, Colors.Red); dc.DrawEllipse(b, null, center, radiusX, radiusY); //画轮廓 Pen pen = new Pen(Brushes.DarkRed, 1.0); dc.DrawEllipse(null, pen, center, radiusX, radiusY); return first; } protected override void OnStylusDown(RawStylusInput rawStylusInput) { base.OnStylusDown(rawStylusInput); previousPoint = (Point)rawStylusInput.GetStylusPoints().First(); } protected override void OnStylusMove(RawStylusInput rawStylusInput) { StylusPointCollection stylusPoints = rawStylusInput.GetStylusPoints(); this.Reset(Stylus.CurrentStylusDevice, stylusPoints); base.OnStylusMove(rawStylusInput); } protected override void OnDraw(DrawingContext drawingContext, StylusPointCollection stylusPoints, Geometry geometry, Brush fillBrush) { Draw(previousPoint, drawingContext, stylusPoints); base.OnDraw(drawingContext, stylusPoints, geometry, brush); } } public class DrawEllipseStroke : DrawObjectStroke { public DrawEllipseStroke(W2_DrawEllipse ink, StylusPointCollection stylusPoints) : base(ink, stylusPoints) { this.RemoveDirtyStylusPoints(); } protected override void DrawCore(DrawingContext drawingContext, DrawingAttributes drawingAttributes) { base.DrawCore(drawingContext, drawingAttributes); Point pt1 = (Point)StylusPoints.First(); ink.Draw(pt1, drawingContext, StylusPoints); } }}5、添加W3_DrawCurve.cs文件
鼠标右击解决方案资源管理器中的项目名，选择【添加】->【类】，输入文件名W3_DrawCurve.cs，然后将代码改为下面的内容：
using System.Windows;using System.Windows.Controls;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;namespace WpfAdvanceDemo2{ public class W3_DrawCurve : W0_DrawObject { public W3_DrawCurve(MyInkCanvas myInkCanvas) : base(myInkCanvas) { } public override void CreateNewStroke(InkCanvasStrokeCollectedEventArgs e) { InkStroke = new DrawCurveStroke(this, e.Stroke.StylusPoints); } public override Point Draw(Point first, DrawingContext dc, StylusPointCollection points) { return first; } protected override void OnDraw(DrawingContext drawingContext, StylusPointCollection stylusPoints, Geometry geometry, Brush fillBrush) { base.OnDraw(drawingContext, stylusPoints, geometry, Brushes.Black); } } public class DrawCurveStroke : DrawObjectStroke { public DrawCurveStroke(W0_DrawObject ink, StylusPointCollection stylusPoints) : base(ink, stylusPoints) { this.DrawingAttributes.FitToCurve = true; } protected override void DrawCore(DrawingContext drawingContext, DrawingAttributes drawingAttributes) { base.DrawCore(drawingContext, drawingAttributes); Geometry geometry = this.GetGeometry(); drawingContext.DrawGeometry(Brushes.Black, null, geometry); } }}6、添加MyInkCanvas.cs文件
鼠标右击解决方案资源管理器中的项目名，选择【添加】->【类】，输入文件名MyInkCanvas.cs，然后将代码改为下面的内容：
using System.Windows.Controls;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;namespace WpfAdvanceDemo2{ public class MyInkCanvas : InkCanvas { private W0_DrawObject ink; public DrawingAttributes inkDA { get; private set; } public MyInkCanvas() { inkDA = new DrawingAttributes() { Color = Colors.Red, Width = 15, Height = 15, StylusTip = StylusTip.Rectangle, IgnorePressure = true, FitToCurve = false }; this.DefaultDrawingAttributes = inkDA; ink = new W1_DrawRectangle(this); UpdateInkParams(); } /// <summary>当收集墨迹时，会自动调用此方法</summary> protected override void OnStrokeCollected(InkCanvasStrokeCollectedEventArgs e) { this.Strokes.Remove(e.Stroke); ink.CreateNewStroke(e); this.Strokes.Add(ink.InkStroke); InkCanvasStrokeCollectedEventArgs args = new InkCanvasStrokeCollectedEventArgs(ink.InkStroke); base.OnStrokeCollected(args); } /// <summary>初始化墨迹参数</summary> public void SetInkAttributes(string name) { switch (name) { //---------------墨迹类型--------------------- case "矩形": ink = new W1_DrawRectangle(this); inkDA.Width = inkDA.Height = 15; inkDA.StylusTip = StylusTip.Rectangle; this.UseCustomCursor = false; break; case "球形": ink = new W2_DrawEllipse(this); inkDA.Width = inkDA.Height = 15; inkDA.StylusTip = StylusTip.Ellipse; this.UseCustomCursor = false; break; case "毛笔": ink = new W3_DrawCurve(this); inkDA.Width = inkDA.Height = 10; this.Cursor = Cursors.Pen; this.UseCustomCursor = true; break; } UpdateInkParams(); } /// <summary> /// 根据墨迹类型和笔尖信息，设置MyInkCanvas中的相关参数 /// </summary> private void UpdateInkParams() { this.DynamicRenderer = ink; this.EditingMode = InkCanvasEditingMode.Ink; } }}7、修改MainWindow.xaml文件
将其改为下面的内容。
<Window x:Class="WpfAdvanceDemo2.MainWindow" ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ="http://schemas.microsoft.com/winfx/2006/xaml" ="http://schemas.microsoft.com/expression/blend/2008" ="http://schemas.open ="clr-namespace:WpfAdvanceDemo2" mc:Ignorable="d" Title="将图形作为对象--简单示例(http://cnblogs.com/rainmj)" Height="400" Width="700" WindowStartupLocation="CenterScreen" Background="#FFE4EEDE"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*"/> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <StackPanel Grid.Row="0"> <TextBlock Text="提示：选择一种绘制类型，然后在绘图框区域内按住鼠标左键拖动绘制。" Margin="0 20" FontSize="16" Foreground="Blue" VerticalAlignment="Center" HorizontalAlignment="Center"/> <Separator/> <WrapPanel ButtonBase.Click="RadioButton_Click" Margin="0 10 0 0"> <TextBlock Text="绘制类型：" VerticalAlignment="Center"/> <RadioButton Content="矩形" IsChecked="True" Margin="5"/> <RadioButton Content="球形" Margin="5"/> <RadioButton Content="毛笔" Margin="5"/> </WrapPanel> </StackPanel> <Frame Name="frame1" Grid.Row="1" Margin="10" BorderThickness="1" BorderBrush="Blue" NavigationUIVisibility="Hidden" /> <TextBlock Grid.Row="2" Text="（完整例子在【网络应用编程】课程中还会介绍，该例子仅演示了最基本的用法）" Margin="0 0 0 5" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid></Window>
8、修改MainWindow.xaml.cs文件
将其改为下面的内容。
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Shapes;namespace WpfAdvanceDemo2{ /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { MyInkCanvas mycanvas; public MainWindow() { InitializeComponent(); mycanvas = new MyInkCanvas(); frame1.Content = mycanvas; } private void RadioButton_Click(object sender, RoutedEventArgs e) { string s = (e.Source as RadioButton).Content.ToString(); mycanvas.SetInkAttributes(s); } }}9、运行
按<F5>键调试运行。
OK，这个例子虽然简单，但是却演示了封装、继承、多态在实际项目中的基本应用设计思路。请耐着性子仔细分析该例子的源代码，相信你掌握设计思路和技巧后一定会对C#面向对象编程的理解有一个大的飞跃。
在此基础上，你就可以继续学习复杂的例子了。实际上，任何内容都可以通过拖放绘制出来，包括视频。
三、高级用法
下面的截图演示了高级用法示例的运行效果（选择某种绘图类型以及其他选项后，按住鼠标左键随意拖放即可）：
该例子更接近于实际项目，虽然例子看起来好像很复杂，但是基本的设计思路还是这个简单例子的思路，只不过是在简单例子基础上多添加了一些类而已。
这里顺便解释一下，类似Office的工具箱界面是如何实现的（用到了Ribbon控件）：
（1）鼠标右击【引用】->【添加引用】，然后按下图所示添加Ribbon引用。
（2）在项目中添加一个Windows窗体，然后就可以在该窗体中使用Ribbon控件设计工具箱的内容了。下面是高级例子对应的XAML代码（为了方便快速理解，这里去掉了重复的内容，仅列出了其中的一部分代码）：
<Window x:Class="WpfExamples.ch03.Ex02.WpfAdvanceDemo3.Demo3MainWindow" ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ="http://schemas.microsoft.com/winfx/2006/xaml" ="http://schemas.microsoft.com/expression/blend/2008" ="http://schemas.open ="clr-namespace:WpfExamples.ch03.Ex02.WpfAdvanceDemo3" mc:Ignorable="d" Title="将图形图像作为对象--高级功能" Height="460" Width="980" Background="#FFF0F9D8" WindowState="Maximized"> <Grid x:Name="root"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Ribbon Name="ribbon" Grid.Row="0"> <Ribbon.Resources> <Style TargetType="RibbonRadioButton"> <Setter Property="LargeImageSource" Value="/Resources/Images/b1.png"/> <Setter Property="SmallImageSource" Value="/Resources/Images/b1.gif"/> <Setter Property="CornerRadius" Value="13"/> <Setter Property="Margin" Value="5 0 0 0"/> <EventSetter Event="Checked" Handler="RibbonRadioButton_Checked"/> </Style> </Ribbon.Resources> <Ribbon.ApplicationMenu> <RibbonApplicationMenu Name="appMenu1" ToolTip="主菜单"> <RibbonApplicationMenu.Resources> <Style TargetType="RibbonApplicationMenuItem"> <Setter Property="ImageSource" Value="/Resources/Images/b1.gif"/> <EventSetter Event="Click" Handler="RibbonApplicationMenuItem_Click"/> </Style> </RibbonApplicationMenu.Resources> <RibbonApplicationMenuItem Header="打开"/> <RibbonApplicationMenuItem Header="另存为"/> <RibbonSeparator/> <RibbonApplicationMenuItem Header="退出"/> </RibbonApplicationMenu> </Ribbon.ApplicationMenu> <RibbonTab Name="rt1" Header="工具箱"> <RibbonGroup Header="墨迹类型"> <RibbonGroup.GroupSizeDefinitions> <RibbonGroupSizeDefinition> <RibbonControlSizeDefinition ImageSize="Small"/> <RibbonControlSizeDefinition ImageSize="Small"/> ......（略，内容都一样，个数与下面的RibbonRadioButton个数对应即可） </RibbonGroupSizeDefinition> </RibbonGroup.GroupSizeDefinitions> <RibbonRadioButton x:Name="rrbEllipseType" Label="球形" IsChecked="True"/> <RibbonRadioButton Label="矩形"/> <RibbonRadioButton Label="图像"/> <RibbonRadioButton Label="球形序列"/> <RibbonRadioButton Label="矩形序列"/> <RibbonRadioButton Label="图像序列"/> <RibbonRadioButton Label="直线"/> <RibbonRadioButton Label="曲线"/> <RibbonRadioButton Label="文字"/> </RibbonGroup> <RibbonGroup Header="笔尖类型"> <RibbonRadioButton x:Name="rrbEllipseStylus" Label="圆笔" IsChecked="True" GroupName="edit" /> <RibbonRadioButton Label="竖笔" GroupName="edit"/> <RibbonRadioButton Label="横笔" GroupName="edit"/> <RibbonRadioButton Label="钢笔" GroupName="edit"/> </RibbonGroup> .....(后面的代码和前面类似，不再列出了) </RibbonTab> </Ribbon> <Grid x:Name="grid1" Margin="10" Grid.Row="1" Visibility="Visible"> <Rectangle Grid.ColumnSpan="2" Fill="white" RadiusX="14" RadiusY="14" Stroke="Blue" StrokeDashArray="3" /> <local:MyInkCanvas x:Name="ink1"/> </Grid> </Grid></Window>
注意：练习时要一行一行的敲，不要用复制粘贴的办法，否则系统不会自动在后台代码（代码隐藏类）中添加对应的事件处理程序。
在后续的章节中，我们还会学习该高级例子涉及的更多概念（比如利用序列化和反序列化将绘图结果保存到文件中，并将序列化后的结果读取出来还原为截图中的各个绘图对象等）。这里暂不列出高级例子的设计步骤，准备等后续章节把相关的概念介绍完毕后，再学习高级例子的源代码也不晚。
说明：这些例子全部都是本人原创的，转载请注明出处：http://cnblogs.com/rainmj。
原标题：【C#】第3章补充（二）如何将图形作为对象
关键词：C#
我知道了 