利用WPF InkCanvas水墨控件圈选移动笔画

最新推荐文章于 2024-03-27 01:00:00 发布
最新推荐文章于 2024-03-27 01:00:00 发布
阅读量5.9k 收藏 9
点赞数 3
分类专栏： .net core开发 文章标签： WPF InkCanvas 水墨控件 圈选移动 Adorner
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/elie_yang/article/details/81083441
版权

项目的开发需要，用到了WPF原生提供的InkCanvas控件，也有叫水墨控件。 需要开发的功能为鼠标光标随意圈选笔画，选中完成后移动圈选的笔画到画布其他地方。功能实现的效果如下所示：

效果动图

本文只讲解实现的核心代码：

1：类似Photoshop的 Lasso工具的效果如何实现？

（锦上添花的UI效果：photoshop里圈选后的线框专业说法叫蚁行线，如果能做到动画更完美了）

2：套选工具选择后，高亮的填充透明层如何实现？

3：移动套选区域后，笔画如何跟随移动并从原本InkCanvas中移除？

首先看第一个问题：Lasso效果的实现：

这个很简单，通过MouseLeftButtonDown/Move/up的组合事件完成。

   <Grid >
        <InkCanvas x:Name="ink" PreviewMouseDown="InkCanvas_PreviewMouseDown" 
                   PreviewMouseMove="InkCanvas_PreviewMouseMove"
                   PreviewMouseLeftButtonUp="ink_PreviewMouseLeftButtonUp"
                   Background="AliceBlue" Height="{Binding ActualHeight,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" 
                   Width="{Binding ActualWidth,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" ></InkCanvas>
    </Grid>
Stroke lassoStroke;
        Point startPoint = new Point(0, 0);
        Point endPoint = new Point(0, 0);
        DrawingAttributes drawAttr;
private void InkCanvas_PreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            startPoint = e.GetPosition(ink);
        }
        private void InkCanvas_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed || (e.RightButton == MouseButtonState.Pressed))
            {
                if (startPoint == new Point(0, 0))
                {
                    startPoint = e.GetPosition(ink);
                }
                endPoint = e.GetPosition(ink);
                if (lassoStroke == null)
                {
                    StylusPointCollection pts = new StylusPointCollection();
                    pts.Add(new StylusPoint(startPoint.X, startPoint.Y));
                    pts.Add(new StylusPoint(endPoint.X, endPoint.Y));
                    lassoStroke = new LassoStroke(pts, drawAttr) { DashStyle = new DashStyle(new double[] { 4, 10 }, 0) };

                    this.ink.Strokes.Add(lassoStroke);
                }
                else
                {
                    this.lassoStroke.StylusPoints.Add(new StylusPoint(endPoint.X, endPoint.Y));
                }
            }
        }
        private void ink_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (lassoStroke == null)
            {
                return;
            }
            //ink.Strokes.Remove(lassoStroke);
            lassoStroke.StylusPoints.Add(lassoStroke.StylusPoints[0]);
            startPoint = new Point(0, 0);
            endPoint = new Point(0, 0);
            lassoStroke = null;
        }

此时运行程序，在界面上随意拖拽，实现效果如下图所示 

 2：再看第二个问题：圈选后的Lasso 填充和切割笔画移动；

这个是核心功能：对于Lasso 填充移动，我这里用的是WPF Adorner 技术；就是给inkCanvas一个装饰层，在装饰层里绘制当前的Lasso路径；接着我们实现这个功能；

编写LassoAdorner类继承Adorner，override Render方法；在Render方法里需要绘制 套索封闭圈本身的路径、套索切割InkCanvas控件的笔画数据等；

这里是通过下面两行代码实现的：

  CreatLassoDrawing(drawingContext);// 绘制切割后的线条                
                lassoStroke.Draw(drawingContext);// 绘制虚线圈

 private Stroke lassoStroke;// 套索的边框外形
 private StrokeCollection clipStrokes;// 套索切割的笔画
 private StrokeCollection lassoEraseFinalStrokes; // lasso 擦除区域外围产生的笔画
