C# SkiaSharp OpenTK Winform - 如何从后台线程绘制？

Question

我正在尝试使用SkiaSharp替换GDI+，用于渲染多层可平移缩放的实时连续更改工程数据图形的数据可视化框架。

在GDI+中，应用程序执行以下操作：

• 创建具有透明背景的绘图层集合，通常包括一个网格层、一个或多个数据层和一个覆盖层，用于光标信息和高亮显示，每个图层都由单独的位图支持。
• 在渲染循环后台线程中，只会使用GDI+重新绘制需要更新每个绘图周期的图层（位图）。这可能需要计算和转换许多数千条线、矩形和文本，以创建热力图、波形图、直方图绘制、数据标签等。
• 然后，堆栈中的每个绘图层都将通过后台线程进行BitBlt，从而形成复合位图
• 最终复合位图将以高达30fps的速度绘制到WinForm PictureBox中的GUI线程。

除了最终的图像呈现外，所有操作都是在一个或多个后台线程中完成的。GUI线程仅涉及将完成的图像绘制到PictureBox上。这很重要，因为有许多其他GUI控件需要保持响应性。虽然这很好用，但所有操作都基于CPU。小窗口没有问题，但在4K屏幕上最大化会使渲染变慢，使程序几乎无法使用。

我想使用GPU加速的SkiaSharp重新创建这个概念。

我尝试创建了数十个不同的测试程序，但始终遇到跨线程访问冲突、屏幕上没有显示任何内容或崩溃等问题。而不是发布代码，让我提出一些基本问题：

问题：

• 您将如何处理创建该框架？SkiaSharp能否实现此功能？
• 每个图层类是否应维护一个SKSurface、SKCanvas、SKImage或SKBitmap？ - 同样，如果一个图层不需要为当前周期重新绘制，则该图层需要维护先前绘制的内容以供在下一个复合图像中使用。
• GUI线程需要一个GLControl和GRContext来显示最终的复合图像，但是后台渲染线程是否需要另一个单独的GRContext？-如何进行GPU加速？
• 是否有任何可以指向类似概念的工作示例？（从后台线程加速GPU渲染到GLControl）
• 是否应仅在后台中使用SkiaSharp，并使用GDI+ BitBlt和PictureBox显示复合图像？-这样是否可以解决一些线程问题？

任何有关确定方法以及要遵循和不要遵循的建议，将不胜感激！！

- user1689175

Answer 1

我通过使用SKPicture对象记录每个图层的Draw Commands来解决了这个问题，并使用后台渲染线程将它们绘制回SKGLControl，然后使用GUI线程进行绘制。这满足了我的所有要求：允许多个绘画图层、使用后台线程渲染、仅渲染需要更新的图层、使用GPU加速进行绘制，在最大化的4K窗口下运行非常快。

得到的经验教训

途中我学到了一些课程，他们给我带来了很多困惑...

1. 有在线例子使用了带有GPU加速的OpenTK.GLControl以及内置GPU加速的SkiaSharp.Views.Desktop.SKGLControl。SKGLControl绝对是此任务的正确控件。GLControl 对 DrawCircle 创建正方形并由于FramebufferBinding和StencilBits的问题而拒绝渲染任何曲线——我放弃了。对于SKPicture对象，它也比SKGLControl慢。

2. SKGLControl不需要也不喜欢使用SwapBuffers或Canvas.Flush，这是GLControl所需的。这会导致SKGLControl的绘图出现闪烁和故障，这就是为什么我与GLControl发生冲突的原因。当我使用SKGLControl重建项目并摆脱SwapBuffers和Canvas.Flush时，一切开始正常运行。

3. 对于Surface和Canvas的引用不应保留超过一个PaintSurface周期。SKPicture是可以让您存储每个图层的绘图命令并一遍又一遍地播放它们的神奇对象。这与生成像素光栅的SKBitmap或SKImage不同，而只记录了Draw commands。在多线程环境中，我无法让SKBitmap或SKImage表现出GPU加速。SKPicture非常适合此任务。

4. Paint事件和PaintSurface事件对于SKGLControl有所不同。默认情况下，应该使用PaintSurface事件，其具有GPU加速功能。

---

工作示例代码

下面是一个多层、多线程、GPU加速的SkiaSharp绘画的完全功能演示

此示例创建4个绘画图层：

• 背景层
• 网格层
• 数据层
• 覆盖层

使用后台线程绘制（渲染）各个图层，然后使用GUI线程将它们绘制到SKGLControl上。每个图层只在需要时进行渲染，但所有图层都会在每个PaintSurface事件中进行绘制。

