WPF，Silverlight与XAML读书笔记第三十六 - 可视化效果之Visual

Visual与其它可视化类之间的继承关系如下图：



其包含了绘制任何东西到屏幕上的底层构造，前面章节我们通过Image将Drawing绘制到屏幕上，Image派生自FrameworkElement，继承层次中多了UIElement与FrameworkElement，它们提供了一些如样式，数据绑定，资源，鼠标支持，路由事件支持等Drawing不需要的特性。如果要绘制大量Drawing到屏幕（如实现横屏滚轴效果），宿主于一个Image会导致很大不必要的开销。

解决方法是使用WPF提供的DrawingVisual这个Visual的子类，其提供了轻量级方法用于将Drawing渲染到屏幕上。虽然DrawingVisual很轻量，其仍然提供了像透明和剪切这样的渲染效果。另外，通过Visual命中测试还可以实现与输入设备的基本交互。

下面我们将分三部分来做详细阐述：

DrawingVisual的填充

DrawingVisual的呈现

Visual的命中测试

DrawingVisual的填充

我们需要调用DrawingVisual的RenderOpen方法得到一个DrawingContent的实例，通过这个对象进行绘制，完成后调用Close方法关闭这个对象。（另外注意，DrawingVisual的Drawing属性是只读的，不能通过设置这个属性完成填充。）

下面是一段典型的填充DrawingVisual的代码：

GeometryDrawing drawing = new GeometryDrawing();
DrawingVisual visual = new DrawingVisual();
using (DrawingContext dc = visual.RenderOpen())
{
dc.DrawDrawing(drawing);
}

这段代码之所以可以实现，因为DrawingContext实现了IDisposal接口，并且在Dispose方法中调用了Close方法。

另外DrawingContext上DrawDrawing（或其它DrawXXX方法）调用的顺序可以直接将z-order的效果体现出来。DrawingContext上提供了一系列DrawingXXX方法，覆盖了Drawing类（GeometryDrawing，ImageDrawing，VideoDrawing和GlyphRunDrawing）提供的所有功能（绘制几何体，图像，文本甚至视频）。

下面表格中列出了DrawingContext提供的方法

DrawRectangle, DrawRoundedRectangle, DrawingEllipse,DrawLine	绘制一些定制的图形（，而无须通过Geometry系列）
DrawGeometry,DrawImage,DrawVideo, DrawGlyphRun,DrawText	无须通过Drawing实例绘制Drawing
DrawDrawing	前文示例中使用的方法，通过Drawing实例绘制Drawing
PushClip,PushEffect, PushGuidelineSet,PushOpacity, PushOpacityMask,PushTransform,Pop	像绘画应用效果
Close	结束绘画命令序列

上表中PushXXX系列与Pop命令用于将透明或旋转等应用到一系列命令上，命令还可以进行嵌套。如PushClip用于设置剪切区域，PushEffect用于应用BitmapEffect效果，Push方法会一直将效果向后续对象作用，直到使用Pop方法移除效果。（.NET Framework4.0中过时）

DrawingContext类是最接近Win32（GDI）的类，所以其性能最高，但需注意的是，其仍然工作于保留模式（而非立即模式）中，所以绘制的图形直到实际用到才会显示。

Visual的呈现

对于是UIElement的Visual，只需要将其设置给ContentControl的Content属性即可在OnRender中被正确的渲染。对于一个不是UIElement的Visual（如DrawingVisual），需要将它们手工添加到某些UIElement的Visual树上（否则只会呈现出Visual对象执行ToString()的结果）。

我们可以在一个顶层的UIElement中设置几千个Visual（而不是在其中放置几千个UIElment），从而可以大大提高应用程序的性能。

将Visual添加到元素的方法是，自定义一个派生自UIElement的类，重写两个基类中protected virtual标记的成员函数：VisualChildrenCount和GetVisualChild。下面是一个自定义类的例子，这个例子中我们把Visual宿主到Window这个UIElement元素中：

using System;
using System.Windows;
using System.Windows.Media;

public class WindowHostingVisual : Window
{
DrawingVisual visual = null;

public WindowHostingVisual()
{
Title = "Render by DrawingVisuals";

visual = new DrawingVisual();
using (DrawingContext dc = visual.RenderOpen())
{
//draw
}

AddVisualChild(visual);
AddLogicalChild(visual);
}

//必须重写的方法
protected override int VisualChildrenCount
{
get { return 1; }
}

protected override Visual GetVisualChild(int index)
{
if (index != 0)
throw new ArgumentOutOfRangeException("index");

return visual;
}
}

如代码所示，VisualChildrenCount必须返回Window中Visual的个数，这个例子中此值为1。GetVisualChild方法通过索引值返回一个Visual对象，这里只有一个索引值，所以接收的索引值只能是0。

注意，重写VisualChildrenCount与GetVisual方法会使Window的Content属性不再被绘制。另外，在构造函数中调用的AddVisualChild（定义于Visual类中）和AddLogicalChild（定义于FrameworkElement类中）方法将Visual分别注册到可视树与逻辑树，这样路由事件，命中测试和属性继承等才能正常工作。RemoveVisualChild和RemoveLogicalChild可以移除Visual注册。

Visual命中测试

