一、简介
石油行业软件开发中需要使用大量的不同类型的图件,由于具体项目需求多变,很难找到完全符合项目需要的图件库。在之前的项目中曾经使用GDI技术开发了一套基础绘图框架，实现代码量很大，绘制效果比较简陋。而WPF技术支持使用矢量图资源绘制，我们可以通过使用专业的矢量图工具软件，设计精美的矢量图资源，使用这些资源来绘制图形。实现简单，代码量小，可灵活组合，生成不同类型的图元库。
二、矢量图元资源制作
矢量图元工具种类繁多，我这里使用CorelDRAW X8软件。
打开软件，新建一个图片文件。
添加矩形
使用交互式填充工具，填充渐变颜色
点击右上方“重复和镜像”，实现仿立体的渐变效果。
使用类似的方式，组合设计井口装置不同类型图元
套管头
四通
单闸板分割器
双闸板分割器
所有的图元设计完成后，为了能在WPF中使用还需要转换成微软提供的xaml矢量图格式。
把图元导出成“.emf”格式文件。
使用微软的Microsoft Expression Design工具，导入EMF文件，转换导出成.xaml格式的资源文件。
也可以使用其它第三方软件进行转换，网上也有免费在线转换URL，可在线转换。
三、WPF绘图库设计
Win32、WinFormsGDI是当今Window桌面应用程序的主流图形库，GDI图形系统已经形成了很多年。它提供了2D图形和文本功能，以及受限的图像处理功能。在WPF中，引入一种新的图形合成引擎。可以提供更高丰富的图形显式合成，而且不会有任何的窗口闪烁问题。这种新的显式提交引擎与传统的Win32、Windows Forms相比主要有两个优点： 1、所有的每个窗口元素都可以任意的交替重叠。 2、所有的合成操作都是Direct3D中的离屏表面（Off-screen Surface）中实现的。
(一) 画布面板类（DrawingCanvas）：支持从Canvas对象继承，内部有VisualCollection集合用来记录画布面板里包含的图元对象。
功能包括：图元对象组织、图元添加和删除、图元对象排序（图层，上下排序）、画布缩放、鼠标事件代理（图元选择、图元右键菜单等）、绘图对象属性设置（字体、画笔、大小、位置等相关数据），图元对象绘图工具集合、命令模式封装实现（图元编辑的撤销操作）等。
public class DrawingCanvas : Canvas { #region Class Members // Collection contains instances of GraphicsBase-derived classes. private VisualCollection graphicsList; // Dependency properties public static readonly DependencyProperty ToolProperty; public static readonly DependencyProperty ActualScaleProperty; public static readonly DependencyProperty IsDirtyProperty; public static readonly DependencyProperty LineWidthProperty; public static readonly DependencyProperty ObjectColorProperty; public static readonly DependencyProperty TextFontFamilyNameProperty; public static readonly DependencyProperty TextFontStyleProperty; public static readonly DependencyProperty TextFontWeightProperty; public static readonly DependencyProperty TextFontStretchProperty; public static readonly DependencyProperty TextFontSizeProperty; public static readonly DependencyProperty CanUndoProperty; public static readonly DependencyProperty CanRedoProperty; public static readonly DependencyProperty CanSelectAllProperty; public static readonly DependencyProperty CanUnselectAllProperty; public static readonly DependencyProperty CanDeleteProperty; public static readonly DependencyProperty CanDeleteAllProperty; public static readonly DependencyProperty CanMoveToFrontProperty; public static readonly DependencyProperty CanMoveToBackProperty; public static readonly DependencyProperty CanSetPropertiesProperty; public static readonly RoutedEvent IsDirtyChangedEvent; private Tool[] tools; // Array of tools ToolText toolText; ToolPointer toolPointer; private ContextMenu contextMenu; private UndoManager undoManager; public DrawingCanvas() : base() { graphicsList = new VisualCollection(this); CreateContextMenu(); this.FocusVisualStyle = null; this.Loaded += new RoutedEventHandler(DrawingCanvas_Loaded); this.MouseDown += new MouseButtonEventHandler(DrawingCanvas_MouseDown); this.MouseMove += new MouseEventHandler(DrawingCanvas_MouseMove); this.MouseUp += new MouseButtonEventHandler(DrawingCanvas_MouseUp); this.KeyDown += new KeyEventHandler(DrawingCanvas_KeyDown); this.LostMouseCapture += new MouseEventHandler(DrawingCanvas_LostMouseCapture);}
(一) 基本图元对象GraphicsBase：这是个抽象类，从DrawingVisual对象继承。DrawingVisual对象是WPF绘图系统提供的轻量级高性能的绘图类。
Visual 类的层次结构如下：
DrawingVisual 继承自Visual，是一个用于呈现形状、图像或文本的轻量绘图类。 此类之所以被视为轻量，是因为它不提供布局或事件处理功能，从而能够改善运行时性能。 因此，绘图最适于背景和剪贴画。
图元对象中定义最重要的虚方法使用DrawingContext对象绘制图元，我们扩展图元绘制的逻辑是在这里来实现的
public abstract class GraphicsBase : DrawingVisual public virtual void Draw(DrawingContext drawingContext) { } //接下来，定义不同类型的图元类： //直线 public class GraphicsLine : GraphicsBase //圆形 public class GraphicsEllipse : GraphicsRectangleBase //矩形抽象类 public abstract class GraphicsRectangleBase : GraphicsBase //多边形 public class GraphicsPolyLine : GraphicsBase //不同的图元通过重写Draw虚方法来，实现不同的绘制方法 //直线绘制： public override void Draw(DrawingContext drawingContext) { if ( drawingContext == null ) { throw new ArgumentNullException("drawingContext"); } drawingContext.DrawLine( new Pen(new SolidColorBrush(ObjectColor), ActualLineWidth), lineStart, lineEnd); base.Draw(drawingContext); } //圆形绘制： public override void Draw(DrawingContext drawingContext) { if ( drawingContext == null ) { throw new ArgumentNullException("drawingContext"); } Rect r = Rectangle; Point center = new Point( (r.Left + r.Right) / 2.0, (r.Top + r.Bottom) / 2.0); double radiusX = (r.Right - r.Left) / 2.0; double radiusY = (r.Bottom - r.Top) / 2.0; drawingContext.DrawEllipse( null, new Pen(new SolidColorBrush(ObjectColor), ActualLineWidth), center, radiusX, radiusY); }
(三) 基于矢量图资源的井口装置图图元绘制
我们可扩展矩形绘图图元，使其支持矢量图绘制功能，来实现绘制井口装置图。
具体做法是，不绘制矩形边线，使用矢量图资源当作背景，来绘制矩形图元。
1) 把xaml格式的矢量图图元文件以“content”的形式引入项目中
1) 把文件添加到项目App.xaml文件,添加到Application Resources字典里
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://siteoforigin:,,,/../3.xaml" /> <ResourceDictionary Source="pack://siteoforigin:,,,/../st.xaml" /> <ResourceDictionary Source="pack://siteoforigin:,,,/../hx.xaml" /> <ResourceDictionary Source="pack://siteoforigin:,,,/../dzb.xaml" /> <ResourceDictionary Source="pack://siteoforigin:,,,/../szb.xaml" /> <ResourceDictionary Source="pack://siteoforigin:,,,/../jk.xaml" /> <ResourceDictionary Source="pack://siteoforigin:,,,/../tgt.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>
2) 重新Draw方法，使用矢量图资源绘制图元
public override void Draw(DrawingContext drawingContext) { if (drawingContext == null) { throw new ArgumentNullException("drawingContext"); } DrawingBrush background = null; //获取井口矢量图图元 background = Application.Current.FindResource("jk") as DrawingBrush; //绘制图元 drawingContext.DrawRectangle( background, new Pen(Brushes.Transparent, 0), Rectangle); //drawingContext.DrawText() base.Draw(drawingContext); }
四、示例介绍
我简单实现了个示例来展示井口装置图绘制
单击上面井口装置图标，添加所对应的装置到当前画板。
可选中图标，可缩放调节宽高，拖拽移动等。
调整宽度组合图元，来实现井口装置图，还可以在任意位置添加文本，线端等其它图元。
可保存绘图到xml文件中。
转自：https://zhuanlan.zhihu.com/p/37167062