视觉剪辑的不同角半径

如何解决视觉剪辑的不同角半径

我试图在 Clip 上设置 Visual。路径应该是具有不同角半径的圆角矩形。用于在 CornerRadius 上设置 RoundedRectangleGeometry 的 current API 允许在所有四个角上设置统一半径

auto roundedRectangle = compositor.CreateRoundedRectangleGeometry();
roundedRectangle.CornerRadius(Float2(width,height));
clip.Geometry(roundedRectangle);
visual.Clip(clip);

但我试图与 background-radius 的 CSS 属性保持一致，它允许为所有 4 个角设置不同的角半径：

border-radius: 10px 100px 20px 30px/ 30px 20px 10px 40px;

导致所有四个不同的椭圆角为

因此，本质上，我正在寻找一种方法来模拟 Visual 的 Clip 属性，从而实现与 CSS 属性类似的效果。

附言这是 this 问题的持续努力。这是我已经尝试过的事情，但是在这种情况下应用抵消剪裁 RoundedRectangle 的相同逻辑不起作用。该问题的答案不足以满足此要求，因为圆角半径相同在这种情况下，对于 2 个角（实际上是所有 4 个角），建议的解决方案不适用于所有不同的椭圆角。抵消剪裁 RoundedRectangle 在这里不起作用，因为我需要 4 个不同的 RoundedRectangle，然后以某种方式将它们定位在 Visual 上，但 Clip 属性只允许一个 { {1}} 与一个 CompositionGeometricClip。

我正在使用 Geometry 语言投影。

解决方法

Uwp 应用程序没有提供这样的 api 来做到这一点。我们建议你可以通过一张图片来实现这个要求，图片的来源是uwp中指定形状的图片。

此外，您可以使用名为 RectangleClip Class 的 WinUI3 api 来执行此操作，它具有 TopLeftRadius、TopRightRadius、BottemLeftRadius、BottemRightRadius 属性，以便您可以为 4 个角设置不同的圆角半径。要使用此 api，您需要 create a WinUI 3 app。请参考以下代码。

XML 代码：

<Grid x:Name="host1" Background="red">
     
</Grid>

背后的代码：

       var cor = Window.Current.Compositor;
        RectangleClip rectclip = cor.CreateRectangleClip();
        rectclip.Left = 40;
        rectclip.Top = 20;
        rectclip.Right = 300;
        rectclip.Bottom = 150;
        rectclip.TopLeftRadius = new System.Numerics.Vector2(5);
        rectclip.TopRightRadius = new System.Numerics.Vector2(30);
        rectclip.BottomLeftRadius = new System.Numerics.Vector2(10);
        rectclip.BottomRightRadius = new System.Numerics.Vector2(60);
        Visual visual = ElementCompositionPreview.GetElementVisual(host1);
        visual.Clip = rectclip;