How do I make a magnifying glass in Skia?

[vicoderr]

Hi!

I have to make a magnifying glass in my project. Is it possible to get a Canvas area in Skia and display it separately enlarged?

Example:

[wcandillon]

That's a fantastic question, do you know apps that implement such an effect? I would love to take a look.

Your best bet at the moment would be to use a Runtime Shader for that: https://shopify.github.io/react-native-skia/docs/image-filters/runtime-shader/
You will get the current drawing as a uniform. From there you can scale the region. Here is an example: https://www.shadertoy.com/view/4tdXDl

Note that RutimeShader doesn't allocate the bitmap with the Pixel Ratio. You will need to scale to the pixel Ratio and then divide the Result with the pixel ration:

<Group transform={[{ scale: 1 / PixelRatio.get() }]}>
      <Group
        layer={<Paint>
      <RuntimeShader source={source} uniforms={uniforms} />
    </Paint>}
        transform={[{ scale: PixelRatio.get() }]}
      >
        <Fill color="blue" />
        <Circle />
      </Group>
    </Group>

[vicoderr]

Thank you so much for the answer!

But is there any way to make it easier?

For example:

export const Magnifier = () => {
const onDraw = useDrawCallback((canvas) => {
// Get pixel area from Canvas from point x = 100, y = 100, width = 20, height = 20
const pixel_area = canvas.GetPixels(100, 100, 20, 20);

// draw Magnifier into point x = 50, y = 50 with new_width and new_height = 40
canvas.drawImage(pixel_area, 50, 50, 40, 40 );
});
return (
<SkiaView style={{ flex: 1 }} onDraw={onDraw} />
);
};

In other words, can I get an area of pixels from Canvas in Skia? and then use it as a Image ?

[rayronvictor]

You can use the Magnifying Glass example:
#2419