尝试代码：

1. 在Visual Studio中创建一个新的C# WinForms项目。
2. 添加NuGet包：“SkiaSharp.Views.WindowsForms”。这将自动添加“SkiaSharp”和“SkiaSharp.Views.Desktop.Common”。
3. 将SkiaSharp.Views.Desktop.SKGLControl添加到Form1。将其命名为“skglControl1”
4. 为skglControl1设置Dock为“Fill”，使其填充Form1。
5. 将下面的代码复制到Form1中：

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Drawing;
    using System.Threading;
    using System.Windows.Forms;
    using SkiaSharp;
    using SkiaSharp.Views.Desktop;
    
    namespace SkiaSharp_Multi_Layer_GPU
    {
        // ---------------------------------------------------------------------
        // ---------------------------------------------------------------------
        // -------                                                       -------
        // -------                   WinForm - Form 1                    -------
        // -------                                                       -------
        // ---------------------------------------------------------------------
        // ---------------------------------------------------------------------

        public partial class Form1 : Form
        {
            private Thread m_RenderThread = null;
            private AutoResetEvent m_ThreadGate = null;
            private List<Layer> m_Layers = null;
            private Layer m_Layer_Background = null;
            private Layer m_Layer_Grid = null;
            private Layer m_Layer_Data = null;
            private Layer m_Layer_Overlay = null;
            private bool m_KeepSwimming = true;
            private SKPoint m_MousePos = new SKPoint();
            private bool m_ShowGrid = true;
            private Point m_PrevMouseLoc = new Point();
    
    
            // ---------------------------
            // --- Form1 - Constructor ---
            // ---------------------------
    
            public Form1()
            {
                InitializeComponent();
            }
    
    
            // ------------------------------
            // --- Event - Form1 - OnLoad ---
            // ------------------------------
    
            protected override void OnLoad(EventArgs e)
            {
                base.OnLoad(e);
    
                // Set the title of the Form
                this.Text = "SkiaSharp Demo - Multi-Layer, Multi-Threaded, GPU Accelerated";
    
                // Create layers to draw on, each with a dedicated SKPicture
                m_Layer_Background = new Layer("Background Layer");
                m_Layer_Grid = new Layer("Grid Layer");
                m_Layer_Data = new Layer("Data Layer");
                m_Layer_Overlay = new Layer("Overlay Layer");
    
                // Create a collection for the drawing layers
                m_Layers = new List<Layer>();
                m_Layers.Add(m_Layer_Background);
                m_Layers.Add(m_Layer_Grid);
                m_Layers.Add(m_Layer_Data);
                m_Layers.Add(m_Layer_Overlay);
    
                // Subscribe to the Draw Events for each layer
                m_Layer_Background.Draw += Layer_Background_Draw;
                m_Layer_Grid.Draw += Layer_Grid_Draw;
                m_Layer_Data.Draw += Layer_Data_Draw;
                m_Layer_Overlay.Draw += Layer_Overlay_Draw;
    
                // Subscribe to the SKGLControl events
                skglControl1.PaintSurface += SkglControl1_PaintSurface;
                skglControl1.Resize += SkglControl1_Resize;
                skglControl1.MouseMove += SkglControl1_MouseMove;
                skglControl1.MouseDoubleClick += SkglControl1_MouseDoubleClick;
                
                // Create a background rendering thread
                m_RenderThread = new Thread(RenderLoopMethod);
                m_ThreadGate = new AutoResetEvent(false);
    
                // Start the rendering thread
                m_RenderThread.Start();
            }
    
    
            // ---------------------------------
            // --- Event - Form1 - OnClosing ---
            // ---------------------------------
    
            protected override void OnClosing(CancelEventArgs e)
            {
                // Let the rendering thread terminate
                m_KeepSwimming = false;
                m_ThreadGate.Set();
    
                base.OnClosing(e);
            }
    
    
            // --------------------------------------------
            // --- Event - SkglControl1 - Paint Surface ---
            // --------------------------------------------
    
            private void SkglControl1_PaintSurface(object sender, SkiaSharp.Views.Desktop.SKPaintGLSurfaceEventArgs e)
            {
                // Clear the Canvas
                e.Surface.Canvas.Clear(SKColors.Black);
    
                // Paint each pre-rendered layer onto the Canvas using this GUI thread
                foreach (var layer in m_Layers)
                {
                    layer.Paint(e.Surface.Canvas);
                }
    
    
                using (var paint = new SKPaint())
                {
                    paint.Color = SKColors.LimeGreen;
    
                    for (int i = 0; i < m_Layers.Count; i++)
                    {
                        var layer = m_Layers[i];
                        var text = $"{layer.Title} - Renders = {layer.RenderCount}, Paints = {layer.PaintCount}";
                        var textLoc = new SKPoint(10, 10 + (i * 15));
    
                        e.Surface.Canvas.DrawText(text, textLoc, paint);
                    }
    
    
                    paint.Color = SKColors.Cyan;
    
                    e.Surface.Canvas.DrawText("Click-Drag to update bars.", new SKPoint(10, 80), paint);
                    e.Surface.Canvas.DrawText("Double-Click to show / hide grid.", new SKPoint(10, 95), paint);
                    e.Surface.Canvas.DrawText("Resize to update all.", new SKPoint(10, 110), paint);
                }
            }
    
    
            // -------------------------------------
            // --- Event - SkglControl1 - Resize ---
            // -------------------------------------
    
            private void SkglControl1_Resize(object sender, EventArgs e)
            {
                // Invalidate all of the Layers
                foreach (var layer in m_Layers)
                {
                    layer.Invalidate();
                }
    
                // Start a new rendering cycle to redraw all of the layers.
                UpdateDrawing();
            }
    
    
            // -----------------------------------------
            // --- Event - SkglControl1 - Mouse Move ---
            // -----------------------------------------
    
            private void SkglControl1_MouseMove(object sender, MouseEventArgs e)
            {
                // Save the mouse position
                m_MousePos = e.Location.ToSKPoint();
    
                // If Left-Click Drag, draw new bars
                if (e.Button == MouseButtons.Left)
                {
                    // Invalidate the Data Layer to draw a new random set of bars
                    m_Layer_Data.Invalidate();
                }
    
                // If Mouse Move, draw new mouse coordinates
                if (e.Location != m_PrevMouseLoc)
                {
                    // Remember the previous mouse location
                    m_PrevMouseLoc = e.Location;
    
                    // Invalidate the Overlay Layer to show the new mouse coordinates
                    m_Layer_Overlay.Invalidate();
                }
    
                // Start a new rendering cycle to redraw any invalidated layers.
                UpdateDrawing();
            }
    
    
            // -------------------------------------------------
            // --- Event - SkglControl1 - Mouse Double Click ---
            // -------------------------------------------------
    
            private void SkglControl1_MouseDoubleClick(object sender, MouseEventArgs e)
            {
                // Toggle the grid visibility
                m_ShowGrid = !m_ShowGrid;
    
                // Invalidate only the Grid Layer.  
                m_Layer_Grid.Invalidate();
    
                // Start a new rendering cycle to redraw any invalidated layers.
                UpdateDrawing();
            }
    
    
            // ----------------------
            // --- Update Drawing ---
            // ----------------------
    
            public void UpdateDrawing()
            {
                // Unblock the rendering thread to begin a render cycle.  Only the invalidated
                // Layers will be re-rendered, but all will be repainted onto the SKGLControl.
                m_ThreadGate.Set();
            }
    
    
            // --------------------------
            // --- Render Loop Method ---
            // --------------------------
    
            private void RenderLoopMethod()
            {
                while (m_KeepSwimming)
                {
                    // Draw any invalidated layers using this Render thread
                    DrawLayers();
    
                    // Invalidate the SKGLControl to run the PaintSurface event on the GUI thread
                    // The PaintSurface event will Paint the layer stack to the SKGLControl
                    skglControl1.Invalidate();
    
                    // DoEvents to ensure that the GUI has time to process
                    Application.DoEvents();
    
                    // Block and wait for the next rendering cycle
                    m_ThreadGate.WaitOne();
                }
            }
    
    
            // -------------------
            // --- Draw Layers ---
            // -------------------
    
            private void DrawLayers()
            {
                // Iterate through the collection of layers and raise the Draw event for each layer that is
                // invalidated.  Each event handler will receive a Canvas to draw on along with the Bounds for 
                // the Canvas, and can then draw the contents of that layer. The Draw commands are recorded and  
                // stored in an SKPicture for later playback to the SKGLControl.  This method can be called from
                // any thread.
    
                var clippingBounds = skglControl1.ClientRectangle.ToSKRect();
    
                foreach (var layer in m_Layers)
                {
                    layer.Render(clippingBounds);
                }
            }
    
    
            // -----------------------------------------
            // --- Event - Layer - Background - Draw ---
            // -----------------------------------------
    
            private void Layer_Background_Draw(object sender, EventArgs_Draw e)
            {
                // Create a diagonal gradient fill from Blue to Black to use as the background
                var topLeft = new SKPoint(e.Bounds.Left, e.Bounds.Top);
                var bottomRight = new SKPoint(e.Bounds.Right, e.Bounds.Bottom);
                var gradColors = new SKColor[2] { SKColors.DarkBlue, SKColors.Black };
    
                using (var paint = new SKPaint())
                using (var shader = SKShader.CreateLinearGradient(topLeft, bottomRight, gradColors, SKShaderTileMode.Clamp))
                {
                    paint.Shader = shader;
                    paint.Style = SKPaintStyle.Fill;
                    e.Canvas.DrawRect(e.Bounds, paint);
                }
            }
    
    
            // -----------------------------------
            // --- Event - Layer - Grid - Draw ---
            // -----------------------------------
    
            private void Layer_Grid_Draw(object sender, EventArgs_Draw e)
            {
                if (m_ShowGrid)
                {
                    // Draw a 25x25 grid of gray lines
    
                    using (var paint = new SKPaint())
                    {
                        paint.Color = new SKColor(64, 64, 64); // Very dark gray
                        paint.Style = SKPaintStyle.Stroke;
                        paint.StrokeWidth = 1;
    
                        // Draw the Horizontal Grid Lines
                        for (int i = 0; i < 50; i++)
                        {
                            var y = e.Bounds.Height * (i / 25f);
                            var leftPoint = new SKPoint(e.Bounds.Left, y);
                            var rightPoint = new SKPoint(e.Bounds.Right, y);
    
                            e.Canvas.DrawLine(leftPoint, rightPoint, paint);
                        }
    
                        // Draw the Vertical Grid Lines
                        for (int i = 0; i < 50; i++)
                        {
                            var x = e.Bounds.Width * (i / 25f);
                            var topPoint = new SKPoint(x, e.Bounds.Top);
                            var bottomPoint = new SKPoint(x, e.Bounds.Bottom);
    
                            e.Canvas.DrawLine(topPoint, bottomPoint, paint);
                        }
                    }
                }
            }
    
    
            // -----------------------------------
            // --- Event - Layer - Date - Draw ---
            // -----------------------------------
    
            private void Layer_Data_Draw(object sender, EventArgs_Draw e)
            {
                // Draw a simple bar graph
    
                // Flip the Y-Axis so that zero is on the bottom
                e.Canvas.Scale(1, -1);
                e.Canvas.Translate(0, -e.Bounds.Height);
    
                var rand = new Random();
    
                // Create 25 red / yellow gradient bars of random length
                for (int i = 0; i < 25; i++)
                {
                    var barWidth = e.Bounds.Width / 25f;
                    var barHeight = rand.Next((int)(e.Bounds.Height * 0.65d));
                    var barLeft = (i + 0) * barWidth;
                    var barRight = (i + 1) * barWidth;
                    var barTop = barHeight;
                    var barBottom = 0;
                    var topLeft = new SKPoint(barLeft, barTop);
                    var bottomRight = new SKPoint(barRight, barBottom);
                    var gradColors = new SKColor[2] { SKColors.Yellow, SKColors.Red };
    
                    // Draw each bar with a gradient fill
                    using (var paint = new SKPaint())
                    using (var shader = SKShader.CreateLinearGradient(topLeft, bottomRight, gradColors, SKShaderTileMode.Clamp))
                    {
                        paint.Style = SKPaintStyle.Fill;
                        paint.StrokeWidth = 1;
                        paint.Shader = shader;
    
                        e.Canvas.DrawRect(barLeft, barBottom, barWidth, barHeight, paint);
                    }
    
                    // Draw the border of each bar
                    using (var paint = new SKPaint())
                    {
                        paint.Color = SKColors.Blue;
                        paint.Style = SKPaintStyle.Stroke;
                        paint.StrokeWidth = 1;
    
                        e.Canvas.DrawRect(barLeft, barBottom, barWidth, barHeight, paint);
                    }
                }
            }
    
    
            // --------------------------------------
            // --- Event - Layer - Overlay - Draw ---
            // --------------------------------------
    
            private void Layer_Overlay_Draw(object sender, EventArgs_Draw e)
            {
                // Draw the mouse coordinate text next to the cursor
    
                using (var paint = new SKPaint())
                {
                    // Configure the Paint to draw a black rectangle behind the text
                    paint.Color = SKColors.Black;
                    paint.Style = SKPaintStyle.Fill;
    
                    // Measure the bounds of the text
                    var text = m_MousePos.ToString();
                    SKRect textBounds = new SKRect();
                    paint.MeasureText(text, ref textBounds);
    
                    // Fix the inverted height value from the MeaureText
                    textBounds = textBounds.Standardized;
                    textBounds.Location = new SKPoint(m_MousePos.X, m_MousePos.Y - textBounds.Height);
    
                    // Draw the black filled rectangle where the text will go
                    e.Canvas.DrawRect(textBounds, paint);
    
                    // Change the Paint to yellow
                    paint.Color = SKColors.Yellow;
    
                    // Draw the mouse coordinates text
                    e.Canvas.DrawText(m_MousePos.ToString(), m_MousePos, paint);
                }
            }
        }
    
    
    
        // ---------------------------------------------------------------------
        // ---------------------------------------------------------------------
        // -------                                                       -------
        // -------                     Class - Layer                     -------
        // -------                                                       -------
        // ---------------------------------------------------------------------
        // ---------------------------------------------------------------------
    
        public class Layer
        {
            // The Draw event that the background rendering thread will use to draw on the SKPicture Canvas.  
            public event EventHandler<EventArgs_Draw> Draw;
    
            // The finished recording - Used to play back the Draw commands to the SKGLControl from the GUI thread
            private SKPicture m_Picture = null;
    
            // A flag that indicates if the Layer is valid, or needs to be redrawn.
            private bool m_IsValid = false;
    
    
            // ---------------------------
            // --- Layer - Constructor ---
            // ---------------------------
    
            public Layer(string title)
            {
                this.Title = title;
            }
    
    
            // -------------
            // --- Title ---
            // -------------
    
            public string Title { get; set; }
    
    
            // --------------
            // --- Render ---
            // --------------
    
     
            // Raises the Draw event and records any drawing commands to an SKPicture for later playback.  
            // This can be called from any thread.
      
    
            public void Render(SKRect clippingBounds)
            {
                // Only redraw the Layer if it has been invalidated
                if (!m_IsValid)
                {
                    // Create an SKPictureRecorder to record the Canvas Draw commands to an SKPicture
                    using (var recorder = new SKPictureRecorder())
                    {
                        // Start recording 
                        recorder.BeginRecording(clippingBounds);
    
                        // Raise the Draw event.  The subscriber can then draw on the Canvas provided in the event
                        // and the commands will be recorded for later playback.
                        Draw?.Invoke(this, new EventArgs_Draw(recorder.RecordingCanvas, clippingBounds));
    
                        // Dispose of any previous Pictures
                        m_Picture?.Dispose();
    
                        // Create a new SKPicture with recorded Draw commands 
                        m_Picture = recorder.EndRecording();
    
                        this.RenderCount++;
    
                        m_IsValid = true;
                    }
                }
            }
    
    
            // --------------------
            // --- Render Count ---
            // --------------------
    
            // Gets the number of times that this Layer has been rendered
    
            public int RenderCount { get; private set; }
    
    
            // -------------
            // --- Paint ---
            // -------------
    
            // Paints the previously recorded SKPicture to the provided skglControlCanvas.  This basically plays 
            // back the draw commands from the last Render.  This should be called from the SKGLControl.PaintSurface
            // event using the GUI thread.
    
            public void Paint(SKCanvas skglControlCanvas)
            {
                if (m_Picture != null)
                {
                    // Play back the previously recorded Draw commands to the skglControlCanvas using the GUI thread
                    skglControlCanvas.DrawPicture(m_Picture);
    
                    this.PaintCount++;
                }
            }
    
    
            // --------------------
            // --- Render Count ---
            // --------------------
    
            // Gets the number of times that this Layer has been painted
    
            public int PaintCount { get; private set; }
    
    
            // ------------------
            // --- Invalidate ---
            // ------------------
    
            // Forces the Layer to be redrawn with the next rendering cycle
    
            public void Invalidate()
            {
                m_IsValid = false;
            }
        }
    
    
        // ---------------------------------------------------------------------
        // ---------------------------------------------------------------------
        // -------                                                       -------
        // -------                    EventArgs - Draw                   -------
        // -------                                                       -------
        // ---------------------------------------------------------------------
        // ---------------------------------------------------------------------
    
    
        public class EventArgs_Draw : EventArgs
        {
            public SKRect Bounds { get; set; }
            public SKCanvas Canvas { get; set; }
    
            public EventArgs_Draw(SKCanvas canvas, SKRect bounds)
            {
                this.Canvas = canvas;
                this.Bounds = bounds;
            }
        }
    
    }

- user1689175

---

我尝试了这段代码。它在一段时间内运行得很好，然后在SkglControl1_PaintSurface { layer.Paint(e.Surface.Canvas); } 处崩溃。System.AccessViolationException: '试图读取或写入受保护的内存。这通常是其他内存损坏的指示。' - undefined