命中测试指的是判断一个点（或一组点）是否与一个给定的对象相交。可视命中测试被所有的Visual对象支持。（由UIElement支持的输入命中测试）

Visual没有UIElement中所提供的输入事件（如MouseLeftButtonDown，MouseMove），要想让Visual也可以响应鼠标操作，需要通过处理所宿主的UIElement的鼠标事件，并在处理函数中通过Visual命中测试来确定鼠标动作是否与一个Visual相关，在相关情况下让Visual响应事件完成定义的操作。

VisualTreeHelper.HitTest方法用于支持命中测试，其最简单的重载接受Visual根对象和要测试的坐标点（相对根元素的坐标）。该方法以根对象起向下遍历可视树，其返回值包含了被命中的最上层的Visual对象。下面是一段示例代码：

protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
{
base.OnMouseLeftButtonDown(e);

Point location = e.GetPosition(this);

//对Window进行Visual命中测试
HitTestResult result = VisualTreeHelper.HitTest(this, location);

if (result.VisualHit == visual)
{
if (visual.Transform == null)
{
visual.Transform = new RotateTransform();
}
(visual.Transform as RotateTransform).Angle++;
}
}

下面是一个综合示例，其中演示了将多个Visual添加到UIElement并管理它们，以及对多个Visual执行命中测试。

using System;
using System.Windows;
using System.Windows.Media;
using System.Collections.Generic;
using System.Windows.Input;

public class WindowHostingVisual : Window
{
List<Visual> visuals = new List<Visual>();

public WindowHostingVisual()
{
Title = "绘制多个Visual";
Width = 300;
Height = 350;

DrawingVisual bodyVisual = new DrawingVisual();
DrawingVisual eyesVisual = new DrawingVisual();
DrawingVisual mouthVisual = new DrawingVisual();

using (DrawingContext dc = bodyVisual.RenderOpen())
{
// The body
dc.DrawGeometry(Brushes.Blue, null, Geometry.Parse(
@"M 240,250
C 200,375 200,250 175,200
C 100,400 100,250 100,200
C 0,350 0,250 30,130
C 75,0 100,0 150,0
C 200,0 250,0 250,150 Z"));
}
using (DrawingContext dc = eyesVisual.RenderOpen())
{
// Left eye
dc.DrawEllipse(Brushes.Black, new Pen(Brushes.White, 10),
new Point(95, 95), 15, 15);
// Right eye
dc.DrawEllipse(Brushes.Black, new Pen(Brushes.White, 10),
new Point(170, 105), 15, 15);
}
using (DrawingContext dc = mouthVisual.RenderOpen())
{
// The mouth
Pen p = new Pen(Brushes.Black, 10);
p.StartLineCap = PenLineCap.Round;
p.EndLineCap = PenLineCap.Round;
dc.DrawLine(p, new Point(75, 160), new Point(175, 150));
}

visuals.Add(bodyVisual);
visuals.Add(eyesVisual);
visuals.Add(mouthVisual);

// 注册到可视树，逻辑树
foreach (Visual v in visuals)
{
AddVisualChild(v);
AddLogicalChild(v);
}
}

protected override int VisualChildrenCount
{
get { return visuals.Count; }
}
protected override Visual GetVisualChild(int index)
{
if (index < 0 || index >= visuals.Count)
throw new ArgumentOutOfRangeException("index");
return visuals[index];
}

protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
{
base.OnMouseLeftButtonDown(e);

Point location = e.GetPosition(this);
// Visual命中测试
HitTestResult result = VisualTreeHelper.HitTest(this, location);

if (result.VisualHit.GetType() == typeof(DrawingVisual))
{
DrawingVisual dv = result.VisualHit as DrawingVisual;
if (dv.Transform == null)
dv.Transform = new RotateTransform();
(dv.Transform as RotateTransform).Angle++;
}
}
}

对重叠的Visual进行命中测试

实现这个目标，需要调用HitTest一个接受HittestResultCallback委托的重载，在HitTest返回之前，对每个命中测试成功的Visual会按最顶层到最底层调用该委托。参考下面这段示例代码：

public HitTestResultBehavior HitTestCallback(HitTestResult result)
{
if (result.VisualHit.GetType()==typeof(DrawingVisual))
{
DrawingVisual dv = result.VisualHit as DrawingVisual;
if (dv.Transform == null)
{
dv.Transform = new RotateTransform();
}
(dv.Transform as RotateTransform).Angle++;
}
//继续寻找命中
return HitTestResultBehavior.Continue;
}

如代码所示，这里最大的不同是，HitTest函数不再返回任何值处理。HitResult的逻辑放在了回调方法中。回调方法返回HitTestResultBehavior枚举两个值之一：Continue或者Stop。从而可以在任何时候停止捕获剩余的Visual对象。代码中第二个参数接收HitTestFilterCallback类型的委托，可以实现在不停止处理的情况下跳过某些Visual的处理。另外注意这个重载方法没有像前面示例那样接收一个Point对象，而是一个包含Point的PointHitTestParameters对象。PointHitTestParameters类是HitTestParameters类（重载方法接收的参数类型）的子类，该类另一个子类是GeometryHitTestParameters，用于对区域进行命中测试。



本文完

参考：

《WPF揭秘》