视觉剪辑的不同角半径 [英] Different corner radii for a Visual's clip

问题描述

我试图在 Visual 上设置 Clip.路径应该是具有不同角半径的圆角矩形.

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

附言这是这个问题的持续努力.这是我已经尝试过的，但是应用相同的逻辑来抵消裁剪 RoundedRectangle 在这种情况下不起作用.该问题的答案不足以满足此要求，因为圆角半径在这种情况下，2 个角(实际上是所有 4 个角)相同，并且建议的解决方案不适用于所有不同的椭圆角.偏移剪裁 RoundedRectangle 在这里不起作用，因为我需要 4 个不同的 RoundedRectangle，然后以某种方式将它们放置在 Visual 上，但是 RoundedRectanglecode>Clip 属性只允许一个 CompositionGeometricClip 和一个 Geometry.

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

解决方案

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

此外，您可以使用名为 RectangleClip Class 来做这个，它有TopLeftRadius, TopRightRadius, BottemLeftRadius, BottemRightRadius 属性，这样你就可以为4个角设置不同的角半径.要使用此 api，您需要 创建一个 WinUI 3 应用程序.请参考以下代码.

XML 代码:

</网格>

背后的代码:

 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);视觉视觉 = ElementCompositionPreview.GetElementVisual(host1);视觉.Clip = rectclip;

I was trying to set the Clip on a Visual. The path is supposed to be a rounded rectangle with different corner radii. The current API for setting the CornerRadius on a RoundedRectangleGeometry allows setting a uniform radius on all the four corners

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

But I'm trying to align with the CSS property of background-radius which permits setting different corner-radius for all the 4 corners:

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

leading to something with all four different elliptical corners as

So in essence, I'm seeking a way to emulate this for a Visual's Clip property, allowing me to achieve a similar effect as the CSS property.

P.S. This is a continuing effort from this question. This is something I've already tried but applying the same logic of offsetting the clipping RoundedRectangle didn't work in this case.The answer to that question won't suffice for this requirement because the rounded corner radii were the same for 2 corners (in fact all 4 corners) in that case and the suggested solution would not be adequate for all different elliptical corners. Offsetting the clipping RoundedRectangle won't work here because I'd need 4 different RoundedRectangles and then somehow position them over the Visual but the Clip property allows only one CompositionGeometricClip with one Geometry.

I'm using the C++/WinRT language projection.

解决方案

Uwp app hasn’t provided such api to do this. We suggest you could implement this requirement through an image whose source is a picture of specified shape in uwp.

In addition, you could use the WinUI3 api named RectangleClip Class to do this, which has TopLeftRadius, TopRightRadius, BottemLeftRadius, BottemRightRadius properties, so that you could set different corner-radius for 4 corners. To use this api, you need to create a WinUI 3 app. Please refer to the following code.

Xaml code:

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

Code behind:

       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;

这篇关于视觉剪辑的不同角半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！