圆角仅在视觉对象的一侧答案

【问题标题】：Rounded Corners only on one side of a Visual圆角仅在视觉对象的一侧
【发布时间】：2021-06-14 09:06:24
【问题描述】：

我正在尝试使用带圆角的Visual。这是我的代码：

auto clip = compositor->CreateGeometricClip();
auto roundedRectangle = compositor->CreateRoundedRectangleGeometry();
roundedRectangle->Size = Windows::Foundation::Numerics::float2(width, height);
roundedRectangle->CornerRadius = Windows::Foundation::Numerics::float2(10, 10);
clip->Geometry = roundedRectangle;
visual->Clip = clip;

这可行，但这会在视觉对象的所有 4 个角上创建圆角。是否可以使用Composition API 来实现我的目标？作为参考，这是我希望最终结果的样子。

而不是我现在拥有的

【问题讨论】：

标签： uwp c++-cx

【解决方案1】：

您可以尝试使用CompositionRoundedRectangleGeometry 实例的Offset 属性和CornerRadius 属性来获得您的目标效果。 Visual.Clip 属性指定视觉对象的剪辑区域。呈现视觉对象时，仅显示位于剪切区域内的视觉对象部分，而剪切超出剪切区域的任何内容。因此，我们可以通过调整visual的大小和clip的大小和偏移量，将圆角矩形右侧的一小部分剪掉。

请检查以下代码作为示例：

auto clip = _compositor->CreateGeometricClip();
auto roundedRectangle = _compositor->CreateRoundedRectangleGeometry();
roundedRectangle->Size = float2(100, 100);
//roundedRectangle->CornerRadius = float2(20, 20);
roundedRectangle->Offset = float2(20, 0);
clip->Geometry = roundedRectangle;

//auto visual = _compositor->CreateSpriteVisual();
//visual->Brush = _compositor->CreateColorBrush(ColorHelper::FromArgb(0xFF, 0xFF, 0x11, 0xFF));
visual->Size = float2(100+20, 100);
roundedRectangle->Size = visual->Size;
visual->Clip = clip;

关键是让visual的大小与clip的大小相同，并设置clip的属性Offset的值，使圆角矩形的右边部分超过visual。 Offset属性的第一个参数代表clip和visual之间的左右空格。我将Offset的值设置为float2(20, 0)，让圆角矩形的右边部分超过visual的大小。您可以根据需要调整Offset 属性的值。

【讨论】：

谢谢！这确实帮助我实现了我的目标。我基本上做了visual->Size += float2(radius, 0); rr->Offset = (radius, 0); rr->size = visual->Size;，否则roundedRectangle 最终剪裁了它被偏移的可视区域，在这种情况下radius。您可能可以将其添加到您的答案中。本质上visual->Size 应该是= float2(100 + 20, 100)。