title author date CreateTime categories
win10 uwp win2d 离屏渲染
lindexi
2018-08-10 19:17:19 +0800
2018-5-29 11:6:30 +0800
UWP win2d 渲染

离屏渲染(Offscreen drawing)是一个不错的科技,在系统有空的时候,提前先画出部分界面。这样在需要直接渲染的时候就可以直接拿出来而不需要等待进行渲染的时候才画出来。

实际上之前我已经写过一篇博客关于 CanvasRenderTarget ,离屏渲染需要使用到 CanvasRenderTarget 。

先来写一个简单的界面,在写之前,请安装 Win2d 。

<Page
x:Class="SairkaDeebowhar.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SairkaDeebowhar"
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="CanvasControl" Draw="CanvasControl_OnDraw"></win2d:CanvasControl>
<Button Content="确定" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Button_OnClick"></Button>
</Grid>
</Page>

在点击确定的时候开始进行离屏渲染,因为如果需要让CanvasControl开始渲染需要调用Invalidate,但是调用这个函数不是立刻就渲染,而且在下一个无法控制的时间进行渲染。

所以在 按钮点击的时候可以进行离屏渲染,这时CanvasControl在渲染的时候直接拿按钮点击下去画的就可以。

离屏渲染也叫离线渲染,为了让用户看到炫酷的界面,要求渲染的时间小于 16 毫秒,也就是一秒钟至少60刷新。

渲染的时间是很有限的,如果在渲染中需要耦合计算,那么会让渲染的性能降低。

例如下面的代码,在按钮点击下去的时候,经过很长时间的计算才能知道写入我的名字,如果把代码放在CanvasControl画的时候计算,那么会影响性能。

建议的方法是在按钮点击的时候,在按钮点击那里做计算,这时CanvasControl还可以画其他的东西。

因为我写的是呆磨,很简单,没有让大家看到CanvasControl在空闲的时候做的事情。

      private void Button_OnClick(object sender, RoutedEventArgs e)
{
CanvasDevice device = CanvasDevice.GetSharedDevice();
CanvasRenderTarget offscreen = new CanvasRenderTarget(device, width: 100, height: 100, dpi: 96);
using (CanvasDrawingSession ds = offscreen.CreateDrawingSession())
{
//经过很多时间的计算,才知道需要写我的名字
ds.DrawText("lindexi", new Vector2(10, 10), Colors.Black);
} _offscreen = offscreen; // 调用这个函数,会在无法控制的时间调用 CanvasControl_OnDraw ,这时可以发出已经画出来的
CanvasControl.Invalidate();
} private CanvasRenderTarget _offscreen;

CanvasControl_OnDraw 就判断 _offscreen 不是空就显示

        private void CanvasControl_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
if (_offscreen != null)
{
args.DrawingSession.DrawImage(_offscreen,
new Rect(50, 50, _offscreen.Bounds.Width, _offscreen.Bounds.Height));
}
}

为什么需要判断_offscreen不是空?因为在xaml加载的时候,就会触发CanvasControl_OnDraw,如果传入DrawImage是一个空,那么会出现参数异常。

通过离屏渲染的图可以使用特效,请看代码

       private void Button_OnClick(object sender, RoutedEventArgs e)
{
CanvasDevice device = CanvasDevice.GetSharedDevice();
CanvasRenderTarget offscreen = new CanvasRenderTarget(device, width: 100, height: 100, dpi: 96);
using (CanvasDrawingSession ds = offscreen.CreateDrawingSession())
{
//经过很多时间的计算,才知道需要写我的名字
ds.DrawText("lindexi", new Vector2(10, 10), Colors.Black);
} GaussianBlurEffect effect = new GaussianBlurEffect()
{
Source = offscreen,
BlurAmount = 1.0f
}; _offscreen = offscreen; _effect = effect; // 调用这个函数,会在无法控制的时间调用 CanvasControl_OnDraw ,这时可以发出已经画出来的
CanvasControl.Invalidate();
} private CanvasRenderTarget _offscreen; private GaussianBlurEffect _effect;

这时尝试在Win2d显示效果

        private void CanvasControl_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
if (_offscreen != null)
{
args.DrawingSession.DrawImage(_offscreen,
new Rect(50, 50, _offscreen.Bounds.Width, _offscreen.Bounds.Height));
} if (_effect != null)
{
args.DrawingSession.DrawImage(_effect);
}
}

需要注意,这时的特效的计算是在CanvasControl_OnDraw这时渲染才计算特效。

离线渲染的意思是可以在其他线程渲染,虽然渲染都是在GPU渲染,都是渲染是包括告诉如何渲染和把图片画出来,可以看到如何渲染就可能需要在CPU做很多计算。上面的代码,我经过很多计算才知道需要写 lindexi ,因为本渣叫金鱼,金鱼的意思就是记忆力很差,经常不知道自己叫什么。计算出名字需要的时间是很长的。

如果在按钮按下需要很长时间的计算,那么性能也是很差,这时建议在其他线程做。

       private async void Button_OnClick(object sender, RoutedEventArgs e)
{
await Task.Run(() =>
{
// 下面代码可能在 CanvasControl_OnDraw 画出 CanvasRenderTarget 会出现 0x88990012 异常,解决方法请看文章最后
CanvasDevice device = CanvasDevice.GetSharedDevice();
CanvasRenderTarget offscreen = new CanvasRenderTarget(device, width: 100, height: 100, dpi: 96);
using (CanvasDrawingSession ds = offscreen.CreateDrawingSession())
{
//经过很多时间的计算,才知道需要写我的名字
ds.DrawText("lindexi", new Vector2(10, 10), Colors.Black);
} GaussianBlurEffect effect = new GaussianBlurEffect()
{
Source = offscreen,
BlurAmount = 1.0f
}; _offscreen = offscreen; _effect = effect;
}); // 调用这个函数,会在无法控制的时间调用 CanvasControl_OnDraw ,这时可以发出已经画出来的
CanvasControl.Invalidate();
}

