win10 uwp win2d 使用 Path 绘制界面

本文告诉大家如何在 Win2d 使用 Path 路径绘图

CanvasGeometry

在 win2d ,可以使用 DrawGeometry 的方式画出几何。而路径 Path 就是一种 Geometry 。传入的 CanvasGeometry 参数是不能通过实例创建,需要使用静态工厂创建。

通过 CanvasGeometry.CreatePath 就可以创建出路径几何,通过告诉线条颜色和线条宽度就可以画出 Path ,这个方法只能画出线条。

如果需要填充 Path 需要使用 FillGeometry 方法。

CanvasPathBuilder

因为 CanvasGeometry.CreatePath 的参数是 CanvasPathBuilder ,而 Path 也需要告诉每个点是如何画,所以需要 CanvasPathBuilder 来告诉 Path 每个点是怎么画。

在创建 CanvasPathBuilder 的时候需要传入 ICanvasResourceCreator ,也就是通过 args.DrawingSession 可以创建 CanvasPathBuilder 来画。

            using (var canvasPathBuilder = new CanvasPathBuilder(args.DrawingSession))

上面的代码是写在 Canvas_OnDraw

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
        {

            using (var canvasPathBuilder = new CanvasPathBuilder(args.DrawingSession))
            {
                // 这里可以画出 Path 或写出文字 lindexi.github.io
            }
        }

因为Path 可以使用多个 Path 组合,如果需要新建一个 Path 需要调用 BeginFigure 告诉 win2d 开始画出一个新的图形。在图形画完需要调用 EndFigure 告诉 win2d 已经画完。

例如准备画一条线,需要在开始画的时候调用 BeginFigure 告诉起点,在结束的时候使用 EndFigure 并且告诉这是不是封闭图形。

            using (var canvasPathBuilder = new CanvasPathBuilder(args.DrawingSession))
            {
                // 这里可以画出 Path 或写出文字 lindexi.github.io
                canvasPathBuilder.BeginFigure(100,100);
                canvasPathBuilder.AddLine(200,100);
                canvasPathBuilder.EndFigure(CanvasFigureLoop.Open);
            }

现在运行代码会发现没有画出图形,因为没有调用画出来。调用 DrawGeometry 需要传入需要画的几何、线条颜色,线条宽度

            using (var canvasPathBuilder = new CanvasPathBuilder(args.DrawingSession))
            {
                // 这里可以画出 Path 或写出文字 lindexi.github.io
                canvasPathBuilder.BeginFigure(100, 100);
                canvasPathBuilder.AddLine(200, 100);
                canvasPathBuilder.EndFigure(CanvasFigureLoop.Open);

                args.DrawingSession.DrawGeometry(CanvasGeometry.CreatePath(canvasPathBuilder), Colors.Gray, 2);
            }

画线

从上面的例子已经告诉大家如何画线,使用 BeginFigure 添加起点,然后使用 AddLine 把上一个点和输入的连成直线。

           using (var canvasPathBuilder = new CanvasPathBuilder(args.DrawingSession))
            {
                // 这里可以画出 Path 或写出文字 lindexi.github.io
                canvasPathBuilder.BeginFigure(100, 100);
                canvasPathBuilder.AddLine(200, 100);
                canvasPathBuilder.EndFigure(CanvasFigureLoop.Open);
            }

例子

下面给大家看一些已经画好的路径界面

