title author date CreateTime categories
win2d CanvasCommandList 使用方法
lindexi
2018-11-9 20:8:4 +0800
2018-11-09 19:20:34 +0800
UWP win2d

在 win2d 可以通过 CanvasCommandList 定义很多命令,这些命令不是直接渲染到 Canvas 上,而是作为一个缓存。可以将 CanvasCommandList 作为输入,输入到其他的特效或参与其他的渲染。
特别在用 Win2d 写一个渲染框架的时候,通过 CanvasCommandList 可以实现内部元素容器的偏移和统一的效果

先安装好 Win2d 的 nuget 如果对于 win2d 的安装有疑问,请看 win10 uwp win2d 入门 看这一篇就够了

在界面加上代码

<Page
x:Class="lindexi.Win2d.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:NekeJivear"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:win2d="using:Microsoft.Graphics.Canvas.UI.Xaml"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid>
<win2d:CanvasControl x:Name="Canvas" Draw="Canvas_OnDraw"></win2d:CanvasControl>
<Button Content="确定" Margin="10,10,10,10" HorizontalAlignment="Center" VerticalAlignment="Bottom" Click="Button_OnClick"></Button>
</Grid>
</Page>

直接显示

在后台的代码需要添加两个函数

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{ } private void Button_OnClick(object sender, RoutedEventArgs e)
{ }

现在在 Canvas_OnDraw 尝试使用 CanvasCommandList 在看到代码的时候,大家会发现使用 CanvasCommandList 没有什么特殊的

创建 CanvasCommandList 需要传入 ICanvasResourceCreator 通过 sender 传入就可以

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
var canvasCommandList = new CanvasCommandList(sender); }

在 CanvasCommandList 添加渲染的系列命令的方法是调用 CreateDrawingSession 的方法返回 CanvasDrawingSession 这个值和普通的渲染用到的是相同的

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
var canvasCommandList = new CanvasCommandList(sender); using (var clds = canvasCommandList.CreateDrawingSession())
{ }
}

在 clds 里面添加渲染的命令就可以输入到 CanvasCommandList 作为缓存

现在尝试添加一些文字和元素

            var canvasCommandList = new CanvasCommandList(sender);

            using (CanvasDrawingSession clds = canvasCommandList.CreateDrawingSession())
{
clds.DrawText("lindexi", new Vector2(100, 100), Color.FromArgb(0xFF, 100, 100, 100));
clds.DrawRectangle(new Rect(new Point(10, 10), new Point(20, 15)),
new CanvasSolidColorBrush(sender, Colors.Black));
}

但是如果现在运行软件,是不会在界面看到任何的修改

因为 CanvasCommandList 需要调用 DrawImage 的方法才能画到 win2d 的控件上

            using (var ds = args.DrawingSession)
{
ds.DrawImage(canvasCommandList);
}

现在运行软件,可以看到下面图片

相对移动

如果在写一个渲染的框架,很多的时候会使用容器,容器的元素会相对于容器的坐标,而在容器移动的时候,对里面的元素是无法知道的。所以需要将里面的元素进行总体的移动。

通过 CanvasCommandList 可以很容易做到移动整个容器。

将里面的元素全部渲染到一个 CanvasCommandList 然后通过重载的方法移动 CanvasCommandList 的渲染,请看代码

            using (var ds = args.DrawingSession)
{
var offset = new Vector2(100, 100);
ds.DrawImage(canvasCommandList, offset);
}

这样就可以做到将这个 canvasCommandList 移动到 (100,100) 同时缓存在里面的命令也就被移动了 (100,100) 运行代码可以看到下面的图片

复用命令

除了可以用来作为元素的移动,还可以作为复用命令,假如有一个元素可以作为组合画出来

那么只需要多次画出的元素输入到 canvasCommandList 然后多次使用 canvasCommandList 也就是复用元素

如在 win2d 画出好看的图形 里面就有很多的好看的图形,想要多次画出这些图形,如果进行每次都来坐标的计算,那么这个代码一点也不好

例如我需要画出下面的图片

