WPF_图画（二）
WPF_图画（一）Shape类及其派生类
WPF_图画（二）Drawing抽象类
WPF_图画（三）DrawingVisual类
一、前言
在上一篇中，我们讲到了使用可视化对象的两种方式，今天我们就来实现以下。
二、在元素中封装DrawingVisual对象
为在元素中驻留可视化对象，需要执行以下任务：
- 为元素调用AddVisualChild()和AddLogicalChild()方法来注册可视化对象。从技术角度看，为了显示可视化对象，不需要执行这些任务，但为了保证正确跟踪可视化对象、在可视化树和逻辑树中显示可视化对象以及使用其他WPF特性（如命中测试），需要执行这些操作。
- 重写VisualChildrenCount属性并返回已经增加了的可视化对象的数量。
- 重写GetVisualChild()方法，当通过索引号请求可视化对象时，添加返回可视化对象所需的代码。
/// <summary>
/// 创建一个可视化对象的容器，这个容器继承WPF元素，所以可以直接显示
/// </summary>
public class HostVisual : Canvas
{
/// <summary>
/// 这个集合用于存储可视化对象
/// </summary>
private List<Visual> visuals = new List<Visual>();
/// <summary>
/// 重写VisualChildrenCount属性
/// </summary>
protected override int VisualChildrenCount => visuals.Count;
/// <summary>
/// 重写GetVisualChild()方法
/// </summary>
/// <param name="index">索引号</param>
/// <returns>可视化对象</returns>
protected override Visual GetVisualChild(int index)
{
return visuals[index];
}
/// <summary>
/// 添加可视化对象的方法
/// </summary>
/// <param name="visual">需要添加的可视化对象</param>
public void AddVisual(Visual visual)
{
//注意 这里除了添加到集合中 还需要添加到容器的可视化树和逻辑树中
this.visuals.Add(visual);
base.AddLogicalChild(visual);
base.AddVisualChild(visual);
}
/// <summary>
/// 剔除可视化对象
/// </summary>
/// <param name="visual">想要剔除的可视化对象</param>
public void DeleteVisual(Visual visual)
{
this.visuals.Remove(visual);
base.RemoveLogicalChild(visual);
base.RemoveVisualChild(visual);
}
}
完成上述代码后我们就可以往HostVisual中添加删除可视化对象了，并且可视化对象可以显示出来。
在使用时，我们可以直接将HostVisual添加到窗体中，因为它继承自Canvas元素。
<Grid>
<local:HostVisual
x:Name="host"
Background="Transparent"
MouseRightButtonUp="host_MouseRightButtonUp"
MouseLeftButtonDown="host_MouseLeftButtonDown"
MouseLeftButtonUp="host_MouseLeftButtonUp"
MouseMove="host_MouseMove"
MouseRightButtonDown="host_MouseRightButtonDown" />
</Grid>
绘制一个圆环
在这里我举个例子，使用DrawingContext中的DrawGeometry()方法绘制一个圆环.
/// <summary>
/// 使用DrawingContext绘制一个圆环
/// </summary>
/// <param name="visual">可视化对象</param>
/// <param name="point">需要绘制的位置，相对于host的坐标</param>
/// <param name="isSelected">是否被选中 根据这个参数选择不一样的画刷</param>
private void DrawMyCircle(DrawingVisual visual, Point point, bool isSelected)
{
using (DrawingContext dc = visual.RenderOpen())
{
//这里的选用了DrawingContext中的DrawGeometry()方法，这个方法可以画复杂的图形
CombinedGeometry geometry = new CombinedGeometry
{
Geometry1 = new EllipseGeometry(point, 20, 20),
Geometry2 = new EllipseGeometry(point, 50, 50),
GeometryCombineMode = GeometryCombineMode.Xor,
};
Pen pen;
if (isSelected)
{
pen = new Pen(Brushes.Black, 1)
{
DashStyle = new DashStyle(new List<double>() { 10 }, 1)
};
}
else
{
pen = new Pen(Brushes.Black, 1);
}
dc.DrawGeometry(Brushes.Chocolate, pen, geometry);
}
}
private void ReDrawMyCircle(DrawingVisual visual, bool isSelelcted)
{
Point point = new Point((visual.ContentBounds.TopLeft.X + visual.ContentBounds.BottomRight.X) / 2, (visual.ContentBounds.TopLeft.Y + visual.ContentBounds.BottomRight.Y) / 2);
DrawMyCircle(visual, point, isSelelcted);
}
第二个方法是为了重新绘制，所以没有了Point参数。
/// <summary>
/// 点击左键时绘制一个Circle 注意host需要设置background属性，才会响应鼠标事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void host_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
//绘制circle的时候需要实例化一个可视化对象，然后添加到host中，不然不会显示
DrawingVisual visual = new DrawingVisual();
host.AddVisual(visual);
DrawMyCircle(visual, e.GetPosition(host), false);
}
当点击鼠标左键的时候就可以绘制出一个已点击点为圆心的圆环。
这里有一个细节可以说一下：画Visual的时候，使用的Pen（也就是边框）会在DrawGeometry的两侧，也就是说ContentBounds.TopLeft的坐标都有Pen宽度一般的offset。
命中测试
命中测试需要借助于VisualTreeHelper的静态方法HitTest()。对于2D的命中测试，我们都两种方式：
- 单点命中测试。查找位于某点的可视化对象（hit testing）
- 范围命中测试。查找位于Geometry对象范围内的可视化对象
单点命中测试
在HostVisual中我们添加一个方法：
/// <summary>
/// 单点命中检测
/// </summary>
/// <param name="point">需要检测的点</param>
/// <returns></returns>
public DrawingVisual GetVisual(Point point)
{
//命中检测使用的VisualTreeHelper的静态方法
HitTestResult hitResult = VisualTreeHelper.HitTest(this, point);
return hitResult.VisualHit as DrawingVisual;
}
然后在它的后台代码中添加
/// <summary>
///右键的时候则是选中可视化对象
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void host_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
DrawingVisual visual = host.GetVisual(e.GetPosition(host));
if (visual != null)
{
//计算选中的可视化图形的中心点，因为我们知道是圆形，因为选中之后需要变换颜色，所以需要重新绘制，需要绘制在原本的位置
//TODO：选中后是否可以不用重新绘制，只在原有的基础上进行修改。
ReDrawMyCircle(visual, true);
}
}
选中可视化对象后后重绘它的边框为虚线，不知道有没有办法可以直接修改属性，不需要重新绘制，因为重新绘制的话还需要找到它原本的位置。
范围命中测试
代码如下：
List<DrawingVisual> hits = new List<DrawingVisual>();
/// <summary>
/// 区域命中检测
/// </summary>
/// <param name="geometry">选择的区域</param>
/// <returns>命中的可视化对象集合</returns>
public List<DrawingVisual> GetVisuals(Geometry geometry)
{
hits.Clear();
VisualTreeHelper.HitTest(this, FilterCallback, ResultCallback, new GeometryHitTestParameters(geometry));
//1、有一个HitTestFilterCallback回调函数
//
//2、还有一个HitTestResultCallback回调函数
// 该函数用于返回命中的可视化对象，我们将命中的对象存储在hits集合中
//3、最后一个参数是HitTestParameters,HitTestParameters是一个抽象类。
// 它的派生类有PointHitTestParameters和GeometryHitTestParameters。
return hits;
}
private HitTestResultBehavior ResultCallback(HitTestResult result)
{
GeometryHitTestResult geometryHitTestResult = result as GeometryHitTestResult;
if (geometryHitTestResult.IntersectionDetail == IntersectionDetail.FullyInside)
hits.Add(result.VisualHit as DrawingVisual);
return HitTestResultBehavior.Continue;
}
private HitTestFilterBehavior FilterCallback(DependencyObject potentialHitTestTarget)
{
return HitTestFilterBehavior.Continue;
}
然后添加鼠标的响应事件
private DrawingVisual regionvisual;
private bool isDrawingRegion;
private Point regionTopLeftCorner;
private void DrawMyRegion(Point point1, Point point2)
{
using (DrawingContext dc = regionvisual.RenderOpen())
{
dc.DrawRectangle(Brushes.Transparent, new Pen(Brushes.Black, 1)
{
DashStyle = new DashStyle(new List<double>() { 10 }, 1)
}, new Rect(point1, point2));
}
}
/// <summary>
///右键的时候则是选中可视化对象
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void host_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
if (!isDrawingRegion)
{
isDrawingRegion = true;
regionTopLeftCorner = e.GetPosition(host);
regionvisual = new DrawingVisual();
host.AddVisual(regionvisual);
}
}
private void host_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
{
if (isDrawingRegion)
{
//检测
Geometry geometry = new RectangleGeometry(new Rect(regionTopLeftCorner, e.GetPosition(host)));
var hits = host.GetVisuals(geometry);
foreach (var hit in hits)
ReDrawMyCircle(hit, true);
MessageBox.Show($"Selected {hits.Count} circle(s)");
host.DeleteVisual(regionvisual);
isDrawingRegion = false;
}
}
private void host_MouseMove(object sender, MouseEventArgs e)
{
if (isDrawingRegion)
{
DrawMyRegion(regionTopLeftCorner, e.GetPosition(host));
}
}
- 这里我们的例子中范围其他是一个矩形，整体思路就是：按住鼠标拖拽绘制矩形。
- 单击右键的时候记录该点，该点用于绘制矩形的左上角。
- 同时实例化一个可视化对象（这个对象就是那个矩形）并添加到Host中。
- 鼠标移动时，以鼠标坐标为右下角绘制矩形，可直接使用DrawingContext的DrawRectangle()方法。
- 鼠标抬起的时候，绘制结束。开始范围检测，范围检测需要一个Geometry对象，需要将前面绘制的矩形重新构造一个RectangleGeometry对象
- 得到所有的检测对象后可进行后续操作，例如边框虚化、删除或者拖拽等。
其他操作
这里对于选中实例化对象后的进一步操作说明一下：
- 边框虚化实际就是重画，重画的关键是计算出原本的位置。
- 删除就直接从可视化树和逻辑树中删除即可。
- 拖拽的话也可以进行重新绘制，绘制的坐标需要跟随鼠标移动（可视化对象和鼠标位置可能有一个偏移）；拖拽应该还可以直接进行变换操作。
源代码见
12/10更新：再次进行命中检查的时候，没有命中的可视化对象需要复原。
3273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
