canvas教程

基于WPF的交互式绘图系统的开发

字号+ 作者:H5之家 来源:H5之家 2017-09-18 08:00 我要评论( )

开发了一个VS2008环境下,基于WPF平台的交互式绘图系统。该系统利用计算机图形学的基本原理、图论知识和Windows表现层基础类库,实现了基本图形元素的绘制、编辑

摘  要: 开发了一个VS2008环境下,基于WPF平台的交互式绘图系统。该系统利用计算机图形学的基本原理、图论知识和Windows表现层基础类库,实现了基本图形元素的绘制、编辑与修改,以及图形文件的打开、保存、打印等操作,并提供了自定义的图形数据文件格式与DXF格式相互转换的功能。
关键词: 图形; WPF; 系统

    交互式绘图系统是指能为用户提供交互式操作支持,使用户通过鼠标、键盘和手写笔等在图形终端上输入数据和图形信息,进行绘图,并对生成的图形进行修改、编辑等操作,设计完成后,保存设计结果,最终在显示屏或其他外部设备上进行图形输出的一整套设计及其应用软件,在CAD、办公自动化和其他领域得到了非常广泛的应用。现有绘图软件绘制复杂图形时会占用大量CPU,消耗大量内存,从而导致界面失去响应。WPF是一个新的编程模型,与传统GDI/GDI+绘图模型相比,WPF将CPU和GPU分开来利用,由于GPU的浮点计算能力远高于CPU,从而保证了大量计算的优先性,同时也能最小化CPU 使用率。WPF以DirectX作为核心绘图函数,DirectX绘图速度高于GDI/GDI+,能产生更好的视觉效果。对于需要大量浮点运算的图形图像来说, WPF是一个很好的选择。本文介绍了在VS2008环境下,以WPF为平台,用C#编写开发的一个交互式图形系统。
1交互式绘图系统的设计
1.1 系统的功能设计
    基于WPF的交互式绘图系统主要由输入单元、基本绘图单元、图元编辑单元、图元修改单元、属性设置单元、输出单元组成。系统模块结构图如图1所示。

    本系统实现了以下功能:
    (1)基本图形元素(点、直线、折线、圆形、圆弧、椭圆、矩形、多边形、B样条、闭合B样条)以及文本的动态绘制与生成功能;
    (2)编辑修改功能:对象的拾取、删除、复制、镜像、阵列、移动、旋转、填充、裁剪,平移缩放视图,测量封闭区域的面积;
    (3)属性的设置:包括对图元的图层、线型、线宽、颜色;系统的背景色,文字的高度等属性进行设置;
    (4)图形数据文件的读取、保存、打印等操作。
1.2 开发平台的选择
    目前Windows环境下的图形程序接口主要有GDI/GDI+、Direct3D、OpenGL、WPF四种。GDI/GDI+通常是一个静态的显示系统,只有有限的动画支持,此外GDI/GDI+只支持二维图形开发。OpenGL是一个开放的三维图形软件包,由于它是图形的底层图形库,没有提供几何实体图元,不能直接用以描述场景。Direct3D以COM接口形式提供,所以较为复杂,稳定性差。WPF是微软新一代图形系统,运行在.NET Framework 3.0架构下。WPF 的核心是一个与分辨率无关并且基于向量的呈现引擎,旨在利用现代图形硬件的优势来最小化 CPU 使用率。在WPF中,底层的图形技术不再是GDI/GDI+,而是DirectX。
    WPF在图形与界面开发方面,主要有以下几个优势[1]:
    (1)丰富的绘图模型与文本模型。不同于以往的逐个像素的绘制,在WPF中可以直接处理基本形状、文本框以及其他UI元素。
    (2)独立的图形解析。WPF 图形系统的基本度量单位是与设备无关的像素,它等于1英寸的 1/96。不管实际的屏幕分辨率是多少,每个与设备无关的像素都会自动缩放,以符合呈现该像素的系统上的每英寸点数 (dpi) 设置。
2交互式绘图系统的实现
2.1 系统的功能界面
    交互式绘图系统的界面窗口主要由标题栏、菜单栏、工具栏、绘图区、工具箱、消息框和状态栏组成,如图2所示。

2.2 系统的功能实现
2.2.1 系统的窗口框架
 WPF包含两个相互关联的编程接口,通常使用可扩展应用程序标记语言 (XAML) 标记实现应用程序的外观,而使用托管编程语言(代码隐藏)实现其行为。WPF中的Menu控件、ToolBar控件、StatusBar控件、GroupBox控件、TextBox控件以及Canvas面板[2]分别构成了应用程序主窗口顶端的菜单栏、工具栏、底端的状态栏与客户区左边的工具箱、下方的消息框以及绘图区。系统使用鼠标和键盘输入来绘制图形,Canvas 面板是用于创建复杂绘图的特别理想的选择,因为它支持对其子对象的绝对定位。框架窗口的逻辑树简图如图3所示。  

2.2.2 图形的绘制与编辑功能
    WPF提供了Shapes库来显示矢量图,WPF中的基本图形类主要位于System.Windows.Shapes命名空间。Shape类是所有图形类的基类,它定义了Stroke、StrokeThickness、Fill等通用属性,用来绘制形状轮廓的颜色、粗细以及形状的内部填充。具体的图形元素类(Line、Path、Polygon、Polyline、Ellipse、Rectangle)都由其派生而来。2D相关类型的层次结构图如图4所示。

    Canvas 是顶级布局控件,Canvas面板类似传统的图形环境,利用坐标位置指定对象的摆放地点。Canvas的左上角为原点,X坐标向右,Y坐标向下。而一般的图形系统的坐标原点设定在绘图区的左下角,X坐标水平向右,Y坐标竖直向上,因此可利用WPF的Transform类,通过设定Canvas的RenderTransform来实现[3]。为了使图元大小根据窗口的大小进行缩放,可以将Canvas放在Viewbox内。以下是实现坐标变换的XAML片段:
    <Viewbox>
     <Canvas RenderTransformOrigin="0.5,0.5">
        <Canvas.RenderTransform>
  <TransformGroup >
  <ScaleTransform ScaleY="-1" />
        </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
  </Viewbox>
  图形元素的编辑与修改功能主要依靠计算机图形学的基本原理以及Windows表现层基础类库(WPF)来实现。WPF的System.Printing命名空间下的PrintDialog类主要用来实现打印单页或多页文件的功能,PrintDialog类显示一个打印对话框,与用户交互操作来完成打印功能。
2.2.3 曲线曲面造型功能
 曲线曲面造型[4]是计算机辅助几何设计(CAGD)的核心,也是计算机图形学的一项重要内容。三次B样条曲线是曲线学中一个重要部分,它不但保留了Bezier曲线的优点,而且克服了其不具备局部性质的缺点,能更好地表示与设计自由型曲线曲面,通过几个控制点的移动能形成不同的曲线。系统提供了绘制B样条曲线与闭合B样条曲线的功能。绘制图形如图5所示。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5 canvas元素使用(一)

    html5 canvas元素使用(一)

    2017-09-16 14:15

  • WPF画布如何实时刷新

    WPF画布如何实时刷新

    2017-09-16 11:02

  • HTML5绘图基础_07_绘制第二个图形

    HTML5绘图基础_07_绘制第二个图形

    2017-09-15 12:04

  • HTML学习总结(四)【canvas绘图、WebGL、SVG】

    HTML学习总结(四)【canvas绘图、WebGL、SVG】

    2017-09-15 08:08

网友点评
<