Изображение SkiaSharp SVG неправильно заполняет экран - PullRequest
Новая
       75

Изображение SkiaSharp SVG неправильно заполняет экран

0 голосов
/ 20 марта 2020

У меня есть изображение 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);
}

Однако это делает изображение "переполненным" сбоку. Вот результат:

enter image description here

Предполагается, что на правой стороне изображения немного торчит антенна, которая отрезана. Как сделать так, чтобы изображение правильно помещалось на экране?

1 Ответ

1 голос
/ 21 марта 2020

Чтобы изменить размер и отцентрировать изображение SVG на основе ограничивающих ограничений canvas / view - вы можете использовать методы translate и scale. 

// 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();
...