1. UWP中的其它裁剪方案

之前在 這篇文章 里，我介紹了如何使用UIElement.Clip裁剪UIElement的內(nèi)容，使用代碼如下：

<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內(nèi)容，使用代碼如下：

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的內(nèi)容，而且代碼量不少；而UIElement.Clip雖然使用簡(jiǎn)單，但只能裁剪矩形區(qū)域。而介于他們之間的是使用Visual.Clip的裁剪方案。

2. Visual.Clip和InsetClip、CompositionGeometricClip

Visual.Clip允許用戶使用CompositionClip。剛開(kāi)始繼承CompositionClip類的只有 InsetClip，它只能裁剪矩形區(qū)域，不能否定某些情況下它還是挺有用的，何況還能進(jìn)行動(dòng)畫(huà)，但比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提供了一個(gè)新的函數(shù)CreateGeometricClip，它可以以CompositionGeometry 為參數(shù)創(chuàng)建一個(gè)CompositionGeometricClip，這樣就可以根據(jù)CompositionGeometry裁剪復(fù)雜的區(qū)域。Compositor提供了CreateEllipseGeometry、CreateLineGeometry、CreatePathGeometry、CreatePathGeometry(CompositionPath)、CreateRectangleGeometry、CreateRoundedRectangleGeometry等一些列創(chuàng)建Geometry的函數(shù)，具體使用方法如下：

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創(chuàng)建了一個(gè)圓形的Geometry，設(shè)置好這個(gè)Geometry的中心點(diǎn)和半徑，然后用這個(gè)圓形裁剪Visual。

3. 創(chuàng)建動(dòng)畫(huà)

CompositionApi的一個(gè)最大的好處是靈活的動(dòng)畫(huà)，例如下面這個(gè)用EllipseGeometry制作的動(dòng)畫(huà)：

它只是很簡(jiǎn)單地對(duì)Radius進(jìn)行KeyFrame動(dòng)畫(huà)，代碼如下：

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居然是個(gè)Vector2屬性，所以CompositionEllipseGeometry其實(shí)可以創(chuàng)建為橢圓形。

4. 結(jié)語(yǔ)

有了CompositionGeometricClip可以在UWP裁剪復(fù)雜區(qū)域，但只能在1809以后使用。只是裁剪的話，目前看起來(lái)沒(méi)比WPF有多少優(yōu)勢(shì)，但加上Composition動(dòng)畫(huà)可玩性就強(qiáng)太多了。使用WPF的時(shí)候我?guī)缀醪桓沂褂脛?dòng)畫(huà)，總是需要照顧低端配置，又擔(dān)心WPF的性能。10年過(guò)去了，UWP的性能以及現(xiàn)代化的電腦配置終于可以讓我放飛自我了。

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