专栏首页dino.c的专栏[UWP]使用CompositionGeometricClip裁剪复杂图形及进行动画

[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

Compositor.CreateInsetClip Method (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs

InsetClip Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs

Compositor.CreateGeometricClip Method (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

CompositionEllipseGeometry Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [.NET]使用十年股价对比各种序列化技术

    上一家公司有搞股票,当时很任性地直接从服务器读取一个股票10年份的股价(还有各种指标)在客户端的图表上显示,而且因为是桌面客户端,传输的数据也是简单粗暴地使用S...

    dino.c
  • [UWP]UIElement.Clip虽然残废,但它还可以这样玩

    用了很久很久的WPF,但几乎没有主动用过它的Clip属性,我只记得它很灵活,可以裁剪出多种形状。在官方文档复习了一下,大致用法和效果如下:

    dino.c
  • 重温《单元测试的艺术》,总结常用知识点

    前几个月重温了单元测试的艺术。毕竟是14年的书内容有点旧,于是试着结合书中的内容和一些新的知识点写进这篇文章,希望对自己及各位读者有帮助。

    dino.c
  • 笔记20 | 学习整理开源APP(BaseAnimation)程序源码“中的通讯录效果(一)

    项勇
  • 6.25 VR扫描:更强AR特性,iOS 12公测版正式推出;微软新专利暗示下一代HoloLens FOV可实现翻倍

    今日,苹果正式推出iOS 12公测版,苹果希望这一新系统能够提升用户的iPhone和iPad性能。与此同时,iOS 12将在ARKit 2中引入开创性的多人游戏...

    VRPinea
  • (最新 9000 字 )Spring Boot 配置特性解析

    目前Spring Boot版本: 2.3.4.RELEASE,这更新的速度也是嗖嗖的了,随着新版本的发布,也一步步针对公司基础组件进行了升级改造,其中很重要的一...

    架构技术专栏
  • WPF 拼音输入法

    实际上本文是在使用一个好用的软件 希沃白板 的时候发现在里面很难输入拼音来做课堂活动。

    林德熙
  • 接口和多态性

    如果你又加了一个百度外卖,那么eat函数中又要new 一个BaiDu() ,给开发带来麻烦。我们希望的是,如果代码要扩展了,那么代码要尽最大可能的进行很小的改动...

    ShenduCC
  • Spring Boot与ActiveMQ整合

    即可看到控制台输出消息提示。Spring Boot内置了ActiveMQ的服务,所以我们不用单独启动也可以执行应用程序。

    一点博客
  • 深入理解几种单例模式的实现方式

    饿汉式的单例实现方式就是说在类加载的时候就已经创建并初始化好了,所以实例的创建过程是线程安全的

    测试轩

扫码关注云+社区

领取腾讯云代金券