UWP 组合 API：圆角？

Question

我正在努力弄清楚如何使用 Composition API 创建内容的圆角。这就是我所在的位置，任何帮助将不胜感激：

void CreateRoundedCorners(Vector2 cornerRadius, CompositionSurfaceBrush imageSourceBrush, SpriteVisual targetVisual)
{
    CompositionRoundedRectangleGeometry roundedRectangle = _compositor.CreateRoundedRectangleGeometry();
    roundedRectangle.Size = new Vector2(;
    roundedRectangle.CornerRadius = cornerRadius;

    CompositionSpriteShape spriteShape = _compositor.CreateSpriteShape(roundedRectangle);
    spriteShape.FillBrush = _compositor.CreateColorBrush(Colors.Black);
    spriteShape.CenterPoint = new Vector2(_imageSize.X / 2, _imageSize.Y / 2);

    ShapeVisual spriteShapeVisual = _compositor.CreateShapeVisual();
    spriteShapeVisual.Size = _imageSize;
    spriteShapeVisual.Shapes.Add(spriteShape);

    CompositionMaskBrush maskBrush = _compositor.CreateMaskBrush();
    maskBrush.Source = imageSourceBrush;
    maskBrush.Mask = null; // How do I get the rectangle shape in here?

    targetVisual.Brush = maskBrush;
}

Answer 1

UWP Composition API: Rounded Corners?

根据您的要求，您可以使用 SetElementChildVisual 方法将 CompositionRoundedRectangleGeometry 添加到当前页面。

例如：

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    var visual = ElementCompositionPreview.GetElementVisual(this);
    var compositor = visual.Compositor;
  
    CompositionRoundedRectangleGeometry roundedRectangle = compositor.CreateRoundedRectangleGeometry();
    roundedRectangle.Size = new Vector2(200, 200);
    roundedRectangle.CornerRadius = new Vector2(30,30);

    CompositionSpriteShape spriteShape = compositor.CreateSpriteShape(roundedRectangle);
    spriteShape.FillBrush = compositor.CreateColorBrush(Colors.Blue);
    spriteShape.CenterPoint = new Vector2(100, 100);

    ShapeVisual spriteShapeVisual = compositor.CreateShapeVisual();
    spriteShapeVisual.Size = new Vector2(200, 200); 
    
    spriteShapeVisual.Shapes.Clear();
    spriteShapeVisual.Shapes.Add(spriteShape);
  
    ElementCompositionPreview.SetElementChildVisual(this, spriteShapeVisual);
}

Answer 2

我想出了解决办法。创建一个 CompositionVisualSurface，向其添加 ShapeVisual，并从中创建一个 CompositionSurfaceBrush 以用作遮罩源。

void CreateRoundedCorners(Vector2 cornerRadius, CompositionBrush imageSourceBrush, SpriteVisual targetVisual)
{
    CompositionRoundedRectangleGeometry roundedRectangle =_compositor.CreateRoundedRectangleGeometry();
    roundedRectangle.Size = _imageSize;
    roundedRectangle.CornerRadius = cornerRadius;

    CompositionSpriteShape spriteShape = _compositor.CreateSpriteShape(roundedRectangle);
    spriteShape.FillBrush = _compositor.CreateColorBrush(Colors.Black);
    spriteShape.CenterPoint = new Vector2(_imageSize.X / 2, _imageSize.Y / 2);

    ShapeVisual spriteShapeVisual = _compositor.CreateShapeVisual();
    spriteShapeVisual.BorderMode = CompositionBorderMode.Soft;
    spriteShapeVisual.Size = _imageSize;
    spriteShapeVisual.Shapes.Add(spriteShape);

    CompositionVisualSurface surface = _compositor.CreateVisualSurface();
    surface.SourceSize = _imageSize;
    surface.SourceVisual = spriteShapeVisual;

    CompositionMaskBrush maskBrush = _compositor.CreateMaskBrush();
    maskBrush.Source = imageSourceBrush;
    maskBrush.Mask = _compositor.CreateSurfaceBrush(surface);

    targetVisual.Brush = maskBrush;
}

编辑：遮罩也可以从 Shape 获得，但前提是它已经在可视化树中：

Windows.UI.Xaml.Shapes.Shape rect = new Rectangle();
CompositionBrush mask = rect.GetAlphaMask();

UWP 组合 API：圆角？

UWP Composition API: Rounded Corners?

windows-runtime

uwp

windows-composition-api