这就是离屏渲染的使用方法,在其他线程做耗时的渲染,在显示的时候可以快速画出

Offscreen drawing

win2d CanvasRenderTarget vs CanvasBitmap

注意,暗影吉他手告诉我,在 Button_OnClick 的第一句话CanvasDevice device = CanvasDevice.GetSharedDevice();,使用 CanvasDevice.GetSharedDevice() 是错误写法。在CanvasControl_OnDraw里面使用用这个device创建的 CanvasRenderTarget 会弹 0x88990012 异常(Objects used together must be created from the same factory instance)。应该在CreateResources里面得到device。在我的设备上面的代码是可以运行,所以暂时不修改。

多谢暗影吉他手发现问题

参见:Win2D 官方文章系列翻译 - 幕后绘制 - void² - 博客园

2018-8-10-win10-uwp-win2d-离屏渲染的更多相关文章

  1. win10 uwp win2d CanvasVirtualControl 与 CanvasAnimatedControl

    本文来告诉大家 CanvasVirtualControl ,在什么时候使用这个控件. 在之前的入门教程win10 uwp win2d 入门 看这一篇就够了我直接用的是CanvasControl,实际上 ...

  2. win10 uwp 通过 Win2d 完全控制笔迹绘制逻辑

    本文来告诉大家如何通过 Win2d 完全控制笔迹绘制逻辑,本文适合用来实现复杂的自定义逻辑,可以完全控制笔迹的行为.包括在书写过程中切换模式,如进行手势擦除切换为橡皮擦模式 本文提供的方法适合用来做复 ...

  3. win10 uwp 渲染原理 DirectComposition 渲染

    本文来告诉大家一个新的技术DirectComposition,在 win7 之后(实际上是 vista),微软正在考虑一个新的渲染机制 在 Windows Vista 就引入了一个服务,桌面窗口管理器 ...

  4. win10 uwp 萤火虫效果

    原文:win10 uwp 萤火虫效果 本文在Nukepayload2指导下,使用他的思想用C#写出来. 本文告诉大家,如何使用 win2d 做出萤火虫效果. 安装 win2d 安装win2d的方法请使 ...

  5. win10 uwp 毛玻璃

    毛玻璃在UWP很简单,不会和WPF那样伤性能. 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃. 毛玻璃可以使用 win2D 方法,也可以使用 Compositor . 使用 win2d 得 ...

  6. win10 uwp 使用 Microsoft.Graph 发送邮件

    在 2018 年 10 月 13 号参加了 张队长 的 Office 365 训练营 学习如何开发 Office 365 插件和 OAuth 2.0 开发,于是我就使用 UWP 尝试使用 Micros ...

  7. Win10 UWP开发系列:实现Master/Detail布局

    在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...

  8. Win10 UWP开发实现Bing翻译

    微软在WP上的发展从原来的Win7到Win8,Win8.1,到现在的Win10 UWP,什么是UWP,UWP即Windows 10 中的Universal Windows Platform简称.即Wi ...

  9. Win10/UWP开发—使用Cortana语音与App后台Service交互

    上篇文章中我们介绍了使用Cortana调用前台App,不熟悉的移步到:Win10/UWP开发—使用Cortana语音指令与App的前台交互,这篇我们讲讲如何使用Cortana调用App的后台任务,相比 ...

随机推荐

  1. 大数据技术之Flume

    第1章 概述 1.1 Flume定义 Flume是Cloudera提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统.Flume基于流式架构,灵活简单. 1.2 Flume组成架构 ...

  2. 【OI】快读

    不必多说. #include <cstdio> #include <cstring> int read(){ ,f = ; char c = getchar(); ') { ; ...

  3. jdbc框架-dbutils的简单使用

    jdbc框架-dbutils的简单使用 dbutils:是apache组织的一个工具类,jdbc的框架,更方便我们使用 使用步骤: 1.导入jar包(commons-dbutils-1.4.jar) ...

  4. python Python程序的架构

  5. Leetcode724.Find Pivot Index寻找数组的中心索引

    给定一个整数类型的数组 nums,请编写一个能够返回数组"中心索引"的方法. 我们是这样定义数组中心索引的:数组中心索引的左侧所有元素相加的和等于右侧所有元素相加的和. 如果数组不 ...

  6. 使用 Linux Centos Docker 安装 2Bizbix

    在 Docker 安装 2Bizbix 安装 Centos 7 安装 mysql5.5 镜像 映射好数据库的配置文件和数据库目录 在 Windows 安装 2Bizbox 安装 jboss/base- ...

  7. jquery on事件

    可以给后添加的动态元素绑定事件

  8. python 函数定义与调用时,不定长参数的传入

  9. jmeter循环取消今天所有的订单

    结构 1.首先,添加JDBC Connection Configuration 2.其次添加JDBC request 添加循环控制器 循环控制器下方添加计数器 ${__V(reservationID_ ...

  10. java一般处理高并发的技术手段

    应对高并发的解决方案: 1.将压力放在数据库上面,添加行级锁. select * from table for update; 2.将压力放在应用程序上面,对方法加synchronized同步.