[UWP]使用CompositionGeometricClip裁剪复杂图形及进行动画
1. UWP中的其它裁剪方案
之前在 这篇文章 里,我介绍了如何使用UIElement.Clip裁剪UIElement的内容,使用代码如下:
<Canvas>
<Image Source="Images/Water_lilies.jpg" Width="200" Height="150">
<Image.Clip>
<RectangleGeometry Rect="100 75 50 50"/>
</Image.Clip>
</Image>
</Canvas>
在 另一篇文章里 我介绍了如何使用 CanvasActiveLayer 裁剪Win2D内容,使用代码如下:
var fullSizeGeometry = CanvasGeometry.CreateRectangle(session, 0, 0, width, height);
var textGeometry = CanvasGeometry.CreateText(textLayout);
var finalGeometry = fullSizeGeometry.CombineWith(textGeometry, Matrix3x2.Identity, CanvasGeometryCombine.Exclude);
using (var layer = session.CreateLayer(1, finalGeometry))
{
//DrawSth
}
这两种方式都有他们的局限:CanvasActiveLayer虽然很灵活,但只能裁剪Win2D的内容,而且代码量不少;而UIElement.Clip虽然使用简单,但只能裁剪矩形区域。而介于他们之间的是使用Visual.Clip
的裁剪方案。
2. Visual.Clip和InsetClip、CompositionGeometricClip
Visual.Clip允许用户使用CompositionClip。刚开始继承CompositionClip类的只有 InsetClip,它只能裁剪矩形区域,不能否定某些情况下它还是挺有用的,何况还能进行动画,但比UIElement.Clip
还是好不了多少。使用方法如下:
var compositor = Window.Current.Compositor;
var visual = ElementCompositionPreview.GetElementVisual(uElement);
var clip = compositor.CreateInsetClip(leftInset, topInset, rightInset, bottomInset);
visual.Clip = clip;
到了1809,Compositor
提供了一个新的函数CreateGeometricClip,它可以以CompositionGeometry 为参数创建一个CompositionGeometricClip,这样就可以根据CompositionGeometry
裁剪复杂的区域。Compositor
提供了CreateEllipseGeometry、CreateLineGeometry、CreatePathGeometry、CreatePathGeometry(CompositionPath)、CreateRectangleGeometry、CreateRoundedRectangleGeometry等一些列创建Geometry的函数,具体使用方法如下:
var compositor = Window.Current.Compositor;
var visual = ElementCompositionPreview.GetElementVisual(uElement);
var geometry = compositor.CreateEllipseGeometry();
geometry.Center = new System.Numerics.Vector2(192, 525);
geometry.Radius = Vector2.Zero;
var clip = compositor.CreateGeometricClip(geometry);
visual.Clip = clip;
上面的代码使用CreateEllipseGeometry
创建了一个圆形的Geometry,设置好这个Geometry的中心点和半径,然后用这个圆形裁剪Visual。
3. 创建动画
CompositionApi的一个最大的好处是灵活的动画,例如下面这个用EllipseGeometry制作的动画:
它只是很简单地对Radius
进行KeyFrame动画,代码如下:
var compositor = Window.Current.Compositor;
var animation = compositor.CreateVector2KeyFrameAnimation();
animation.DelayTime = delayTime;
animation.Duration = TimeSpan.FromSeconds(0.7);
animation.InsertKeyFrame(1, new Vector2(600, 600));
ellipseGeometry.StartAnimation(nameof(CompositionEllipseGeometry.Radius), animation);
有趣的是Radius居然是个Vector2属性,所以CompositionEllipseGeometry
其实可以创建为椭圆形。
4. 结语
有了CompositionGeometricClip可以在UWP裁剪复杂区域,但只能在1809以后使用。只是裁剪的话,目前看起来没比WPF有多少优势,但加上Composition动画可玩性就强太多了。使用WPF的时候我几乎不敢使用动画,总是需要照顾低端配置,又担心WPF的性能。10年过去了,UWP的性能以及现代化的电脑配置终于可以让我放飞自我了。
5. 参考
Compositor Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs
Visual.Clip Property (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs
CompositionClip Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs
InsetClip Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs
CompositionGeometry Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs
CompositionGeometricClip Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs
最新文章
- [No00008F]PLSQL自动登录,记住用户名密码&;日常使用技巧
- XCode6.0的iOS免证书真机测试方法(MAC及黑苹果均有效)[转]
- Hibernate 查询MatchMode的四种模式
- PHP无限级分类-递归(不推荐)
- Maven——使用Maven构建多模块项目
- 最大子段和问题,最大子矩阵和问题,最大m子段和问题
- 部署ghost博客
- 【Mood-7】tell 2 my gf-miss u not sudden but always
- [大牛翻译系列]Hadoop(21)附录D.1 优化后的重分区框架
- Topcoder	SRM 630 (500 floyed 暴力 _builtin_popcount())
- [Form Builder]APP_ITEM_PROPERTY.SET_PROPERTY 用法
- JS七种加密解密方法
- message 匹配不上grok正则 也会写入到elasticsearch
- ANTLR
- android:duplicateParentState属性解释
- android于src和background差额
- Iterator 的hasNext方法和next方法
- [2017-08-07]ABP系列——QuickStartA:概述、思想、入门和HelloWorld
- h5 video标签的使用
- 3月9日(用 DBHelper 工具连接 mysql 数据库 实现登录验证)