如果不使用 canvasCommandList 需要计算每个元素的坐标,这样的代码看起来不好,于是在使用了之后就可以十分快速使用下面代码画出

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
var canvasCommandList = new CanvasCommandList(sender); using (CanvasDrawingSession clds = canvasCommandList.CreateDrawingSession())
{
var pointList = CreateStone(new Point(10, 10), 10, 2, 5); var canvasGeometry = CanvasGeometry.CreatePolygon(sender,
pointList.Select(temp => new Vector2((float) temp.X, (float) temp.Y)).ToArray()); clds.DrawGeometry(canvasGeometry, Color.FromArgb(255, 100, 100, 100));
} using (var ds = args.DrawingSession)
{
for (int i = 0; i < sender.ActualWidth / 100; i++)
{
for (int j = 0; j < sender.ActualHeight / 100; j++)
{
var offset = new Vector2(i * 100, j * 100);
ds.DrawImage(canvasCommandList, offset);
}
}
}
}

这里的 CreateStone 是在 win2d 画出好看的图形 写的

所以对于需要重复使用的命令,就不需要使用 CanvasRenderTarget 的方法

与 CanvasRenderTarget 的区别

关于 CanvasRenderTarget 请看 win10 uwp win2d 离屏渲染 这个类可以用来不添加到视觉树的时候将命令画在图片上,可以输出为图片

也就是输入的命令实际上就进行渲染,而 CanvasCommandList 只是一个缓存,里面不会进行渲染。

两个类同时都可以作为 Image 的输入,如果只是需要复用某些元素,建议使用 CanvasCommandList 的方法,这样的速度很快

特效

如果对于很大的元素,如上面画出的元素,需要对整个图片进行特效。

关于特效请看 win10 uwp win2d 特效 这里使用 DirectionalBlurEffect 特效

这个特效可以用来将图片模糊,为了让大家比较容易看到特效,我需要将上面的代码做很小的修改

我将多个元素放在一个 CanvasCommandList 提取代码为一个函数,这个函数就是画出一个元素

        private static CanvasCommandList DrawSaJonairqai(CanvasControl sender)
{
var canvasCommandList = new CanvasCommandList(sender); using (CanvasDrawingSession clds = canvasCommandList.CreateDrawingSession())
{
var pointList = CreateStone(new Point(10, 10), 10, 2, 5); var canvasGeometry = CanvasGeometry.CreatePolygon(sender,
pointList.Select(temp => new Vector2((float)temp.X, (float)temp.Y)).ToArray()); clds.DrawGeometry(canvasGeometry, Color.FromArgb(255, 100, 100, 100));
} return canvasCommandList;
}

然后将上面的 DrawGeometry 修改为填充

      private static CanvasCommandList DrawSaJonairqai(CanvasControl sender)
{
var canvasCommandList = new CanvasCommandList(sender); using (CanvasDrawingSession clds = canvasCommandList.CreateDrawingSession())
{
var pointList = CreateStone(new Point(10, 10), 10, 2, 5); var canvasGeometry = CanvasGeometry.CreatePolygon(sender,
pointList.Select(temp => new Vector2((float)temp.X, (float)temp.Y)).ToArray()); clds.FillGeometry(canvasGeometry, Color.FromArgb(255, 100, 100, 100));
} return canvasCommandList;
}

替换渲染到画板为输入到另一个 CanvasCommandList 作为特效输入

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
var canvasCommandList = new CanvasCommandList(sender); using (var clds = canvasCommandList.CreateDrawingSession())
{
for (int i = 0; i < sender.ActualWidth / 50; i++)
{
for (int j = 0; j < sender.ActualHeight / 50; j++)
{
var offset = new Vector2(i * 50, j * 50);
clds.DrawImage(DrawSaJonairqai(sender), offset);
}
}
}
}

先尝试运行代码,可以看到下面的图片

现在添加 DirectionalBlurEffect 特效

            var directionalBlurEffect = new DirectionalBlurEffect()
{
Source = canvasCommandList,
BlurAmount = 3,
};

将特效渲染到控件,运行代码可以看到下面图片

            using (var ds = args.DrawingSession)
{
ds.DrawImage(directionalBlurEffect);
}

所有代码

       private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
