[FEATURE] Generic way of rendering and interacting with different types of content

[hansmbakker]

Introduction and use case

This feature request is a continuation of #1462.
I would like to create a "Composition control" that allows users to make a composition of different layers that are rendered on top of each other:

Suggested interaction:

• one item can be added per layer
• an item can be text, a bitmap or a vector image
• the user can rotate, pan or scale the item in the active layer using touch
• the user can pan the item in the active layer using mouse / pen
• on the left, a list of layers is shown
• the user can select the active layer in the list on the left

For this, it would be helpful if there was a generalized way to render those different types and interact with them (scale/pan/rotate).

What did I investigate:

• we looked at generalization of "renderables" (text/vector/bitmap) in [QUESTION] Is there a generic way to create a list of items to draw? #1462
• I found TouchManipulationBitmap which works for bitmaps, but not for text / paths
• I built a prototype of the control at https://github.com/hansmbakker/SkiaSharpPoc

[guzuomuse]

hi @hansmbakker
do you mean it was just like fabric.js ?
i think the "change layers orders" should be included.
have you got a solution for these features?

[hansmbakker]

Yes, it seems like I meant to have a simple version of what fabric.js offers.

Changing the order of layers sounds useful, too.

I only have the prototype I linked, and hoped to get feedback or to start a collaboration because I am a novice with SkiaSharp, but I guess other things have a higher priority, as you are the first commenter on this issue :)

Personally I have laid it to rest for now, but I would welcome others to continue the prototype I started, and maybe you can check whether @mattleibow has an interest for this?

[mattleibow]

I am moving this to a discussion as I think it fits better here. This is something that is maybe more in a library that sits on top of SkiaSharp. If we get some traction on this and maybe someone can start some work on a library I could help out.

[artemiusgreat]

I also wanted to have several layers, e.g. one for frequent invalidation, one for one time drawing on page load, one for something else. I ended up creating separate class that knows how to manage these layers. Given current implementation of SKCanvasView, it's impossible to have reference to several layers and update all of them at the same time because each layer will open Skia context independently inside OnPaintSurface and then will dispose it. So, if you have 2 layers, layer A and B, then by the time when you update layer B, context in layer A will be already disposed.

Instead of using SKCanvasView, I create two SKCanvas instances directly, one is a part of the XAML or whatever you use, the second one is virtual, created in code. All drawings happen on virtual canvas that is never disposed and available at any moment, so any layer can update any other related layer whenever it's needed. When actual invalidation is requested, I copy entire content from virtual canvas to actual control.

I mentioned some implementation details and code samples here.