[UWP] use CompositionGeometricClip cut complex graphics and animation

Other clipping scheme 1. UWP of

Before this article , I explain how to use UIElement.Clip content cut UIElement using the following code:

<Canvas>
    <Image Source="Images/Water_lilies.jpg" Width="200" Height="150">
        <Image.Clip>
            <RectangleGeometry Rect="100 75 50 50"/>
        </Image.Clip>
    </Image>
</Canvas>

In another article I explain how to use CanvasActiveLayer cut Win2D content, use the following code:

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
}

Both methods have their limitations: CanvasActiveLayer although very flexible, but only tailored content Win2D, but a lot of the amount of code; and UIElement.Clip Although simple to use, but can only cut a rectangular area. And between them is the use of Visual.Clipcutting programs.

2. Visual.Clip和InsetClip、CompositionGeometricClip

Visual.Clip allows users to use CompositionClip . The beginning of class inheritance CompositionClip only InsetClip , it can only cut a rectangular area, can not be denied in some cases it is quite useful, but also not to mention the animation, but better than UIElement.Clipnot much better still. Use as follows:

var compositor = Window.Current.Compositor;
var visual = ElementCompositionPreview.GetElementVisual(uElement);
var clip = compositor.CreateInsetClip(leftInset, topInset, rightInset, bottomInset);
visual.Clip = clip;

To 1809, Compositorprovides a new function CreateGeometricClip , it can CompositionGeometry parameters to create a CompositionGeometricClip , so that you can CompositionGeometrycut complex area. CompositorProviding a series CreateEllipseGeometry, CreateLineGeometry, CreatePathGeometry, CreatePathGeometry ( CompositionPath), CreateRectangleGeometry, CreateRoundedRectangleGeometry Creating Geometry functions such as the specific use is as follows:

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;

The above code uses CreateEllipseGeometryto create a circular Geometry, set the center point and radius of the Geometry, then this circular cutting Visual.

3. Create Animation

One of the biggest benefits of CompositionApi is flexible animation, such as the following with EllipseGeometry animated:

It's just very simple to Radiuscarry out KeyFrame animation, as follows:

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);

Interestingly Radius is actually a Vector2 property, so CompositionEllipseGeometryin fact you can create an oval shape.

4. Conclusion

With CompositionGeometricClip possible, but only after the 1809 crop in the UWP complex region. Just cut it, now, it seems there is not much advantage over WPF, but with Composition animation playability is strong too much. Using WPF, I almost did not dare to use animation, always take care of low-end configuration, but also worried about the performance of WPF. 10 years later, UWP performance and modern computer configuration can finally let me fly personal.

5. Reference

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