var canvasCommandList = new CanvasCommandList(sender); using (var clds = canvasCommandList.CreateDrawingSession())
{
for (int i = 0; i < sender.ActualWidth / 50; i++)
{
for (int j = 0; j < sender.ActualHeight / 50; j++)
{
var offset = new Vector2(i * 50, j * 50);
clds.DrawImage(DrawSaJonairqai(sender), offset);
}
}
} var directionalBlurEffect = new DirectionalBlurEffect()
{
Source = canvasCommandList,
BlurAmount = 3,
}; using (var ds = args.DrawingSession)
{
ds.DrawImage(directionalBlurEffect);
}
} private static CanvasCommandList DrawSaJonairqai(CanvasControl sender)
{
var canvasCommandList = new CanvasCommandList(sender); using (CanvasDrawingSession clds = canvasCommandList.CreateDrawingSession())
{
var pointList = CreateStone(new Point(10, 10), 10, 2, 5); var canvasGeometry = CanvasGeometry.CreatePolygon(sender,
pointList.Select(temp => new Vector2((float) temp.X, (float) temp.Y)).ToArray()); clds.FillGeometry(canvasGeometry, Color.FromArgb(255, 100, 100, 100));
} return canvasCommandList;
} public static Point[] CreateStone(Point center, int outerRadius, int innerRadius, int arms)
{
int centerX = (int) center.X;
int centerY = (int) center.Y;
Point[] points = new Point[arms * 2];
double offset = Math.PI / 2;
double arc = 2 * Math.PI / arms;
double half = arc / 2;
for (int i = 0; i < arms; i++)
{
Random randomOuter = new Random((int) DateTime.Now.Ticks);
outerRadius = outerRadius -
randomOuter.Next((int) (innerRadius * 0.06 * new Random().Next(-20, 20) / 30d),
(int) (innerRadius * 0.08));
Random randomInner = new Random(Guid.NewGuid().GetHashCode());
innerRadius = innerRadius +
randomInner.Next((int) (innerRadius * 0.02 * new Random().Next(-100, 100) / 150d),
(int) (innerRadius * 0.08));
if (innerRadius > outerRadius)
{
int temp = outerRadius;
outerRadius = innerRadius;
innerRadius = temp;
} double angleTemp = arc * randomInner.Next(-5, 5) / 10d;
var angle = i * arc;
angle += angleTemp;
points[i * 2].X = (float) (centerX + Math.Cos(angle - offset) * outerRadius) + 20;
points[i * 2].Y = (float) (centerY + Math.Sin(angle - offset) * outerRadius) + 20;
points[i * 2 + 1].X = (float) (centerX + Math.Cos(angle + half - offset) * innerRadius) + 20;
points[i * 2 + 1].Y = (float) (centerY + Math.Sin(angle + half - offset) * innerRadius) + 20;
} return points;
}

2018-11-9-win2d-CanvasCommandList-使用方法的更多相关文章

  1. 【译】ASP.NET MVC 5 教程 - 11:Details 和 Delete 方法详解

    原文:[译]ASP.NET MVC 5 教程 - 11:Details 和 Delete 方法详解 在教程的这一部分,我们将研究一下自动生成的 Details 和Delete 方法. Details ...

  2. SQLMAP注入教程-11种常见SQLMAP使用方法详解

    sqlmap也是渗透中常用的一个注入工具,其实在注入工具方面,一个sqlmap就足够用了,只要你用的熟,秒杀各种工具,只是一个便捷性问题,sql注入另一方面就是手工党了,这个就另当别论了.今天把我一直 ...

  3. OI生涯回忆录 2018.11.12~2019.4.15

    上一篇:OI生涯回忆录 2017.9.10~2018.11.11 一次逆风而行的成功,是什么都无法代替的 ………… 历经艰难 我还在走着 一 NOIP之后,全机房开始了省选知识的自学. 动态DP,LC ...

  4. China Intelligent Office Summit(2018.11.21)

    时间:2018.11.21地点:中关村软件园国际会议中心

  5. International Programming Retreat Day(2018.11.17)

    时间:2018.11.17地点:北京国华投资大厦

  6. Intel Artificial Intelligence Conference(2018.11.14)

    时间:2018.11.14地点:北京国贸大酒店

  7. [转]11种常见sqlmap使用方法详解

    sqlmap也是渗透中常用的一个注入工具,其实在注入工具方面,一个sqlmap就足够用了,只要你用的熟,秒杀各种工具,只是一个便捷性问题,sql注入另一方面就是手工党了,这个就另当别论了.今天把我一直 ...

  8. 2018.11.23 浪在ACM 集训队第六次测试赛

    2018.11.23 浪在ACM 集训队第六次测试赛 整理人:刘文胜 div 2: A: Jam的计数法 参考博客:[1] 万众 B:数列 参考博客: [1] C:摆花 参考博客: [1] D:文化之 ...

  9. 2018.11.16 浪在ACM 集训队第五次测试赛

    2018.11.16 浪在ACM 集训队第五次测试赛 整理人:李继朋 Problem A : 参考博客:[1]朱远迪 Problem B : 参考博客: Problem C : 参考博客:[1]马鸿儒 ...

  10. 2018.11.9浪在ACM集训队第四次测试赛

    2018.11.9浪在ACM集训队第四次测试赛 整理人:朱远迪 A 生活大爆炸版 石头剪刀布           参考博客:[1] 刘凯 B 联合权值            参考博客: [1]田玉康 ...