void CreatLassoDrawing(DrawingContext drawingContext)
        {
            if (clipStrokes == null)
                return;
            foreach (Stroke stroke in clipStrokes)
            {
                Brush brush = new SolidColorBrush(stroke.DrawingAttributes.Color);
                if (stroke.DrawingAttributes.IsHighlighter)
                {
                    brush.Opacity = 0.5;
                }
                Pen pen = new Pen
                {
                    StartLineCap = PenLineCap.Round,
                    EndLineCap = PenLineCap.Round,
                    Brush = new SolidColorBrush(stroke.DrawingAttributes.Color),
                    Thickness = stroke.DrawingAttributes.Width,
                };

                stroke.Draw(drawingContext);
            }
        }

其中clipStrokes的实例化逻辑如下：给LassoAdorner定义一个Show方法，在此方法中实例化clipStrokes对象，它代码被套索区域所切割后的笔画集合：

 internal void Show(Stroke stroke)
        {
            this.Visibility = System.Windows.Visibility.Visible;
            lassoStroke = stroke;
            lassoStroke.StylusPoints.Add(stroke.StylusPoints[0]);//在UI上形成封闭圈效果
            GenerateClipStrokes();
            GenerateEraseLassoStroke();
            if (clipStrokes == null || clipStrokes.Count == 0)
            {
                Hide();
                return;
            }
            this.InvalidateVisual();
        }

 其中的GenerateClipStrokes 和GenerateEraseLassoStroke分别是计算套索切割内的笔画集合和套索区域外被切割后的笔画集合；这里算是核心代码了，百度不到也没有发现可用的资源，经过本人不断尝试和对WPF 2D Drawing相关章节的研究学习得出下面的代码：


        /// <summary>
        /// 创建 Lasso 套选住的笔画 集合
        /// </summary>
        void GenerateClipStrokes()
        {
            StreamGeometry pg = (StreamGeometry)this.lassoStroke.GetGeometry();
            PathGeometry pathG = pg.GetOutlinedPathGeometry();
            InkCanvas ink = (this.AdornedElement as InkCanvas);
            for (int i = 0; i < pathG.Figures.Count() - 1; i++)
            {
                PathFigure pfc = pathG.Figures[i];
                PathSegmentCollection psc = pfc.Segments;
                List<Point> pointList = new List<Point>();
                #region 找出需要裁切的笔画集合
                foreach (var ps in psc)
                {
                    if (ps is PolyLineSegment)
                    {
                        PolyLineSegment pls = ps as PolyLineSegment;
                        pointList.AddRange(pls.Points.ToArray());
                    }
                    else if (ps is LineSegment)
                    {
                        LineSegment ls = ps as LineSegment;
                        pointList.Add(ls.Point);
                    }
                    else if (ps is BezierSegment)
                    {
                        BezierSegment bs = ps as BezierSegment;
                        pointList.Add(bs.Point1);
                        pointList.Add(bs.Point2);
                        pointList.Add(bs.Point3);
                    }
                    else if (ps is PolyBezierSegment)
                    {
                        PolyBezierSegment pbs = ps as PolyBezierSegment;
                        pointList.AddRange(pbs.Points.ToArray());
                    }
                    else if (ps is ArcSegment)
                    {
                        ArcSegment asm = ps as ArcSegment;
                        pointList.Add(asm.Point);
                    }
                    else if (ps is PolyQuadraticBezierSegment)
                    {
                        PolyQuadraticBezierSegment pbs = ps as PolyQuadraticBezierSegment;
                        pointList.AddRange(pbs.Points.ToArray());
                    }
                    else if (ps is QuadraticBezierSegment)
                    {
                        QuadraticBezierSegment qbs = ps as QuadraticBezierSegment;
                        pointList.Add(qbs.Point1);
                        pointList.Add(qbs.Point2);
                    }

                }

                #endregion
                StrokeCollection clipStrokesTemp = new StrokeCollection();
                if (clipStrokes == null)
                {
                    foreach (Stroke sk in ink.Strokes)
                    {
                        StrokeCollection sc = sk.GetClipResult(pointList); //后一个封闭 圈出来的切割后的线段；
                        clipStrokesTemp.Add(sc);
                    }
                    clipStrokes = new StrokeCollection(clipStrokesTemp);
                }
                else
                {
                    foreach (Stroke sk in ink.Strokes)
                    {
                        StrokeCollection sc = sk.GetClipResult(pointList); //后一个封闭 圈切割后的线段；
                        clipStrokesTemp.Add(sc);
                    }
                    clipStrokes.Add(clipStrokesTemp);
                }
            }            
        }

        /// <summary>
        ///  获取擦除结果
        /// </summary>   
        void GenerateEraseLassoStroke()
        {
            StreamGeometry pg = (StreamGeometry)this.lassoStroke.GetGeometry();
            PathGeometry pathG = pg.GetOutlinedPathGeometry();
            InkCanvas ink = (this.AdornedElement as InkCanvas);
            for (int i = 0; i < pathG.Figures.Count() - 1; i++)
            {
                PathFigure pfc = pathG.Figures[i];
                PathSegmentCollection psc = pfc.Segments;
                List<Point> pointList = new List<Point>();
                #region 找出需要裁切的笔画集合
                foreach (var ps in psc)
                {
                    if (ps is PolyLineSegment)
                    {
                        PolyLineSegment pls = ps as PolyLineSegment;
                        pointList.AddRange(pls.Points.ToArray());
                    }
                    else if (ps is LineSegment)
                    {
                        LineSegment ls = ps as LineSegment;
                        pointList.Add(ls.Point);
                    }
                    else if (ps is BezierSegment)
                    {
                        BezierSegment bs = ps as BezierSegment;
                        pointList.Add(bs.Point1);
                        pointList.Add(bs.Point2);
                        pointList.Add(bs.Point3);
                    }
                    else if (ps is PolyBezierSegment)
                    {
                        PolyBezierSegment pbs = ps as PolyBezierSegment;
                        pointList.AddRange(pbs.Points.ToArray());
                    }
                    else if (ps is ArcSegment)
                    {
                        ArcSegment asm = ps as ArcSegment;
                        pointList.Add(asm.Point);
                    }
                    else if (ps is PolyQuadraticBezierSegment)
                    {
                        PolyQuadraticBezierSegment pbs = ps as PolyQuadraticBezierSegment;
                        pointList.AddRange(pbs.Points.ToArray());
                    }
                    else if (ps is QuadraticBezierSegment)
                    {
                        QuadraticBezierSegment qbs = ps as QuadraticBezierSegment;
                        pointList.Add(qbs.Point1);
                        pointList.Add(qbs.Point2);
                    }

                }

                #endregion
                StrokeCollection eraseStrokesTemp = new StrokeCollection();
                if (lassoEraseFinalStrokes == null)
                {
                    foreach (Stroke sk in ink.Strokes)
                    {
                        StrokeCollection sc = sk.GetEraseResult(pointList); //后一个封闭 圈出来的切割后的线段；
                        eraseStrokesTemp.Add(sc);
                    }
                    lassoEraseFinalStrokes = new StrokeCollection(eraseStrokesTemp);
                }
                else
                {
                    // 从新产生的strokes中 重新获取累计的擦除结果
                    foreach (Stroke sk in lassoEraseFinalStrokes)
                    {
                        StrokeCollection sc = sk.GetEraseResult(pointList); //后一个封闭 圈切割后的线段；
                        eraseStrokesTemp.Add(sc);
                    }
                    lassoEraseFinalStrokes = new StrokeCollection(eraseStrokesTemp);
                }
            }            
            
        }

