[UWP]使用CompositionGeometricClip裁剪复杂图形及进行动画

1. UWP中的其他裁剪方案

在之前的一篇文章中，我介绍了如何使用uielement.clip来裁剪uielement的内容，使用的代码如下：

在另一篇文章中，我介绍了如何使用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提供了一些创建Geometry的函数，如CreateEllipseGeometry、CreateLineGeometry、CreatePathGeometry、CreatePathGeometry(CompositionPath)、CreateRectangleGeometry、CreateRoundedRectangleGeometry等，具体使用方法如下：

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的性能问题。十年过去了，UWP的性能和现代化的电脑配置终于让我能够尽情发挥了。

Timely

一款AI时间跟踪管理工具！

下载

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