What is the best alternate of SkiaView onDraw, as i want to draw thousands of paths restored from te database.

[amitsri007]

I've utilized SkiaView's onDraw function to render thousands of paths retrieved from the database in my current app. However, with the removal of SkiaView in the latest SDK, I'm seeking guidance on which component to adopt for upgrading my app to the newest Skia React Native package. Since my app is a writing application that captures user touches in the background and stores them in the database, while also displaying real-time feedback to users, performance is crucial. Can you recommend the most suitable component for achieving optimal path rendering performance? Additionally, if feasible, could you provide a sample code? I've found that drawing paths in Canvas using a path array isn't delivering the performance I require.

[wcandillon]

The picture API might be suitable: https://shopify.github.io/react-native-skia/docs/animations/textures#usepictureastexture
Also the offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures#under-the-hood (MakeOffscreen)

[amitsri007]

@wcandillon Appreciate the quick response. I'll view the links you gave me and let you know if I can implement them according to my needs successfully.

[amitsri007]

@wcandillon I've explored the usepictureastexture and under-the-hood APIs, and while they seem promising, they don't fully replicate the functionality I had with the SkiaView onDraw callback. Can you suggest an alternative component that provides similar onDraw callback functionality?

[wcandillon]

no it's exactly the same API/code even. Maybe I were you see a difference?

[amitsri007]

@wcandillon

I've utilized the onDraw callback to implement the following features:

1. Freehand writing.
2. Drawing lines, squares, rectangles, and arcs with markers and measurements.
3. The three handles (Red, Green, and Blue) for the arc tool are represented as paths, and I'm using the pointInPath logic for the
   identification and resizing of arcs.

Please check the demo video.
https://github.com/Shopify/react-native-skia/assets/67737510/545debde-dfb7-479b-8187-17c08cb152a7

I'm seeking guidance on achieving the same functionality using the Canvas component. Performance is critical, as there are multiple instances of Skia Canvas within a Word App-like view, allowing users to add new pages and navigate between them to make changes.

[wcandillon]

I strongly recommend you look at these two APIs for your use case:
https://shopify.github.io/react-native-skia/docs/animations/textures
https://shopify.github.io/react-native-skia/docs/shapes/atlas/#animations

[amitsri007]

@wcandillon Thank you. I'll review it and get back to you shortly with my observations on the feasibility of implementing it according to the demo you've shown.

[amitsri007]

@wcandillon I'd like to present my findings regarding your suggestions. I've attached a video showcasing the rendering quality of paths in three distinct demos.

The first demo employs standard paths within the canvas using Skia.

The second demo utilizes textures via https://shopify.github.io/react-native-skia/docs/animations/textures/#under-the-hood.

The third demo is native to Android.

Here's my assessment of the rendering quality:

1. Native Android (Both rendering and writing experience are commendable)
2. Path demo (Rendering and writing experience are both average)
3. Texture demo (Rendering is subpar, but the writing experience is satisfactory)

For the texture demo, I've implemented the following code. Could you please provide suggestions on how we can enhance the rendering quality using MakeOffscreen?

const createTexture = useCallback((image: SharedValue<SkImage | null>) => {
    "worklet";
    if (drawingPaint.current) {
        const surface = Skia.Surface.MakeOffscreen(width, height)!;
        const canvas = surface.getCanvas();
        // canvas.drawColor(Skia.Color("lightGray"));
        // canvas.drawPoints(PointMode.Lines, points, drawingPaint.current!)
        paths.map((p) => {
            canvas.drawPath(p, drawingPaint.current!);
        });
        surface.flush();
        image.value = surface.makeImageSnapshot();
        surface.dispose();
    }
}, [paths]);

My objective is to achieve optimal rendering and writing performance on any Android tablet. Any assistance would be greatly appreciated.

Rendering_and_Writing_Demo_App_comp.mp4

[amitsri007]

@wcandillon Could you please provide an update on the findings mentioned earlier? Any assistance would be appreciated as I migrate my existing app to the latest Skia version.

[wcandillon]

The code looks good. Did you identify where the bottleneck is?

…

On Wed, May 8, 2024 at 8:40 AM amitsri007 ***@***.***> wrote: @wcandillon <https://github.com/wcandillon> Could you please provide an update on the findings mentioned earlier? Any assistance would be appreciated as I migrate my existing app to the latest Skia version. — Reply to this email directly, view it on GitHub <#2362 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVWNLG7HEOE3OI3TEGLZBHCFVAVCNFSM6AAAAABGDSDROSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TGNJQGQ4TO> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[amitsri007]

