Getting Started with 2D Skia Drawings in Uno

[btkellogg]

Describe your issue or question 📝

Something I've been trying for awhile now is getting a cross-platform app where I can make a 2D drawing interface working.

What I see for Uno is there is a SKCanvasElement, which should give hardware accelerated Skia canvas to Skia Desktop targets. I also saw this thread about use of SKCanvasElement vs. SKSwapChainPanel.

However, when I try setting up an app with these elements, I keep running into a bunch of issues:

• SKCanvasElement only works if my file name ends in .skia.cs
• placing a "using xx.Platforms.Desktop" statement throws an error elsewhere in my code, even if I wrap it in "#if __UNO_SKIA__"
• If I create an object that extends SKCanvasElement, whether it is placed in the Platforms/Desktop folder or in the base project folder, I cannot seem to reference it from elsewhere in my program (I'm just trying from the MainPage.xaml.cs right now). I've made sure to name my namespaces in these files and using reference appropriately

I'm sure there's a lot I'm doing wrong in setting this up, but it would be really helpful if there was a reference or some sort of sample to go by, something where I could see a 2D Skia canvas working on multiple platforms. Does such a thing exist, and is Uno currently supporting this SKCanvasElement on apps running multiple platforms (even if I need to target something else like SKXamlCanvas or SKSwapChainPanel)?

UnoApp5.zip

For which platforms 📱💻🖥️

Desktop (Windows), WebAssembly, Desktop (macOS), Windows App SDK

Anything else we need to know? 💬

I added the code I'm working with to a .zip file for reference. The classes extending SKCanvasElement are the "TestSkia1.skia.cs" (in the root project folder) and "TestSkia2.skia.cs" (in the Platforms/Desktop folder).

[DevTKSS]

hey @mtmattei seen this issue here just now and remembered your answer from May at the uno discord where you suggested to me, the canvas from the uno toolkit to evaluate. Maybe this is your expertise here? I am too using the desktop target for my apps that should use them...

[ramezgerges]

@btkellogg Hello. For a complete SKCanvasElement sample, see this Uno.Samples sample.

• SKCanvasElement is only available on our Skia targets. You don't have to use .skia.cs but you have to make sure that the code is only included on the Skia targets, for example by surrounding your SKCanvasElement logic with __UNO_SKIA__
• It's throwing an error because the file in that namespace is placed in the Platforms/Desktop folder which means that it will only be included on the Skia desktop targets (Win32, X11, MacOS, etc. but not WASM). If you want the file to be available on all skia targets, you can move it outside. If you want to only include it on Desktop targets, then wrap the using statement in __UNO_SKIA__ && !__UNO_SKIA_WEBASSEMBLY_BROWSER__ instead of __UNO_SKIA__. I've opened an issue to add a __UNO_SKIA_DESKTOP constant here.
• See the previous point.

You also have to remove the <Compile Include="TestSkia1.skia.cs" /> line from your csproj as it was causing the file to be referenced twice so the build was failing. The build succeeds after I removed that line and addressed the points I mentioned above. It will still fail on net9.0-windows10.0.26100 because you're using TestSkia1 under #elif WINDOWS10_0_18362_0_OR_GREATER so you need to remove that as well.

Let me know if you need additional help. Thanks.

[btkellogg]

Hi @ramezgerges, delayed in getting back but thank you very much for your response - I was able to get this working in my app!

One more question that I have now that I have this in, is that my mouse events do not seem to register. I see that SKCanvasElement inherits from FrameworkElement, but it seems any mouse events (clicking or mouse movement) just do not call the event handlers I have in the class. This was working fine for my SKXamlCanvas (most of my code for SKCanvasElement was copied from there). Do you know what I'd be missing there?

Thanks for sending on the SKCanvasElement example, but yeah the interaction there isn't through direct mouse events either.

public class NetworkEditor : SKCanvasElement
{ 
     public NetworkEditor()
    {
        IsHitTestVisible = true;
        Background = new SolidColorBrush(Colors.AliceBlue);

        PointerPressed += Canvas_PointerPressed;
        PointerMoved += Canvas_PointerMoved;
        PointerReleased += Canvas_PointerReleased;
        PointerWheelChanged += Canvas_PointerWheelChanged;
    }

    private void Canvas_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        //code that doesn't get called when I click on my SKCanvasElement
    }
}