【C#】第3章补充（二）如何将图形作为对象

时间：2022-09-29 14:33:27

分类：C#、VS2015

创建日期：2016-06-23

使用教材：（十二五*规划教材）《C#程序设计及应用教程》（第3版）

一、要点

该例子属于高级技术中的基本用法。对于初学者来说这是难点（难在还没有学习第13章WPF相关的绘图技术），因此，这里的关键是理解设计思路，而不是一开始就陷于细节的实现上。或者说，一旦你掌握了这些基本的设计思路，就会极大地提高你对面向对象编程的理解。

用到的技术：封装、继承、多态。

本补充示例的运行效果：

【C#】第3章补充（二）如何将图形作为对象

二、设计步骤

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"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="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#面向对象编程的理解有一个大的飞跃。

在此基础上，你就可以继续学习复杂的例子了。实际上，任何内容都可以通过拖放绘制出来，包括视频。

三、高级用法

下面的截图演示了高级用法示例的运行效果（选择某种绘图类型以及其他选项后，按住鼠标左键随意拖放即可）：

【C#】第3章补充（二）如何将图形作为对象

该例子更接近于实际项目，虽然例子看起来好像很复杂，但是基本的设计思路还是这个简单例子的思路，只不过是在简单例子基础上多添加了一些类而已。

这里顺便解释一下，类似Office的工具箱界面是如何实现的（用到了Ribbon控件）：

（1）鼠标右击【引用】->【添加引用】，然后按下图所示添加Ribbon引用。

【C#】第3章补充（二）如何将图形作为对象

（2）在项目中添加一个Windows窗体，然后就可以在该窗体中使用Ribbon控件设计工具箱的内容了。下面是高级例子对应的XAML代码（为了方便快速理解，这里去掉了重复的内容，仅列出了其中的一部分代码）：

<Window x:Class="WpfExamples.ch03.Ex02.WpfAdvanceDemo3.Demo3MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="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。

相关文章