SkiaSharp SVG 图像未正确填充屏幕

Question

我有一个 SVG 图像，我想用它填充我的屏幕的整个宽度。我的视图使用网格。这是我的观点：

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60*" />
            <RowDefinition Height="15*" />
            <RowDefinition Height="15*" />
            <RowDefinition Height="15*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="33*" />
            <ColumnDefinition Width="33*" />
            <ColumnDefinition Width="33*" />
        </Grid.ColumnDefinitions>

        <!--Damage view image-->
        <skia:SKCanvasView Grid.Row="0" 
                           Grid.Column="0" 
                           Grid.ColumnSpan="3" 
                           HorizontalOptions="FillAndExpand" 
                           VerticalOptions="FillAndExpand" 
                           EnableTouchEvents="True"
                           Touch="MarkDamage">
        </skia:SKCanvasView>

我已将我的图片放在页面顶部，并为其指定整个屏幕的 100% 宽度和 60% 高度。下面是我初始化图像时调用的方法。

public void OnCanvasViewPaintSurface(SKPaintSurfaceEventArgs args)
{
        var assembly = IntrospectionExtensions.GetTypeInfo(typeof(MyClass)).Assembly;
        using var stream = assembly.GetManifestResourceStream("myImage.svg");
        var svg = new SkiaSharp.Extended.Svg.SKSvg();
        svg.Load(stream);

        var surface = args.Surface;
        var canvas = surface.Canvas;

        using var paint = new SKPaint
        {
            Style = SKPaintStyle.Stroke,
            StrokeWidth = 5,
            Color = SKColors.Orange
        };

        canvas.DrawPicture(_defaultImage.Picture, ref matrix);
}

然而，这使得图像在侧面“溢出”。结果如下：

图像的右侧应该有一个小天线伸出来，被切断了。如何使图像正确适合屏幕？

Answer 1

要根据边界 canvas/view 约束调整 SVG 图像的大小和居中 - 您可以使用平移和缩放方法。

// Get drawing surface bounds
var viewInfo = args.Info;
var drawBounds = viewInfo.Rect;

// Get bounding rectangle for SVG image
var boundingBox = svg.Picture.CullRect;

// Translate and scale drawing canvas to fit SVG image
canvas.Translate(drawBounds.MidX, drawBounds.MidY);
canvas.Scale(0.9f * 
    Math.Min(drawBounds.Width / boundingBox.Width, 
        drawBounds.Height / boundingBox.Height));
canvas.Translate(-boundingBox.MidX, -boundingBox.MidY);

// Now finally draw the SVG image
canvas.DrawPicture(svg.Picture);

// Optional -> Reset the matrix before performing more draw operations
canvas.ResetMatrix();

SkiaSharp SVG 图像未正确填充屏幕

SkiaSharp SVG image not filling screen correctly

xamarin.forms

skiasharp