C#写所见即所得的设计器(4)

文本元素，类型名称为DesignTextElement,很多文档元素只是简单的显示文本内容，则定义文本元素作为这些简单显示文本内容的元素的共同基础。它派生自DesignRectangleElement , 此外还实现了 ILabelEditable 接口用于直接编辑文本内容。此外还支持文本输出角度控制，此时绘制文本时将以元素中心为原点旋转任意角度进行绘制。文本元素绘制带角度的文本时需要临时修改图形绘制对象Graphics的转换矩阵来设置绘制角度。

◆增强文本元素，类型名称为DesignTextElementExt , 该元素派生自DesignTextElement, 对文本输出格式进行了强化，它支持行间距和字符间距，此外还进行了文本右边缘的对齐操作。显示对于大段文本时，尤其包含中文字符和英文字符，某些程序没有进行文本右边缘对齐操作。例如IE，记事本等，这是因为中文字符和英文字符宽度不一样。每一行文本的内容宽度由于中英字符的个数不一样，很容易导致文本宽度不一样，因此当文本左边缘对齐时，其右边缘很可能是参差不齐的。但MS Word显示大段文本时它的文本左右边缘都是对齐的，它通过在显示文本时插入额外的用户难以察觉字符间距来修正文本显示宽度。增强型文本元素就利用了这个原理来实现文本右边缘对齐。

◆表格元素，类型名称为DesignTableElement，表格元素是一种复杂的容器元素，它包含表格行（DesignTableRowElement)，表格列(DesignTableColumnElemetn)和单元格(DesignTableCellElement)对象，其中单元格可以进行横向合并和纵向合并。而表格包含的表格行和单元格也是容器元素，用户不能直接修改单元格的大小位置，而只能调解表格行的高度和表格列的宽度来修改单元格的大小位置。单元格也是容器元素，因此单元格内可以放置若干个子元素。在很多情况下单元格只是显示简单的文本内容，因此单元格定义了一些用于显示文本内容的属性，此外实现了 ILabelEditable 接口来方便直接编辑单元格文本内容。

◆图片元素，类型名称为 DesignImageElement , 它是从DesignRectangleElement 派生的，用于简单的显示一个图片。由于图片对象(System.Drawing.Image)使用了未托管资源，因此图片元素实现了 System.IDisposable 接口。

◆此外还定义了一些元素，这些元素可以模拟绘制Windows基础控件，包括文本标签，按钮，单选框，复选框，文本框，列表，下列列表，组合框，进度条和窗体。可以根据这些元素来很容易的模拟出一个窗体设计器。

绘制文档视图
设计器的主要工作之一就是绘制文档视图。其绘制过程一般是：

设计器控件重载它的OnPaint成员或绑定Paint事件。

当操作系统需要重新绘制设计器控件时会触发它的Paint事件。

设计器获得绘制图形使用的System.Drawing.Graphics对象和一个表示绘制区域的剪切矩形ClipRectangle，然后将其作为参数调用文档对象的RefreshView函数。

文档对象进行一个初始化工作，然后遍历对象树结构，找到所有和剪切矩形粘边的文档元素，调用它们的RefreshView函数，让各个元素绘制各自内容。

当所有工作完毕，则文档视图绘制完毕。

设计器绘制文档是遇到一个难题就是闪烁，当用户滚动视图和更新视图时，用户界面很容易出现闪烁，过多的闪烁会比较严重的影响使用者的使用。关于闪烁的原理我曾经写过一篇文章讨论了一下(点击查看)。由于设计文档是比较复杂的文档，绘制整个文档视图工作量大，绘制时间长，因此需要采用各种优化来减少绘制时间，减少闪烁。

对于闪烁有一个算是一劳永逸的办法就是使用双缓冲技术。在绘制图形时，首先将图形绘制到一个内存中的BMP图片上，然后将这个BMP图片绘制到用户界面上。这种方法可以最大程度的减少闪烁，而且在.NET中使用双缓冲也比较简单。但我不大使用双缓冲技术，有两个原因

双缓冲实际上增加了整个绘制文档的工作量，延长了绘图时间。当用户滚动视图时，会造成视图很“沉重”的感觉，用户界面响应迟钝。

双缓冲掩盖了程序的不足之处。开发人员可以根据闪烁程度来判断绘图操作是否需要优化，以及优化效果。但双缓冲消灭了闪烁，开发人员也就没有优化绘图操作的迫切需求，助长了开发人员的懒惰。程序绘制图形时缓慢不堪，而很难从表面看出问题的可能原因。

其实可以这样，设计器在开发时不使用双缓冲，但发布时则使用双缓冲。

由于设计器采用直角坐标方式，因此各个元素间存在相互覆盖的关系，当存在大面积的覆盖时，绘制文档时必需要针对这种情况进行优化处理来提高绘制文档的速度，减少计算机屏幕闪烁。针对覆盖现象而进行优化时可以进行矩形覆盖操作，对于矩形覆盖操作，本人有另一篇文章对此进行了说明（点击查看）。设计器绘制某个元素时，首先针对这个元素进行矩形覆盖运算，将运算结果作为RefreshView函数的某个参数来传入，当文档元素内容比较多时，可以根据这个矩形覆盖运算结果来减少绘制量，提高绘制速度。

设计视图还应提供缩放显示功能，可以放大设计视图来更清楚的显示细节，可以缩小设计视图来总体的把握整个文档。GDI+有个转换矩阵，可以很容易的实现设计视图的缩放显示。但此时所有的鼠标坐标数据都得进行相应的缩放处理。

设计视图控件
设计视图控件是设计器在用户界面上的展示接口。它是一个标准的Windows控件，该控件派生自System.Windows.Form.UserControl。用户使用鼠标和键盘在这个控件里面编辑文档，它重载了onMouseDown , onMouseMove 和 onMouseUp 成员，对鼠标消息进行了一下包装后供设计文档对象使用。重载了OnPaint 成员来更新文档视图。重载了 OnDoubleClick 来进行试图直接编辑文档元素的文本内容。

当用户设置某个元素为当前元素，则设计视图控件将根据需要来进行滚动以便当前元素出现在可视区域中。若当前元素大小小于可视区域大小，则处理比较简单，只要根据可视区域大小和元素在视图中的位置就可计算滚动位置。若元素宽度或高度大于可视区域的宽度和高度，则需要进行额外的判断，以避免滚动时发生跳跃。

鹰眼技术

一个好的设计器应当支持鹰眼技术，所谓鹰眼，通俗的讲就是小地图，它一般放置在程序界面的某个角落，它的面积不大，主要功能是让人瞥上一眼就能大体了解整个文档的结构，并能通过鼠标点击快速的滚动文档。关于鹰眼，本人写过一个文章专门讨论了它（点击查看)。

总结
使用方便的所见即所得的设计器是一个复杂的程序，需要丰富的相关开发经验，它涉及到图形化，文档对象模型以及其他各种编程技术，是一个多种编程技术的有机混合,通常需要编写数万行的代码才能实现。因此其技术门槛比较高，一般的小公司没有能力完成，即使有些公司有实力开发，那也要花数月的时间，有可能影响公司正常的项目开发。但随着各种信息系统越来越灵活，它们必须配备良好的设计器，若有一个使用方便功能强大的设计器，则处理这种系统配置是事半功倍的，因此很多开发人员都不得不面对开发设计器这个技术难题。