IT知识库 购物 网址 游戏 小说 歌词 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> WinRT-Metro -> UWP 手绘视频创作工具技术分享系列 -> 正文阅读

[WinRT-Metro]UWP 手绘视频创作工具技术分享系列

UWP 手绘视频创作工具技术分享系列 本篇作为技术分享系列的第四篇,详细讲一下手绘视频中 Surface Pen 和 Surface Dial 的使用场景。 
先放一张微软官方商城的图,Surface 的使用中结合了 Surface Pen 和 Surface Dial。

Surface Pen 的使用场景不难想象,就像 iPad 和 Android Pad 配置的笔一样,Surface Pen 也在书写、书画和日常操作中发挥着很重要的作用。微软的 Surface Pro 和 Surface Book 系列中都重点强调了 Surface Pen 的多种用途和便捷性。而在手绘视频中,用户主动创作、体现个性化最重要的部分,就是用户用鼠标、手指触控或 Surface Pen 操作的文字和绘画了,相比鼠标和手指,Surface Pen 无疑是最适合创作的了。 
Surface Dial 相对来说会稍微陌生一些,日常工作中很少见到,因为 Surface Pro 和 Surface Book 销售时并不包括它,需要单独购买,所以使用没有那么普及。但是对于艺术创作者,Surface Dial 还是相当好用的,它可以完成很多辅助快捷功能,发挥非主力手的作用,解放你的主力手,如图中所示:右手是主力创作手,专门负责绘画等复杂操作;左手是非主力手,负责一些功能性的辅助操作,比如切换笔的颜色、粗细、放大缩小画布等,另外 Dial 会默认附加一些系统级别的快捷功能,如音量调节,界面滚动等。另外 Dial 的操作分为两种模式:off screen 和 on screen,顾名思义就是屏幕外和屏幕上的功能,目前支持 on screen 功能的只有 Surface Studio,其他设备只能 off screen 操作。on screen 时,圆形菜单会出现在 Dial 的周围,而且会跟随 Dial 移动,操作相当直观,而 off screen 时,圆形菜单会以较小的形式出现。下图分别是 on screen 和 off screen 的模式:
 

对 Surface Pen 和 Surface Dial 有一个初步的认识后,我们就开始正式讲一下它们在 UWP 手绘视频创作工具中的应用。
首先是 Surface Pen,它除了可以完成鼠标的操作,如点击等之外;对于手绘视频应用更重要的是,笔记书画的功能。这里我们主要用到了 InkToolbar 和 InkCanvas,InkToolbar 是一个 Ink 工具条,支持自定义按钮,提供多种笔迹/直尺/圆角/橡皮擦等,而 InkCanvas 是用于显示 InkToolbar 选择的画笔绘制出来的笔迹的。这方面有很多文章有过系统的介绍,微软官网也有很多文章:https://docs.microsoft.com/en-us/windows/uwp/input-and-devices/pen-and-stylus-interactions, 
在手绘视频中的使用,分为两个步骤:1. InkCanvas 绘制完成后,保存为 Ink 数据;2. 取出 Ink 数据,按照线条长度对拆分,保证每段线条不超过某个阈值,然后把拆分后的 Ink 序列传给 Win2D 去做动态绘制。
以上处理,只针对圆珠笔有效,而针对非圆珠笔,因为存在线条对笔尖角度的变换和半透明颜色的叠加,所以需要做一点处理,如铅笔、钢笔和荧光笔,需要在笔尖变换方向时做形状判断,在线条叠加时做颜色加深;另外针对荧光笔,它对被覆盖的颜色会有荧光的混色效果,实际是把被覆盖颜色修改掉的,需要使用 OpenCV 做混色的计算,还需要注意边缘的平滑处理。
除了系统提供的笔尖,我们也可以自己定义笔尖,这里简单提一下:笔尖有两个重要的属性需要定义,笔尖的形状和它的填充。既包括了笔尖的轮廓,也包括他的填充,如圆珠笔的原型轮廓,钢笔的椭圆形轮廓;圆珠笔的完全不透明填充,铅笔的离散点填充,荧光笔的半透明填充。定义了这些属性后,在 InkCanvas 中书写时,笔尖结合方向,决定了不同方向笔画的形状和不同的粗细,笔尖的填充,决定了在反复涂画时,是否有颜色加深处理。

接下来是 Surface Dial,它有几种操作:长按,短按和旋转,我们所有的操作都基于这几个操作。Surface Dial 提供了一个 Menu,长按 Dial 后呼出 Menu,我们需要把自定义操作的数据塞进 Menu 里,作为 Menu 的一个 Item,在 Dial 旋转到该 Item 时,短按后进入它的功能。可以是直接执行某些功能,也可以是进去另一个子 Menu。Dial 呼出时的 Menu 样式是不可以自定义的,所以我们如果要自定义 Menu 样式,只能作为子 Menu 出现,如上面 on screen 图所示,这个 Menu 就是一个完全自定义的颜色选择器。
因为子 Menu 可以完全自定义,所以我们可以想一下怎么制作这个 Menu,比如颜色选取,我们用一个圆形供用户旋转,短按后选择某个颜色,长按切换功能;为了兼容 off screen 和 on screen 模式,我们判断到 off 或 on 后,决定圆形的半径,在 off 时小一些,在 on 时留出 Dial 的尺寸。因为 Dial 的旋转操作方式,很多子 Menu 都选择了圆形的方式。

Ink 和 Dial 的介绍就到这里,我们更多的介绍它的应用场景,具体的实现代码大家可以去微软官方查看文档,实现过程相对简单,不做赘述了,谢谢!
上一篇文章      下一篇文章      查看所有文章
加:2017-10-09 23:23:01  更:2017-10-09 23:23:03 
 
  WinRT-Metro 最新文章
背水一战 Windows 10 (76)
背水一战 Windows 10 (75)
uwp ListView列表滑动特效
背水一战 Windows 10 (74)
背水一战 Windows 10 (73)
背水一战 Windows 10 (72)
UWP 手绘视频创作工具技术分享系列
13、在 uwp应用中,给图片添加高斯模糊滤镜
Win2D学习系列(一):HelloWin2D
背水一战 Windows 10 (7)
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年9日历
2018-9-25 22:51:43
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库