[UWP]使用Win2D的BorderEffect实现图片的平铺功能
1. WPF有,而UWP没有的图片平铺功能
在WPF中只要将ImageSource的TileMode
属性设置为Tile
即可实现图片的平铺,具体可见WPF的这些文档:
ImageBrush 类 (System.Windows.Media) _ Microsoft Docs
TileBrush 类 (System.Windows.Media) _ Microsoft Docs
TileBrush.TileMode 属性 (System.Windows.Media) _ Microsoft Docs
WPF图片平铺功能我几乎没用过,只是作为基础中的基础知识记住了用法。我以为那么基础的功能在UWP肯定有,根本不用怀疑,所以当我在UWP中发现这么基础的东西居然没有时真的吓了一跳。
上图左面是WPF版本的TileBrush
,右边是UWP版本,可以看到UWP版本功能少了一大半。
这么小的一个类,我觉得没必要在这里做简化吧。幸好图片平铺可以使用Win2D里的BorderEffect实现。
2. UWP中的图片平铺功能
<Grid>
<Rectangle x:Name="Background" />
</Grid>
假设有以上的XAML,要在名为Background
的元素上应用合成画笔,首先引用Win2D.uwp nuget包,然后参考官方文档中 合成画笔 的部分使用图片创建一个合成画笔:
var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
var imageBrush = compositor.CreateSurfaceBrush();
var loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///110Strawberry.png"));
imageBrush.Surface = loadedSurface;
imageBrush.Stretch = CompositionStretch.None;
现在就差创建一个SpriteVisual
并把它应用到Background的VisualTree上了,顺便一提,是这张图片:
不过要实现平铺功能还需要创建一个BorderEffect:
var borderEffect = new BorderEffect
{
Source = new CompositionEffectSourceParameter("source")
};
var effectFactory = compositor.CreateEffectFactory(borderEffect);
var effectBrush = effectFactory.CreateBrush();
effectBrush.SetSourceParameter("source", imageBrush);
var sprite = compositor.CreateSpriteVisual();
sprite.Brush = effectBrush;
var backgroundVisual = ElementCompositionPreview.GetElementVisual(Background);
var bindSizeAnimation = compositor.CreateExpressionAnimation("backgroundVisual.Size");
bindSizeAnimation.SetReferenceParameter("backgroundVisual", backgroundVisual);
sprite.StartAnimation("Size", bindSizeAnimation);
ElementCompositionPreview.SetElementChildVisual(Background, sprite);
总之BorderEffect
以imageBrush为Source,其它都保留默认值,将它它应用到Background的VisualTree上后效果如下:
这还不是我想要的平铺效果。这是因为这时候ExtendX
和ExtendY
保持默认值的Clamp
,这个类型会让BorderEffect重复图像边缘的属性。如果要实现我想要的平铺需要将这两个属性设置为Wrap
:
borderEffect.ExtendX = CanvasEdgeBehavior.Wrap;
borderEffect.ExtendY = CanvasEdgeBehavior.Wrap;
居然不是从左上角开始平铺的,和我的想法还是有出入,不过这种细节就算了。顺便一提ExtendX
和ExtendY
还可以设置为Mirror
,效果如下:
3. 绑定Size
var backgroundVisual = ElementCompositionPreview.GetElementVisual(Background);
var bindSizeAnimation = compositor.CreateExpressionAnimation("backgroundVisual.Size");
bindSizeAnimation.SetReferenceParameter("backgroundVisual", backgroundVisual);
sprite.StartAnimation("Size", bindSizeAnimation);
最后顺便提一下,上面的代码中有这么一段代码没介绍到,这是用来动态地设置SpriteVisual
的尺寸。ExpressionAnimation有一直运行和永不停止这两个特性,创建ExpressionAnimation并在SpriteVisual
上运行动画,实际上将SpriteVisual
的Size永远地绑定为backgroundVisual 的Size的值。其实简单地订阅SizeChanged
事件也能达到这个效果,代码好像还少些。
4. 结语
这么简单的功能居然都要这么多代码,或者有更简单的实现?不过凡事都有要辩证地看,幸好它这么复杂,又让我水了一篇博客。
Stack Overflow有给出其它的方案,可以参考一下。
5. 参考
Border effect - Win32 apps _ Microsoft Docs
合成画笔 - Windows UWP applications _ Microsoft Docs
【Win2D】【译】Win2D 快速入门 - h82258652 - 博客园
基于关系的动画 - Windows UWP applications Microsoft Docs
c# - UWP - How to tile a background image - Stack Overflow
[UWP]使用Win2D的BorderEffect实现图片的平铺功能的更多相关文章
- Android 背景图片重复平铺
有时候我们需要将一个图片横向或者纵向的平铺(重复循环),这个时候我们需要创建一个xml文件,如下: <?xml version ="1.0" encoding =" ...
- ios 缩放图片(平铺)
//缩放图片(平铺) - (UIImage *)resizeImage:(NSString *)imgName { UIImage *bgImage = [UIImage imageNamed:im ...
- css如何将图片横向平铺?
在CSS中,可以使用background(背景)属性来添加图片,默认图片是向x轴和y轴重复.那么css如何将图片横向平铺?下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法,希望对大家有所帮 ...
- CSS背景颜色、背景图片、平铺、定位、固定
CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...
- 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕(自适应大小)
默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. ...
- 使用一个小图片tile平铺到ImageView中或Activity背景
方法两种: 首先必须在res/drawable目录下包含一个background.jpg 方法1:在res/drawable中创建一个xml文件(background_repeat.xml) 内容为 ...
- [UWP]通过自定义XamlCompositionBrushBase实现图片平铺
1. 什么是XamlCompositionBrushBase 我早就想试试自定义XamlCompositionBrushBase,但一直没机会.上一篇文章介绍到使用Win2D的BorderEffect ...
- <<< html图片背景平铺
CSS背景图片平铺技巧 使用CSS来设置背景图片同传统的做法一样简单,但相对于传统控制方式,CSS提供了更多的可控选项,我们先来看看最基本的设置图片的方法.html代码: 代码如下: <divi ...
- 一款js控制背景图片平铺
背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~ <style> html,body{;;} .body{background: url(ima ...
随机推荐
- RAID 10 配置流程
1.在虚拟机中再添加5块硬盘: 2.fdisk -l 可以查看当前虚拟机中的磁盘情况. 3.使用mdadm命令创建RAID10,名称为”/dev/md0″. -C代表创建操作,-v显示创建过程,-a ...
- Vue-CLI项目-vue-cookie与vue-cookies处理cookie
08.31自我总结 Vue-CLI项目-vue-cookie与vue-cookies处理cookie vue-cookie 一.模块的安装 npm install vue-cookie --save ...
- session与cookie,django中间件
0819自我总结 一.session与cookie 1.django设置session request.session['name'] = username request.session['age' ...
- Cobalt Strike之CHM、LNK、HTA钓鱼
CHM钓鱼 CHM介绍 CHM(Compiled Help Manual)即“已编译的帮助文件”.它是微软新一代的帮助文件格式,利用HTML作源文,把帮助内容以类似数据库的形式编译储存.利用CHM钓鱼 ...
- [HNOI2007] 理想正方形 二维ST表
题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一行为3个整数,分别表示a,b,n的值 第二行至 ...
- 告别硬编码,mysql 如何实现按某字段的不同取值进行统计
上周我突然意识到,我在grafana上写的 sql 语句存在多处硬编码.这篇笔记将记录如何实现没有硬编码的sql语句,以及自学编程过程中如何应对自己的笨拙代码和难题不断的状况. 1.有效但粗笨的硬编码 ...
- 22.Linux定时任务
1.计划任务时间管理 参数 含义 -e 编辑定时任务 -l 查看定时任务 -r 删除定时任务 -u 指定其他用户 \* 表示任意的(分.时.日.月.周)时间都执行 \- 表示一个时间范围段, 如5-7 ...
- wpf 依赖强制回调
依赖属性的强制转换加回调,后期自己再改 using System; using System.Collections.Generic; using System.Diagnostics; using ...
- 用Python将处理数据得到的csv文件分类(按顺序)保存
用Python中的os和numpy库对文件夹及处理数据后得到的文件进行分类保存: import numpy as np import os for m in range(699,0,-35): cur ...
- 源码剖析Yii错误 Invalid parameter number: no parameters were bound
ActiveRecord使用的一个陷阱导致 Invalid parameter number: no parameters were bound 请看下面的例子 $criteria = new CDb ...