[UWP]通过自定义XamlCompositionBrushBase实现图片平铺
1. 什么是XamlCompositionBrushBase
我早就想试试自定义XamlCompositionBrushBase,但一直没机会。上一篇文章介绍到使用Win2D的BorderEffect实现图片的平铺功能,原理很简单,但每次都要写这些代码很繁琐,正好就用这个作为例子试试XamlCompositionBrushBase。
CompositionBrush灵活多变,它的基本用法如下:
- 通过Compositor创建CompositionBrush;
- 配置CompositionBrush;
- 创建SpriteVisual并将它的Brush设置为CompositionBrush;
- 使用ElementCompositionPreview.SetElementChildVisual 将SpriteVisual设置到某个UIElement的可视化层里。
这些步骤很繁琐,而且不能用在XAML中。XamlCompositionBrushBase提供了将CompositionBrush用在XAML中一个桥梁,他继承自Brush
类,可以直接像普通的XAML 画笔(如SolidColorBrush)那样直接用在XAML中。
如上图所示,Windows Community Toolkit中已经提了很不少XamlCompositionBrushBase的实现,它们的使用方式已经有很多文章介绍,这里不一一列举。
2. 自定义XamlCompositionBrushBase
这篇文章将介绍一个自定义的画笔:TiledImageBrush
,它的主要目标是实现ImageBrush没有的图片平铺功能,并且它可以在XAML中使用,使用方式如下:
<Rectangle IsHitTestVisible="False">
<Rectangle.Fill>
<controls:TiledImageBrush Source="ms-appx:///Assets/flutter.png"/>
</Rectangle.Fill>
</Rectangle>
顺便复习下普通的ImageBrush的用法:
<Rectangle >
<Rectangle.Fill>
<ImageBrush ImageSource="ms-appx:///Assets/flutter.png"/>
</Rectangle.Fill>
</Rectangle>
看起来TiledImageBrush的用法是不是和ImageBrush很像?接下来讲解TiledImageBrush
的实现步骤。TiledImageBrush
继承自XamlCompositionBrushBase
,而实现XamlCompositionBrushBase
的一般步骤如下:
protected override void OnConnected()
{
// Delay creating composition resources until they're required.
if (CompositionBrush == null)
{
CompositionBrush = CreateCompositionBrush();//Create A CompositionBrush.
}
}
protected override void OnDisconnected()
{
// Dispose of composition resources when no longer in use.
if (CompositionBrush != null)
{
CompositionBrush.Dispose();
CompositionBrush = null;
}
}
首先重写OnConnected,当画笔在屏幕上首次用于绘制元素时会调用这个函数。在这个函数里创建CompositionBrush并赋值给XamlCompositionBrushBase.CompositionBrush。
然后重写OnDisconnected,它在画笔不再用于绘制任何元素时被调用。在这个函数里尽可能地释放各种资源,例如CompositionBrush
。这两步就是实现XamlCompositionBrushBase
的基本步骤。
创建CompositionBrush有很多种玩法,我之前写过两篇文章分别介绍 CompositionBrush入门及 在CompositionBrush上使用Effect。这里使用使用Win2D的BorderEffect实现图片的平铺功能这篇文章里介绍到的代码,首先使用LoadedImageSurface.StartLoadFromUri
创建CompositionSurfaceBrush
,然后加入到BorderEffect里实现图片平铺,然后把产生的CompositionEffectBrush赋值给XamlCompositionBrushBase.CompositionBrush
。
TiledImageBrush中添加了Source
属性用于设置图片Uri(实际上是个ImageSource类型),模仿ImageBrush,这里的Source也是一个ImageSource类型的属性,虽然实际上使用的是它的UriSource。详细代码如下:
public ImageSource Source
{
get => (ImageSource)GetValue(SourceProperty);
set => SetValue(SourceProperty, value);
}
private void UpdateSurface()
{
if (Source != null && _surfaceBrush != null)
{
var uri = (Source as BitmapImage)?.UriSource ?? new Uri("ms-appx:///");
_surface = LoadedImageSurface.StartLoadFromUri(uri);
_surfaceBrush.Surface = _surface;
}
}
OnConnected
的详细代码如下:
protected override void OnConnected()
{
base.OnConnected();
if (CompositionBrush == null)
{
_surfaceBrush = Compositor.CreateSurfaceBrush();
_surfaceBrush.Stretch = CompositionStretch.None;
UpdateSurface();
_borderEffect = new BorderEffect()
{
Source = new CompositionEffectSourceParameter("source"),
ExtendX = Microsoft.Graphics.Canvas.CanvasEdgeBehavior.Wrap,
ExtendY = Microsoft.Graphics.Canvas.CanvasEdgeBehavior.Wrap
};
_borderEffectFactory = Compositor.CreateEffectFactory(_borderEffect);
_borderEffectBrush = _borderEffectFactory.CreateBrush();
_borderEffectBrush.SetSourceParameter("source", _surfaceBrush);
CompositionBrush = _borderEffectBrush;
}
}
这样一个基本的XamlCompositionBrush就完成了,完整的代码可以在这里查看:
OnePomodoro_TiledImageBrush.cs at master
3. 参考
XamlCompositionBrushBase Class (Windows.UI.Xaml.Media) - Windows UWP applications _ Microsoft Docs
WindowsCommunityToolkit_Microsoft.Toolkit.Uwp.UI.Media_Brushes at master
Working with Brushes and Content – XAML and Visual Layer Interop, Part One - Windows Developer Blog
相关文章
- jquery+html5实现单张图片上传预览
- 使用ueditor实现多图片上传案例——Service层(IShoppingService)
- java通过commons-fileupload实现多张图片的上传(jsp页面)
- java通过commons-fileupload实现多张图片的上传(servlet)
- Java实现 LeetCode 646 最长数对链(暴力)
- Java实现 LeetCode 303 区域和检索 - 数组不可变
- Java实现 LeetCode 26 删除排序数组中的重复项
- Java实现 LeetCode_0038_CountandSay
- python实现百度OCR图片识别
- Filter实现的一个基于url的图片处理插件
- ImageMagick实现图片的旋转/翻转/裁剪(ImageMagick6.9.10)
- Open3D(C++) 点到平面的ICP算法实现点云精配准
- Atitit.md5 实现原理
- atitit. groupby linq的实现(1)-----linq框架选型 java .net php
- SAP WebIDE 里开发 SAP UI5 应用时,使用 Ctrl + Space 实现代码自动完成功能
- Dataset之图片数据增强:设计自动生成(高级封装之命令行解析实现)汽车车牌图片算法(cv2+PIL+argparse)根据随机指定七个字符生成逼真车牌图片(自然场景+各噪效果+对应txt说明文档)
- 第74篇 实现 QML 中图片按照固定点旋转一定角度
- 使用卷积神经网络实现图片去摩尔纹
- Android自定义 view之图片裁剪从设计到实现
- 【LeetCode 简单 栈 python3】232. 用栈实现队列
- 【iOS开发-54】案例学习:通过UIScrollView的缩放图片功能练习代理模式的详细实现
- go语言web开发系列之十三:gin框架实现图片文件上传
- QT打印窗口、退出、设置字体及颜色、设置时间、控件实现系统函数、添加资源文件(菜单图片)、工具栏添加图片
- 【AIGC】9、BLIP-2 | 使用 Q-Former 连接冻结的图像和语言模型 实现高效图文预训练