WPF_图画（三）DrawingVisual类_wpf drawingvisual

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);
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

完成上述代码后我们就可以往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>
1
2
3
4
5
6
7
8
9
10

绘制一个圆环

在这里我举个例子，使用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);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

第二个方法是为了重新绘制，所以没有了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);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13

当点击鼠标左键的时候就可以绘制出一个已点击点为圆心的圆环。

这里有一个细节可以说一下：画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;
        }
1
2
3
4
5
6
7
8
9
10
11
12

然后在它的后台代码中添加

/// <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);
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

选中可视化对象后后重绘它的边框为虚线，不知道有没有办法可以直接修改属性，不需要重新绘制，因为重新绘制的话还需要找到它原本的位置。

范围命中测试

代码如下：

        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;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

然后添加鼠标的响应事件

        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));
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

• 这里我们的例子中范围其他是一个矩形，整体思路就是：按住鼠标拖拽绘制矩形。
• 单击右键的时候记录该点，该点用于绘制矩形的左上角。
• 同时实例化一个可视化对象（这个对象就是那个矩形）并添加到Host中。
• 鼠标移动时，以鼠标坐标为右下角绘制矩形，可直接使用DrawingContext的DrawRectangle()方法。
• 鼠标抬起的时候，绘制结束。开始范围检测，范围检测需要一个Geometry对象，需要将前面绘制的矩形重新构造一个RectangleGeometry对象
• 得到所有的检测对象后可进行后续操作，例如边框虚化、删除或者拖拽等。

其他操作

这里对于选中实例化对象后的进一步操作说明一下：

• 边框虚化实际就是重画，重画的关键是计算出原本的位置。
• 删除就直接从可视化树和逻辑树中删除即可。
• 拖拽的话也可以进行重新绘制，绘制的坐标需要跟随鼠标移动（可视化对象和鼠标位置可能有一个偏移）；拖拽应该还可以直接进行变换操作。
  
  源代码见
  12/10更新：再次进行命中检查的时候，没有命中的可视化对象需要复原。

三、重写OnRender()方法