下图是方便理解：做了一个示意图，分别说明clipStrokes和 lassoEraseFinalStrokes的具体作用；

最后看下圈选后的移动：这里是用Thumb对象来实现的，具体代码不做说明，看下源码就明白了。这里贴一个Thumb移动完成的事件处理：

private void OnMoveHandlerDragDelta(object sender, DragDeltaEventArgs e)
        {
            double offsetX = e.HorizontalChange;
            double offsetY = e.VerticalChange;
            if (lassoStroke == null)
            {
                return;
            }
            Rect bounds = lassoStroke.GetBounds();
            if (e.HorizontalChange < 0 && bounds.Left < 0)
            {
                offsetX = 0;
            }
            if (e.VerticalChange < 0 && bounds.Top < 0)
            {
                offsetY = 0;
            }
            if (bounds.Right + offsetX>=Application.Current.MainWindow.ActualWidth)
            {
                offsetX = 0;
            }
            if (bounds.Bottom + offsetY >= Application.Current.MainWindow.ActualHeight-40) // 40 为menu Title的高度
            {
                offsetY = 0;
            }

            dragOffSetX += offsetX;
            dragOffSetY += offsetY;
            lassoStroke.Transform(new Matrix(1, 0, 0, 1, offsetX, offsetY), false);
            clipStrokes.Transform(new Matrix(1, 0, 0, 1, offsetX, offsetY), false);
            this.InvalidateVisual();
        }

