圆角仅在视觉的一侧 [英] Rounded Corners only on one side of a Visual

问题描述

我正在尝试使用带有圆角的 Visual.这是我的代码:

I'm trying to have a Visual with rounded corners. Here's the code I have:

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 来实现我的目标?作为参考，这是我希望最终结果的样子.

This works but this creates rounded corners on all 4 corners of the visual. Is it possible to use the Composition APIs to achieve what I'm targetting? For reference, here's what I want the end result to look like.

而不是我现在拥有的

推荐答案

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

You could try to use the Offset property and the CornerRadius property of a CompositionRoundedRectangleGeometry instance to gain the effect you target. The Visual.Clip property specifies the clipping region for the visual. When a visual is rendered, only the protion of the visual that falls inside the clipping region is displayed, while any content that extends outside the clipping region is clipped. Therefore, we could cut off a small part of the right side of the rounded rectangle by adjusting the size of visual and the size and offset of the clip.

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

Please check the following code as a sample:

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属性的值code>clip 使圆角矩形的右侧部分超出 visual 的大小.Offset 属性的第一个参数表示clip 和visual 之间的左右空间.我将 Offset 的值设置为 float2(20, 0) 以让圆角矩形的右侧部分超过 visual 的大小.您可以根据需要调整 Offset 属性的值.

The key is let the size of visual the same as the size of clip, and set a value of Offset property of the clip to make the right part of the rounded rectangle exceed the size of the visual. The first parameter of Offset property represents the left and right space between clip and visual. I set the value of Offset as float2(20, 0) to let the right part of the rounded rectangle exceed the size of the visual. You could adjust the value of Offset property based on your needs.

这篇关于圆角仅在视觉的一侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！