Search code examples
javascriptreact-nativeimagesvgskia

I want to draw a path on the given image using @shopify/reactnative-skia and then save the drawn part into an image


I want to draw a path on the given image using @shopify/reactnative-skia and then save the drawn part into an image as a clip but its not getting the correct clip image, here is the sample code;

 const surface = Skia.Surface.MakeOffscreen(
            canvasSize.width,
            canvasSize.height
        );

        const currentCanvas = surface?.getCanvas();

        const bounds = path.getBounds();
        const paint = Skia.Paint();
        paint.setAntiAlias(false);

        currentCanvas?.drawImageRect(
            image,
            Skia.XYWHRect(0, 0, image.width(), image.height()),
            Skia.XYWHRect(0, 0, canvasSize.width, canvasSize.height),
            paint
        );

        currentCanvas?.save();

        const clipImage = surface?.makeImageSnapshot(bounds);

canvasSize.width and canvasSize.height is the screen width and height.

And here is the base image:

enter image description here

And cut part size:

enter image description here


Solution

  • I resolved the issue by passing the correct image width and height dimensions. So the issue is resolved.