圆角仅在视觉的一侧

编程问答 2022-05-18

问题描述

我正在尝试使用带圆角的 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 来实现我的目标？作为参考，这是我希望最终结果的样子。

enter image description here

而不是我现在拥有的

enter image description here

解决方法

您可以尝试使用 CornerRadius 实例的 Offset 属性和 CompositionRoundedRectangleGeometry 属性来获得您的目标效果。 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的大小相同，并设置Offset的{​​{1}}属性的值来制作右边的部分圆角矩形的大小超过了 clip 的大小。 visual 属性的第一个参数表示 Offset 和 clip 之间的左右空格。我将 visual 的值设置为 Offset，让圆角矩形的右侧部分超过 float2(20,0) 的大小。您可以根据需要调整 visual 属性的值。