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

【问题标题】：Align UI lements correctly in SkiaSharp (UWP)在 SkiaSharp (UWP) 中正确对齐 UI 元素
【发布时间】：2020-10-19 06:31:12
【问题描述】：

我正在尝试使用 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;
        }

    }

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

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

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

【问题讨论】：

标签： xaml uwp skiasharp skia

【解决方案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。

查看结果。

【讨论】：