如何在 Gtk3 中使用 Skia on Cairo context 绘图

Question

我希望得到彩色矩形，但得到的却是垃圾矩形。到目前为止，我有以下代码：

using System;
using GLib;
using SkiaSharp;
using Gtk;

namespace SkiaSharpExample {
    class CCDrawingArea : DrawingArea {
        protected override bool OnDrawn (Cairo.Context cr) {
            using (var skSurface = SKSurface.Create (100, 100, SKColorType.N_32, SKAlphaType.Premul)) {
                var canvas = skSurface.Canvas;
                var paint = new SKPaint {
                    StrokeWidth = 4, 
                    Color = new SKColor (255, 255, 255, 255)
                };

                var rect = new SKRect (10, 10, 50, 50);
                canvas.DrawRect (rect, paint);

                var image = skSurface.Snapshot ();

                Cairo.Surface surface = new Cairo.ImageSurface (
                    image.Encode ().Data,
                    Cairo.Format.Argb32,
                    image.Width, image.Height,
                    4 * image.Width * image.Height);

                surface.MarkDirty ();
                cr.SetSourceSurface (surface, 0, 0);
                cr.Paint ();
            }
            return true;
        }
    }

    class MainClass {
        public static void Main (string[] args){
            ExceptionManager.UnhandledException += delegate(UnhandledExceptionArgs expArgs) {
                Console.WriteLine (expArgs.ExceptionObject.ToString ());
                expArgs.ExitApplication = true;
            };

            Gtk.Application.Init ();

            var window = new Window ("Hello World");
            window.SetDefaultSize (1024, 800);
            window.SetPosition (WindowPosition.Center);
            window.DeleteEvent += delegate { 
                Gtk.Application.Quit (); 
            };

            var darea = new CCDrawingArea ();
            window.Add (darea);

            window.ShowAll ();

            Gtk.Application.Run ();
        }
    }
}

Answer 1

我对 Skia 一无所知，也找不到任何关于其图像格式的文档，但这里的最后一个参数应该是 stride。自然步幅为 4*image.Width。这也是 Skia 使用的吗？（步幅是一个像素的开始和那个像素下面的像素之间的字节数）

           Cairo.Surface surface = new Cairo.ImageSurface (
                image.Encode ().Data,
                Cairo.Format.Argb32,
                image.Width, image.Height,
                4 * image.Width * image.Height);

Answer 2

我找到了在创建 SKSurface 和 SKCanvas 之前应该使用 SKBitmap 的解决方案。要获取像素数据，我应该使用 SKBitmap.GetPixels 方法。以下是工作示例的源代码：

    using System;
    using GLib;
    using SkiaSharp;
    using Gtk;

    namespace SkiaSharpExample
    {
        class CCDrawingArea : DrawingArea
        {
            protected override bool OnDrawn(Cairo.Context cr)
            {
                const int width = 100;
                const int height = 100;

                using (var bitmap = new SKBitmap(width, height, SKColorType.N_32, SKAlphaType.Premul))
                {
                    IntPtr len;
                    using (var skSurface = SKSurface.Create(bitmap.Info.Width, bitmap.Info.Height, SKColorType.N_32, SKAlphaType.Premul, bitmap.GetPixels(out len), bitmap.Info.RowBytes))
                    {
                        var canvas = skSurface.Canvas;
                        canvas.Clear(SKColors.White);

                        using (var paint = new SKPaint())
                        {
                            paint.StrokeWidth = 4;
                            paint.Color = new SKColor(0x2c, 0x3e, 0x50);

                            var rect = new SKRect(10, 10, 50, 50);
                            canvas.DrawRect(rect, paint);
                        }

                        Cairo.Surface surface = new Cairo.ImageSurface(
                            bitmap.GetPixels(out len),
                            Cairo.Format.Argb32,
                            bitmap.Width, bitmap.Height,
                            bitmap.Width * 4);


                        surface.MarkDirty();
                        cr.SetSourceSurface(surface, 0, 0);
                        cr.Paint();
                    }
                }

                return true;
            }
        }

        class MainClass
        {
            public static void Main(string[] args)
            {
                ExceptionManager.UnhandledException += delegate(UnhandledExceptionArgs expArgs)
                {
                    Console.WriteLine(expArgs.ExceptionObject.ToString());
                    expArgs.ExitApplication = true;
                };

                Gtk.Application.Init();

                var window = new Window("Hello Skia World");
                window.SetDefaultSize(1024, 800);
                window.SetPosition(WindowPosition.Center);
                window.DeleteEvent += delegate
                {
                    Gtk.Application.Quit();
                };

                var darea = new CCDrawingArea();
                window.Add(darea);

                window.ShowAll();

                Gtk.Application.Run();
            }

            void OnException(object o, UnhandledExceptionArgs args)
            {

            }
        }
    }

如何在 Gtk3 中使用 Skia on Cairo context 绘图

How to draw with Skia on Cairo context in Gtk3

c#

cairo

gtk#

skia