如需要源码，请下载本人上传的资源，下载路径如下：

https://download.csdn.net/download/elie_yang/10566298

彼岸大洋
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
WPF InkCanvas笔画圈选移动功能
07-26
项目开发需要，用到了WPF原生提供的InkCanvas控件，也有叫水墨控件。 需要开发的功能为鼠标光标随意圈选笔画，选中完成后移动圈选的笔画到画布其他地方，本人原创代码，供参考！
Canvas画布实现套索的效果
o_OzZZ的博客
01-06 974
好久没写博客了QUQ 记得上次写博客还是上次 前言 不久之前我的leader给我提了一个需求，实现一个套索的功能。 一开始我还在想这个套索怎么实现然后某个晚上我在做梦的时候梦到我在打这个的代码然后第二天直接就给我秒杀了… 我也不是很会描述这个东西…先贴个代码以后想到怎么解释了再更新吧。估计也没什么人看。 <script> let isActive = false; //是否弃用 let divContainer = document.getElementById("divContaine
【WPF应用17】WPF 基本控件-InkCanvas布局，应用详解与示例
最新发布
qq_35320456的博客
03-27 619
WPF 基本控件-InkCanvas布局，应用详解与示例
算法刷题 -- 566. 重塑矩阵＜难度 ★☆☆＞
JH_Cao的博客
03-03 646
矩阵，二维数组，搞清楚一维数组和二维数组的映射关系即可。
微电子新手入门之virtuoso版图界面
红豆布丁RFIC
12-11 2万+
      virtuoso版图界面如图所示： 图中左边的窗口（LSW）是用来选择Layer的，Layout时会用到的Layer很多，画Layout时会需要频繁地在各个Layer之间选择，左键点击某一层Layer就选择了该Layer，右键点击该Layer不同区域则有不同效果。 AV（Al Viewable）、NV（None Viewable）、AS（All Selectable）、NS（N...
