在 Xamarin Forms 中使用 SkiaSharp 绘制现有图像

如何解决在 Xamarin Forms 中使用 SkiaSharp 绘制现有图像

我的要求是我传递了一个原始字符串，并且需要创建一个绘图画布供用户绘制。通过“绘图”，我指的是用户在移动屏幕上用手指绘图。这是我发现的。

它所做的是创建一个非常窄的空白画布（调整大小是一个单独的问题）。它能够绘制非常短的笔画，但绘制新笔画会删除其他笔画。我还可以绘制似乎没有被移除的点。

我认为问题在于对 OnPainting 工作原理的根本误解。我的理解是它每次都重新绘制画布，这就是笔画词典的用途。此代码取自 SkiaSharp 演示，它运行良好，但只有白色背景。

下面的代码是我尝试将演示重新用于背景图像，但我的修改未能呈现图像并破坏了绘图功能。

我的代码：

using SkiaSharp;
using SkiaSharp.Views.Forms;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace redacted
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class DrawingSurface : ContentView
    {
        private readonly Dictionary<long,SKPath> temporaryPaths = new Dictionary<long,SKPath>();
        private readonly List<SKPath> paths = new List<SKPath>();

        SKBitmap background = null;

        public DrawingSurface()
        {
            InitializeComponent();
        }

        public DrawingSurface(string rawImagePNG64bit) : base()
        {
            background = SKBitmap.Decode(new MemoryStream(Convert.FromBase64String(rawImagePNG64bit)));
        }

        public void Clear()
        {

            //TODO
        }
        
        #region TouchDrawing
        private void OnPainting(object sender,SKPaintSurfaceEventArgs e)
        {
            
            SKImageInfo info = e.Info;
            // we get the current surface from the event args
            var surface = e.Surface;
            // then we get the canvas that we can draw on
            var canvas = surface.Canvas;
            // clear the canvas / view
            if(background != null)
            {
                canvas.DrawBitmap(background,0);
            }
            else
            {
                canvas.Clear(SKColors.White);
            }

            if (background != null)
            {
                var resizedBitmap = background.Resize(info,SKBitmapResizeMethod.Box);

                canvas.DrawBitmap(resizedBitmap,info.Width / 2 - resizedBitmap.Width / 2,info.Height / 2 - resizedBitmap.Height / 2);
            }

            // DRAWING TOUCH PATHS

            // create the paint for the touch path
            var touchPathStroke = new SKPaint
            {
                IsAntialias = true,Style = SKPaintStyle.Stroke,Color = SKColors.Red,StrokeWidth = 3
            };

            // draw the paths
            foreach (var touchPath in temporaryPaths)
            {
                canvas.DrawPath(touchPath.Value,touchPathStroke);
            }
            foreach (var touchPath in paths)
            {
                canvas.DrawPath(touchPath,touchPathStroke);
            }
        }
        private void OnTouch(object sender,SKTouchEventArgs e)
        {
            switch (e.ActionType)
            {
                case SKTouchAction.Pressed:
                    // start of a stroke
                    var p = new SKPath();
                    p.MoveTo(e.Location);
                    temporaryPaths[e.Id] = p;
                    break;
                case SKTouchAction.Moved:
                    // the stroke,while pressed
                    if (e.InContact && temporaryPaths.TryGetValue(e.Id,out var moving))
                        moving.LineTo(e.Location);
                    break;
                case SKTouchAction.Released:
                    // end of a stroke
                    if (temporaryPaths.TryGetValue(e.Id,out var releasing))
                        paths.Add(releasing);
                    temporaryPaths.Remove(e.Id);
                    break;
                case SKTouchAction.Cancelled:
                    // we don't want that stroke
                    temporaryPaths.Remove(e.Id);
                    break;
            }

            // update the UI
            if (e.InContact)
                ((SKCanvasView)sender).InvalidateSurface();

            // we have handled these events
            e.Handled = true;
        }
        #endregion
    }
}

XAML 如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="redacted"
             xmlns:views="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             
             >
    
  <ContentView.Content>
        <Grid>
            <views:SKCanvasView x:Name        ="DrawingCanvas" 
                            PaintSurface      ="OnPainting" 
                            EnableTouchEvents ="True" 
                            Touch             ="OnTouch" />
        </Grid>
        
    </ContentView.Content>
</ContentView>