在 SkiaSharp (UWP) 中正确对齐 UI 个元素

Question

我正在尝试使用 SkiaSharp 以圆形方式对齐几个按钮。我的代码看起来像这样

 <skia:SKXamlCanvas x:Name="test" PaintSurface="Test_OnPaintSurface"   />

代码隐藏

   private void Test_OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
    {
        // the canvas and properties
        var canvas = e.Surface.Canvas;
        // get the screen density for scaling
        var display = DisplayInformation.GetForCurrentView();
        var scale = display.LogicalDpi / 96.0f;
        var scaledSize = new SKSize(e.Info.Width / scale, e.Info.Height / scale);

        // handle the device screen density
        canvas.Scale(scale);

        // make sure the canvas is blank
        canvas.Clear(SKColors.Transparent);

        // draw some text
        var paintSmallCircle = new SKPaint
        {
            Color = SKColors.CornflowerBlue,
            IsAntialias = true,
            Style = SKPaintStyle.Fill,
            TextAlign = SKTextAlign.Center,
            TextSize = 24
        };
        var paintCircle = new SKPaint
        {
            Color = SKColors.LightGray,
            IsAntialias = true,
            Style = SKPaintStyle.Fill,
            TextAlign = SKTextAlign.Center,
            TextSize = 24
        };

        var coord = new SKPoint(
            scaledSize.Width / 2,
            (scaledSize.Height) / 2);


        canvas.DrawCircle(coord, 120, paintCircle);
     
        int r = 100;

        int angle = 90;
        for (int i = 0; i < 12; i++)
        {
            double x1 = scaledSize.Width / 2 + r * Math.Cos(Math.PI * angle / 180.0) ;
            double y1 = scaledSize.Height / 2 - r * Math.Sin(Math.PI * angle / 180.0) ;

           var  coord1 = new SKPoint((float)  x1, (float)y1);
             canvas.DrawCircle(coord1, 10, paintSmallCircle);
             Button btn = new Button { Content = i, Height = 25, Width = 25, };
             btn.SetValue(SKXamlCanvas.LeftProperty, coord1.X);
             btn.SetValue(SKXamlCanvas.TopProperty, coord1.Y);
             test.Children.Add(btn);

             angle = angle - 30;
        }

    }

使用这段代码，我能够正确绘制蓝色圆圈，但按钮对齐方式出错。我该如何解决这个问题？现在我的输出看起来像这样

如您所见，蓝色小圆圈正确对齐，但按钮未正确对齐。

预期的行为是按钮出现在呈现蓝色圆圈的同一位置

Answer 1

重点是您将 Button 的 Left & Top 属性.

当你用canvas.DrawCircle(coord1, 10, paintSmallCircle);画一个Circle时，中心点是coord1。

然后在 Circle 的中心点绘制 Buttons Left & Top。

因此您可以使用

绘制Button

btn.SetValue(SKXamlCanvas.LeftProperty, coord1.X - 25 /2);
btn.SetValue(SKXamlCanvas.TopProperty, coord1.Y - 25 / 2);

25 是您 Button 的 Height 和 Width。

查看结果。

在 SkiaSharp (UWP) 中正确对齐 UI 个元素

Align UI lements correctly in SkiaSharp (UWP)

xaml

uwp

skiasharp

skia