@wcandillon In the texture demo video, you'll notice that the rendered paths lose their smoothness and become pixelated. However, in the path demo video, the paths remain smooth throughout.

Texture Demo:

Texture_SkiaDemoApp.mp4

Path Demo:

Path_SkiaDemoApp.mp4

[wcandillon]

yes this is because on screen 100pt is 100px * pixel density. And in the texture there is no notion of pixel density so you probably need to scale your drawing to the oixel density. This should help

…

On Wed 8 May 2024 at 09:22, amitsri007 ***@***.***> wrote: @wcandillon <https://github.com/wcandillon> In the texture demo video, you'll notice that the rendered paths lose their smoothness and become pixelated. However, in the path demo video, the paths remain smooth throughout. Texture Demo: https://github.com/Shopify/react-native-skia/assets/67737510/7e601eee-cf2f-4301-b7e1-8f08afa474d5 Path Demo: https://github.com/Shopify/react-native-skia/assets/67737510/e75b135c-edca-4b01-a5fc-b426320d1f94 — Reply to this email directly, view it on GitHub <#2362 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVWHLCTUC3PURTTR7NTZBHHDXAVCNFSM6AAAAABGDSDROSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TGNJQHA4DO> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[amitsri007]

@wcandillon Thank you for getting back to me so quickly. Do you have any sample code that could offer assistance? Alternatively, could you suggest any additions to the following code? Any help would be greatly appreciated.

const createTexture = useCallback((image: SharedValue<SkImage | null>) => {
"worklet";
if (drawingPaint.current) {
const surface = Skia.Surface.MakeOffscreen(width, height)!;
const canvas = surface.getCanvas();
// canvas.drawColor(Skia.Color("lightGray"));
// canvas.drawPoints(PointMode.Lines, points, drawingPaint.current!)
paths.map((p) => {
canvas.drawPath(p, drawingPaint.current!);
});
surface.flush();
image.value = surface.makeImageSnapshot();
surface.dispose();
}
}, [paths]);

[wcandillon]

canvas.scale(PixelRatio.get(), PixelRatio.get())

…

On Wed, May 8, 2024 at 9:36 AM amitsri007 ***@***.***> wrote: @wcandillon <https://github.com/wcandillon> Thank you for getting back to me so quickly. Do you have any sample code that could offer assistance? Alternatively, could you suggest any additions to the following code? Any help would be greatly appreciated. const createTexture = useCallback((image: SharedValue<SkImage | null>) => { "worklet"; if (drawingPaint.current) { const surface = Skia.Surface.MakeOffscreen(width, height)!; const canvas = surface.getCanvas(); // canvas.drawColor(Skia.Color("lightGray")); // canvas.drawPoints(PointMode.Lines, points, drawingPaint.current!) paths.map((p) => { canvas.drawPath(p, drawingPaint.current!); }); surface.flush(); image.value = surface.makeImageSnapshot(); surface.dispose(); } }, [paths]); — Reply to this email directly, view it on GitHub <#2362 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVWWZRIB7KERMAKGJGTZBHIWDAVCNFSM6AAAAABGDSDROSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TGNJRGA2DE> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[amitsri007]

@wcandillon Thank you. I'll review and get back to you with the results shortly.

[amitsri007]

@wcandillon I've made the updates to the code based on your suggestion, but unfortunately, the result remains unchanged. However, now the path is rendering shifted away from its original location due to the canvas scale. Could you please review the attached video and code?

PixelRatio_SkiaDemoApp.mp4

const createTexture = useCallback((image: SharedValue<SkImage | null>) => {
    "worklet";
    if (drawingPaint.current) {
        const surface = Skia.Surface.MakeOffscreen(width, height)!;
        const canvas = surface.getCanvas();
        canvas.scale(pixelRatio, pixelRatio); //PixelRatio.get() = 1.5 
        paths.map((p) => {
            canvas.drawPath(p, drawingPaint.current!);
        });
        surface.flush();
        image.value = surface.makeImageSnapshot();
        surface.dispose();
    }
}, [paths]);

[amitsri007]

@wcandillon Have you had an opportunity to investigate the issue? Additionally, I've noticed that the smoothness of the path in the native Android project is at its best when utilizing the bitmap setup outlined below. I'm uncertain if this information will assist in pinpointing the issue and its resolution. Thank you once again for your assistance and support.

mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);