Как объединить два изображения в Xamarin Forms?

Question

Я занимаюсь разработкой приложения Xamarin Forms iOS. В файле xaml есть сетка.

<Grid x:Name="QrCodeSite" HeightRequest="300" Margin="37, 37, 37, 0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>

В связанном файле .cs я использую ZXing.Net.Mobile.Forms, чтобы сгенерировать QR-код и поместить его в сетку. И я положил свой lo go в ту же сетку, которая наконец появится в центре QR-кода.

var barcode = new ZXingBarcodeImageView
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
barcode.BarcodeFormat = ZXing.BarcodeFormat.QR_CODE;
barcode.BarcodeOptions.Width = 650;
barcode.BarcodeOptions.Height = 650;
barcode.BarcodeOptions.Margin = 1;
barcode.BarcodeValue = value;


var img = new Image
{
Source = "logo.png",
WidthRequest = 70,
HeightRequest = 70,
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center
};

QrCodeSite.Children.Clear();

QrCodeSite.Children.Add(barcode);
QrCodeSite.Children.Add(img);

Проблема в том, что, возможно, мой телефон (iPhone 6s plus) слишком медленно, иногда сначала появляется lo go, а после лага (около 1 секунды) отображается QR-код. Как я могу объединить QR-код и lo go в одно изображение, а затем добавить его в сетку?

Answer 1

Вы можете использовать SkiaSharp для отображения изображений или объединения изображений. Посмотрите, как Отображать растровые изображения SkiaSharp , чтобы загрузить пример проекта и исследовать его.

На основе Рисуя на существующих растровых изображениях , вы можете изменить его следующим образом:

public partial class MonkeyMoustachePage : ContentPage
{
    SKBitmap monkeyBitmap;

    public MonkeyMoustachePage()
    {
        Title = "Monkey Moustache";

        monkeyBitmap = BitmapExtensions.LoadBitmapResource(GetType(),
            "SkiaSharpFormsDemos.Media.MonkeyFace.png");

        SKBitmap iconImage = BitmapExtensions.LoadBitmapResource(GetType(),
            "SkiaSharpFormsDemos.Media.GooglePlaylogo.png");

        int offset = monkeyBitmap.Width / 2 - iconImage.Width / 2;
        int offsetTop = monkeyBitmap.Height / 2 - iconImage.Height / 2;
        // Create canvas based on bitmap
        using (SKCanvas canvas = new SKCanvas(monkeyBitmap))
        {
            canvas.DrawBitmap(iconImage, SKRect.Create(offset, offsetTop, iconImage.Width, iconImage.Height));
        }

        // Create SKCanvasView to view result
        SKCanvasView canvasView = new SKCanvasView();
        canvasView.PaintSurface += OnCanvasViewPaintSurface;
        Content = canvasView;

        //save the new image
        using (MemoryStream memStream = new MemoryStream())
        using (SKManagedWStream wstream = new SKManagedWStream(memStream))
        {
            monkeyBitmap.Encode(wstream, imageFormat, quality);
            byte[] data = memStream.ToArray();

            // Check the data array for content!

            bool success = await DependencyService.Get<IPhotoLibrary>().SavePhotoAsync(data, folder, filename);

            // Check return value for success!
         }
    }

    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKImageInfo info = args.Info;
        SKSurface surface = args.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();
        canvas.DrawBitmap(monkeyBitmap, info.Rect, BitmapStretch.Uniform);
    }
}

Затем вы увидите иконку lo go, которая будет отображаться в оригинале. image:

Если вы хотите сохранить растровые изображения SkiaSharp в файлы, взгляните на это: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/bitmaps/saving#exploring -the-image- форматы

Примечание: BitmapExtensions.cs файл взят из примера проекта. Кстати, при добавлении изображения в проект необходимо установить Build ACtion изображения быть Embedded ресурс . Как следует: