Any examples of using a virtual canvas with SkiaSharp?

[RChrisCoble]

Hello @mattleibow!

Are you aware of any code or samples that leverage a virtual canvas with SkiaSharp? The use case we're trying to solve is something like the following:

• Looking to draw a large amount of graphics on top of a Map viewport.
• Would like to create a canvas that is much larger than the visible viewport without creating a 'real' canvas that size.
• As the map viewport is panned/zoomed, we want to pan/zoom the virtual canvas to that visible position, triggering a render of the canvas's visible viewport on top of the map control.

Thanks!

[mattleibow]

I do not know of a control off hand, but this is something that is certainly an idea that I am interested in.

I actually played around with this before: mono/SkiaSharp.Extended#79

That PR is ancient but I borrowed ideas and code from mapsui: https://github.com/Mapsui/Mapsui

This type of feature really is a great idea because it will help reduce the bad practice I have seen of people creating massive canvases in memory. Maybe my pr was let down by my poor skills in getting all the pan, rotate, scale,
fling gestures working together.

I could clean up the PR and then someone who knows more can fix the gestures part. But, I think the drawing part is working currently, the gestures let me down. But, can't be sure as that was a long time ago.

[angelofb]

this one looks similar https://github.com/OndrejKunc/SkiaScene

[RChrisCoble]

Thanks @mattleibow,

This type of feature really is a great idea because it will help reduce the bad practice I have seen of people creating massive canvases in memory.

Agree it would be a great feature.

I could clean up the PR and then someone who knows more can fix the gestures part.

Was just scanning the PR. I suspect we don't need any gesture support, or touch support for that matter. We'd be passing the gestures to the underlying map control for 'that' control to pan and zoom. We will just read the results of that panning and zooming, then adjust the SkiaSharp canvas to the desired zoom/position for a re-draw. So, we need less of the advanced gesturing stuff, and more of the virtual canvas stuff.

If you could point us more towards the virual canvas portion of the implementation, that would be great. Any help is much appreciated. Thank you @mattleibow !

[RChrisCoble]

@mattleibow we're looking to do this in Blazor BTW. :)

I've been trying to reverse engineer how the PR works, as I expected to see some type of virtual canvas class, but a virtual canvas implementation I somewhat expected to find in "SKDynamicSurfaceView.cs" doesn't have much in it. I'm also not sure what we're getting based on the derivation of "Layout [View]" and if that's specific to Xamarin Forms or SkiaSharp.

Anyway, we can always keep things extremely simple for now, and ask for the virtual canvas beahvior?

[mwpowellhtx]

I'll chime in here, my main goal is this.

I have a stock image which is my world map bitmap.

I have one SKElement serving as the gesturable view, if you will. I want to do the gestures you might expect, mouse down panning, scroll wheel zooming, modifier keys for more or less intensity, and so on. Some reasonable bounds checking should also be done, do not want for perceptible edges to exceed the canvas area, since it is a finite world; but this is secondary, I think, to getting the core gestures correct. Eventually click for a world location; which is a whole other transform can of worms beyond this scope.

I have a secondary SKElement radar view if you will, in which I want to scale down a minimal view port representation mimicking the primary survey canvas in zoom scaled ratio, and tracking the mouse move cursor in like manner.

Tracking the cursor radar more or less is working thus far. Panning more or less there but the underlying bitmap does not track well with the mouse, especially when I try to achieve an appropraite scale. So I feel as though this must stay in canvas coordinates, not world, or even scaled.

Having some difficult getting the zoom to work correctly in a way that feels natural, bounces around and such; and bounds checking not done yet. It sort of works, but zooming to cursor, for the aforementioned concerns, feels like kind of a kludge.

As far as I can determine, I have at least three main scaling factors, not including the actual zoom component (four). First, survey canvas to world bitmap dim (square, i.e. width == height). Second, thumb canvas to thumb bitmap. Third, thumb bitmap to world bitmap. With the rest tracking things like Pan (SKSize) gestures, mouse events System.Windows.Point to canvas coordinates, then ostensibly scaled out to world, but again getting this to track image under cursor, is tricky. I have a grasp of the various scales that are involved, but it is tricky, as you might imaging, keeping it all straight.

Approaching in WPF, and most of the view, view model plumbing is there. Unfortunately is not easy to distill out an MVP to show, receive feedback, but I am happy to work with the conversation here best I can manage. Otherwise, let me know, I can join a discord or something, present some material, gain some feedback that way, if it would be helpful to visualize, review code, etc. Happy to offer that as well.

Fortunately, though, it seems as though as long as the source geometry is tracking to the bitmaps, then it seems very easy to set canvas scale, translate, etc. So kudos there.

And for future thought, the idea of tiling my source map, not lost on me either. And is something I might possibly need to consider anyway, for a lot of reasons, world coordinate precision, accurate overlays, and so on, being among them. But not before I get the basics more or less sorted through.

Any pointers, insights, pro tips, would be appreciated.