如何在xamarin中的多边形内添加标签

suzh9iv8 于 5个月前发布在其他

关注(0)|答案(1)|浏览(78)

我有一个xamarin应用程序想要添加一个多边形内的标签.标签的位置应该是垂直中心和水平开始在多边形.如何实现这一点.是否有任何其他的替代方法来创建这个UI.是否有可能创建一个堆栈布局如下.
下面是我当前的代码和输出

<Grid Grid.Row="3">
   <Polygon Points="50 0, 0 100, 800 100, 800 0"
            Fill="{StaticResource PrimaryGray}"
            HorizontalOptions="EndAndExpand"
            VerticalOptions="FillAndExpand">
   </Polygon>
    <Label Text="To sdfghuiop retyuiop sdftyguiop sertdyfuio sdtfyguio"
            HorizontalOptions="Center"
            HorizontalTextAlignment="Start"
            VerticalOptions="Center"/>

 </Grid>

字符串
第一个img是纵向视图，另一个是横向

xamarin

来源：https://stackoverflow.com/questions/77496616/how-to-add-a-label-inside-polygon-in-xamarin

1条答案

按热度按时间

nukf8bse1#

我更喜欢使用SkiaSharp。
让我们使用SkiaSharp做一个小的演示。首先，您可以安装SkiaSharp.Views.FormsNuGet。
这里是xaml，我们把SKCanvasView放入网格中。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             ...
             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms">

.....
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
     </Grid.RowDefinitions>
    <skia:SKCanvasView Grid.Row="1" PaintSurface="SKCanvasView_PaintSurface" />
</Grid>

字符串
这是后面的代码，

void SKCanvasView_PaintSurface(System.Object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs e)
{
    SKImageInfo info = e.Info;
    SKSurface surface = e.Surface;
    SKCanvas canvas = surface.Canvas;
    canvas.Clear();

    //Draw the polygon
    SKPath path = new SKPath();
    path.MoveTo(0.2f * info.Width, 0.1f * info.Height);
    path.LineTo(0.9f * info.Width, 0.1f * info.Height);
    path.LineTo(0.9f * info.Width, 0.9f * info.Height);
    path.LineTo(0.1f * info.Width, 0.9f * info.Height);
    path.Close();

    SKPaint fillPaint = new SKPaint
    {
        Style = SKPaintStyle.Fill,
        Color = SKColors.Gray
    };

    //Draw the text
    string str = "To sdfghuiop retyuiop sdftyguiop sertdyfuio sdtfyguio";

    SKPaint textPaint = new SKPaint
    {
        Color = SKColors.Black
    };

    // Adjust TextSize property so text is 50% of screen width
    float textWidth = textPaint.MeasureText(str);
    textPaint.TextSize = 0.5f * info.Width * textPaint.TextSize / textWidth;

    // Find the text bounds
    SKRect textBounds = new SKRect();
    textPaint.MeasureText(str, ref textBounds);
    float xText = info.Width / 2 - textBounds.MidX;
    float yText = info.Height / 2 - textBounds.MidY;

    

    // draw the polygon and text on the canvas
    canvas.DrawPath(path, fillPaint);
    canvas.DrawText(str, xText, yText, textPaint);
}

型
相关文档，
绘制多边形：Integrating Text and Graphics
绘制文本：Path Basics in SkiaSharp
您可以参考上述文档，并根据您的需求对代码进行一些调整。
这就是效果，

的数据