How to draw with Skia on Cairo context in Gtk3

Question

I'm expecting to get colored rectangle, but getting rectangle of garbage instead. So far I have the following code:

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 ();
        }
    }
}

score 0 · Answer 1 · answered Mar 07 '16 at 20:44

I have no clue about Skia and I can't find any documentation on its image format, but the last argument here should be the stride. The natural stride would be 4*image.Width. Is that what Skia uses, too? (stride is the number of bytes between the beginning of a pixel and the pixel below that one)

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

Yes, that was part of problem, I should use 4 * image.Width – Darius Kucinskas Mar 08 '16 at 08:32 — Darius Kucinskas, Mar 08 '16 at 08:32

score 0 · Accepted Answer · answered Mar 08 '16 at 08:41

I have found the soulution I should have been using SKBitmap before creating SKSurface and SKCanvas. To get pixel data I should have been using SKBitmap.GetPixels method. Here follows the source code of working example:

    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)
            {

            }
        }
    }

This code will work only on Windows where `Cairo.Format.Argb32` and `SKColorType.N_32` define the same A-R-G-B order. On Linux and Mac `SKColorType.N_32` is `A-B-G-R` instead. — c-smile, Jul 26 '16 at 19:34

How to draw with Skia on Cairo context in Gtk3

2 Answers2