绘制坐标系

   private void DrawPath(CanvasControl canvas, CanvasDrawEventArgs args)
        {
            var width = (float) canvas.ActualWidth-20;
            var height = (float) (canvas.ActualHeight)-20;
            var midWidth = (float) (width * .5);
            var midHeight = (float) (height * .5);
            Color color = Colors.Gray;
            using (var cpb = new CanvasPathBuilder(args.DrawingSession))
            {
                // Horizontal line
                // 水平线
                cpb.BeginFigure(new Vector2(0, midHeight));
                cpb.AddLine(new Vector2(width, midHeight));
                cpb.EndFigure(CanvasFigureLoop.Open);

                // Horizontal line arrow
                // 水平箭头
                cpb.BeginFigure(new Vector2(width - 10, midHeight - 3));
                cpb.AddLine(new Vector2(width, midHeight));
                cpb.AddLine(new Vector2(width - 10, midHeight + 3));
                cpb.EndFigure(CanvasFigureLoop.Open);

                args.DrawingSession.DrawGeometry(CanvasGeometry.CreatePath(cpb), color,strokeWidth: 1);
            }

            using (var cpb = new CanvasPathBuilder(args.DrawingSession))
            {
                // Vertical line
                // 垂直线
                cpb.BeginFigure(new Vector2(midWidth, 0));
                cpb.AddLine(new Vector2(midWidth, height));
                cpb.EndFigure(CanvasFigureLoop.Open);

                // Vertical line arrow
                cpb.BeginFigure(new Vector2(midWidth - 3, 10));
                cpb.AddLine(new Vector2(midWidth, 0));
                cpb.AddLine(new Vector2(midWidth + 3, 10));
                cpb.EndFigure(CanvasFigureLoop.Open);

                args.DrawingSession.DrawGeometry(CanvasGeometry.CreatePath(cpb), color, 1);
            }
        }

参见:第四章(图形篇2) 几何图形CanvasGeometry


本文会经常更新,请阅读原文: https://lindexi.gitee.io/lindexi/post/win10-uwp-win2d-%E4%BD%BF%E7%94%A8-Path-%E7%BB%98%E5%88%B6%E7%95%8C%E9%9D%A2.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接: https://lindexi.gitee.io ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏全沾开发(huā)

使用JavaScript实现一个俄罗斯方块

使用JavaScript实现一个俄罗斯方块 清明假期期间,闲的无聊,就做了一个小游戏玩玩,目前游戏逻辑上暂未发现bug,只不过样子稍...

3856
来自专栏章鱼的慢慢技术路

Python中的高级turtle(海龟)作图

4442
来自专栏游戏杂谈

as3绘制抛物线

一般做页游的过程中,特效的释放可能是不是固定位置的播放,是需要进行“运动的”(其实就是移动特效这个影响剪辑)。举个例子:步兵射箭,不确定箭发射的方向,事先也不...

1082
来自专栏程序员的诗和远方

20180818_ARTS_week08

这道题是要把字符串中的数字变成 int,通常的做法是遍历字符串,然后判断是不是在 0~9 中,如果把 0~9 放数组里每次循环检查感觉不是太好,时间复杂度是个 ...

681
来自专栏游戏杂谈

利用threshold实现的遮罩引导

点击“开始引导”,则进入引导操作。除指定的按钮可以操作外,其它区域均不可点击。这种应用当新功能或是新产品上线后,用来引导用户来使用产品/功能,是十分有用的。fa...

1101
来自专栏游戏开发那些事

【python游戏编程之旅】第四篇---pygame中加载位图与常用的数学函数。

本系列博客介绍以python+pygame库进行小游戏的开发。有写的不对之处还望各位海涵。

1402
来自专栏偏前端工程师的驿站

CSS魔法堂:"那不是bug,是你不懂我!" by inline-block

前言  每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display...

2198
来自专栏数据结构与算法

P1903 【模板】分块/带修改莫队(数颜色)

题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问。墨墨会像你发布如下指令: 1、 Q L R代表询问你从第L支画笔到...

35310
来自专栏前端小作坊

CSS3着重符及其fallback

在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:

1092
来自专栏前端布道

为什么是link-visited-hover-active

前言 通常我们在设置链接的一些伪类(link,visited,hover,active)样式时,要让不同的状态显示正确的样式,我们需要按一定的顺序设置这些伪类的...

3615

扫码关注云+社区

领取腾讯云代金券