随机推荐

  1. day39 09-Spring的AOP:基于AspectJ的通知类型

     AspectJ的六种通知的类型,最后一种不讲,只讲前五种.  环绕通知是可以阻止目标方法执行的. <?xml version="1.0" encoding="UT ...

  2. 学生信息管理系统之【修改信息窗口】 标签: 数据库vb 2014-06-13 21:23 1167人阅读 评论(15)

    自从开始敲学生信息管理,就发现有几个窗口从来木有成功打开过,它们是(修改学籍信息)(修改成绩信息)和(修改课程信息)窗口,这几个窗口每次想打开的时候都会弹出"实时错误:3021"这 ...

  3. 使用DataWorks调度DLA循环任务

    DataWorks是阿里云上的一款热门产品,可以为用户提供大数据开发调度服务.它支持了Data Lake Analytics(后文简称DLA)以后,DLA用户可以通过它进行定时任务调度,非常方便.本文 ...

  4. HZOJ Silhouette

    转化一下题意:给出矩阵每行每列的最大值,求满足条件的矩阵个数. 先将A,B按从大到小排序,显然没有什么影响.如果A的最大值不等于B的最大值那么无解否则一定有解. 考虑从大到小枚举A,B中出现的数s,那 ...

  5. C#面向对象基础--类与对象

    1.类与对象 类是面向对象编程的基本单元:类造出来的变量叫对象. 一个类包含俩种成员:字段与方法. 字段即变量,方法即函数. 面向对象思想:教给我们如何合理的运用类的规则去编写代码. 2.类的字段 字 ...

  6. [***]HZOJ 优美序列

    又是一道神仙题.考试的时候居然打了一个回滚莫队,不知道我咋想的…… 先说一个某OJT80,洛谷T5分的思路(差距有点大): 可以把位置和编号映射一下,区间内最大值和最小值对应的位置,每次更新,直到找到 ...

  7. Android ListView显示底部的分割线

    有些时候,我们会提出这样的需求,希望ListView显示底部(顶部)的分割线,这样做,会使得UI效果更加精致,如下图所示: 如果搜索资料,大家会搜到一堆相关的方法,最多的莫过于设置listview的f ...

  8. VSCode配置启动Vue项目

    下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,这里要安装两个插件. 1.vetur插件的安装 该插件是vue文件 ...

  9. 开源中国 2014 最受关注开源软件排行榜 TOP 50

    开源中国 2014 最受关注开源软件排行榜 TOP 50 开源中国 2014 年最受关注软件排行榜 TOP 50 正式出炉!2014 年结束了,我们来了解一下过去一年里开源中国最受欢迎的 50 款软件 ...

  10. js毫秒数转天时分秒

    formatDuring: function(mss) {   var days = parseInt(mss / (1000 * 60 * 60 * 24));   var hours = pars ...