WPF程序使用矢量图资源绘制井口装置图

一、简介

石油行业软件开发中需要使用大量的不同类型的图件,由于具体项目需求多变,很难找到完全符合项目需要的图件库。在之前的项目中曾经使用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