在 SkiaSharp (UWP) 中正确对齐 UI 个元素
Align UI lements correctly in SkiaSharp (UWP)
我正在尝试使用 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;
}
}
使用这段代码,我能够正确绘制蓝色圆圈,但按钮对齐方式出错。我该如何解决这个问题?
现在我的输出看起来像这样
如您所见,蓝色小圆圈正确对齐,但按钮未正确对齐。
预期的行为是按钮出现在呈现蓝色圆圈的同一位置
重点是您将 Button
的 Left
& Top
属性.
当你用canvas.DrawCircle(coord1, 10, paintSmallCircle);
画一个Circle
时,中心点是coord1
。
然后在 Circle
的中心点绘制 Button
s Left
& Top
。
因此您可以使用
绘制Button
btn.SetValue(SKXamlCanvas.LeftProperty, coord1.X - 25 /2);
btn.SetValue(SKXamlCanvas.TopProperty, coord1.Y - 25 / 2);
25 是您 Button
的 Height
和 Width
。
查看结果。
我正在尝试使用 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;
}
}
使用这段代码,我能够正确绘制蓝色圆圈,但按钮对齐方式出错。我该如何解决这个问题? 现在我的输出看起来像这样
如您所见,蓝色小圆圈正确对齐,但按钮未正确对齐。
预期的行为是按钮出现在呈现蓝色圆圈的同一位置
重点是您将 Button
的 Left
& Top
属性.
当你用canvas.DrawCircle(coord1, 10, paintSmallCircle);
画一个Circle
时,中心点是coord1
。
然后在 Circle
的中心点绘制 Button
s Left
& Top
。
因此您可以使用
绘制Button
btn.SetValue(SKXamlCanvas.LeftProperty, coord1.X - 25 /2);
btn.SetValue(SKXamlCanvas.TopProperty, coord1.Y - 25 / 2);
25 是您 Button
的 Height
和 Width
。
查看结果。