WPF 使用InkCanvas实现画板的缩放以及移动
lib_dil的博客
03-29 4914
最近博主需要实现一个画板功能，可以写字并且支持触屏的手势缩放以及拖动。找资料的时候发现网上相关资料特别少，于是经历了#$#@!##$#￥#$*就完成了。上教程：1.首先我们要实现一个最基本的画板功能，只需要简单的一行代码即可：对InkCanvas如还有不会使用的，参考这篇文章（WPF InkCanvas 画图 基础使用教程） &lt;InkCanvas Width="1000" Height="...
分享屏幕截图ScreenShot方法总结
热门推荐
翻肚鱼儿的博客
09-11 4万+
屏幕截图ScreenShot方法总结 比较Cocos2d-x 2.x版本与3.x版本屏幕截图的两种方式： （1）使用RenderTexture：这是在2.x版本时最常用的的截图方法。 （2）使用utils::captureScreen() ：在3.2版本中新增的截图方法。 RenderTexture RenderTexture这个动态纹理类，顾名思义就是可以动态创建纹理图片。 屏幕截图主要步骤： 开始截图：render->begin(); 遍历场景：scene->visit();
WPF实现在InkCanvas上的绘画以及擦除操作（ComboBox）demo
weixin_46114397的博客
08-01 858
可下拉菜单选择操作类型，进行绘画，移动控件等操作 MainWindow.xmal <Window x:Class="WpfApp10.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.mi
OBS源码使用学习（三）之截图拍照（Screenshot）
weixin_44838243的博客
12-14 1551
obs源码使用学习第三篇，我们可以使用之前的经验，快速完成这个功能。
wpf下inkcanvas实现画板
11-16
转载用inkcanvas 实现的简单画板源代码 有绘图、擦除等多种功能 对inkcanvas感兴趣的可以好好研究下 通过改写代码可以实现更多功能！
stroke-prediction-container
04-10
中风预测容器 在这个仓库中： mlib.py（模型处理库）：用于重新训练模型和预测的函数 Forecast.py（预测协助）：格式化JSON有效负载以进行预测 payload.json：测试有效负载 utilscli.py（ML工具）：用于保留模型和查询ML端点的命令行工具（具有预先格式化的有效负载或具有用户输入的有效负载） Stroke_Prediction_Model_Export：模型训练，评估和导出 app.py：具有/ predict路线的中风预测Flask应用程序 resize.sh：用于调整AWS EC2实例大小的Bash脚本 requirements.txt：flask应用程序，ML工具和本地容器的依赖项 Healthcare-dataset-stroke-data.csv：培训数据 Dockerfile：用于在本地构建映像（也可以使用docker pull malco
stroke-prediction-model
04-10
======中风预测模型====== 数据集来源：来自Kaggle的。 该数据集用于根据输入参数（例如性别，年龄，各种疾病和吸烟状况）预测患者是否可能中风。 使用机器学习和数据可视化目的的过滤方法来获取原始火车数据的子集。 关于数据：例如，数据中的每一行都提供有关某个人的相关信息；例如， 年龄，性别，吸烟状况，中风的发生以及其他信息除吸烟状况未知外，该信息不可用。 其他输入字段中的N / A表示不适用。 该项目的目标是创建一个具有100％F1分数且AUC = 1的模型，因此该模型完全能够区分阳性类别（有中风）和阴性类别（无中风）。 如果要查看此项目的更多详细信息和最终部署，请单击下面的链接： 应用链接= 让我们连接 LinkedIn = https //
Screenshoter:Screenshot'er API 的简单 PHP 类
06-21
截图 Screenshot'er API 的简单 PHP 类 Screenshot'er是对任何网站进行截图的快捷方式。 您甚至可以选择要使用的设备尺寸，非常适合展示响应式网页设计。 样本 /* Take screenshots of PHP.net */ require_once ( 'screenshoter.php' ); $ website = 'http://php.net/' ; $ path = './cache/' ; // save here $ screen = new Screenshoter ( $ website , $ path ); $ screen -> format ( 'png' ); // First: Desktops $ screen -> device ( 'desktop' ); echo $ screen -> shoot ( 'desk
WPF 使用InkCanvas实现画板的缩放以及移动Demo
03-29
WPF 使用InkCanvas实现画板的缩放以及移动 教程的小demo
WPF InkCanvas绘制矩形和椭圆
08-26
主要为大家详细介绍了WPF InkCanvas绘制矩形和椭圆，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
WPF InkCanvas基本操作方法详解
08-26
主要为大家详细介绍了WPF InkCanvas基本的操作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
WPF实现控件的移动操作
01-09
WPF实现控件的移动操作，实现大小拖动，位置移动，简单易学
wpf inkcanvas 圆
12-21
WPF中的InkCanvas是一个强大的绘图工具，可以用于创建各种图形，包括圆形。要在InkCanvas上绘制一个圆，我们可以使用鼠标或触摸屏来绘制圆的形状，也可以通过编程来实现。通过编程，我们可以使用WPF的绘图工具，如Ellipse（椭圆）类来绘制一个圆形，然后将其添加到InkCanvas中。 在绘制圆形时，我们可以通过设置椭圆的宽、高和位置来确定圆的大小和位置。例如，我们可以使用椭圆的Width和Height属性来设置圆的直径，并使用InkCanvas.SetLeft和InkCanvas.SetTop方法来设置圆的位置。 此外，我们还可以利用InkCanvas的绘图特性，例如使用不同的笔刷和颜色来绘制圆形，使得圆形更加丰富多彩。另外，InkCanvas还支持撤销和重做功能，因此我们可以方便地对绘制的圆形进行修改和调整。 总之，WPF的InkCanvas提供了丰富的绘图功能，可以轻松实现在画布上绘制圆形，并且具有灵活的编程接口，可以满足不同绘图需求。无论是通过交互绘制还是编程绘制，InkCanvas都能够方便地实现圆形的绘制和编辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值