css - 视觉剪辑的不同角半径

问题描述

我试图Clip将Visual. 路径应该是具有不同角半径的圆角矩形。当前用于设置on a的API允许在所有四个角上设置统一的半径CornerRadiusRoundedRectangleGeometry

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

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

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

导致具有所有四个不同椭圆角的东西

所以本质上，我正在寻找一种方法来模拟Visual'Clip属性，让我能够实现与 CSS 属性类似的效果。

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

我正在使用C++/WinRT语言投影。

标签： cssuwpc++-winrtwinui

Uwp 应用程序没有提供这样的 api 来执行此操作。我们建议您可以通过一个图像来实现这个要求，该图像的来源是 uwp 中指定形状的图片。

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

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;

css - 视觉剪辑的不同角半径

问题描述

解决方案

推荐阅读