Masking using the imperative API?

[RCNNT-Industries]

Hi!

I'm struggling to re-create a mask from the <Mask> component using the imperative API — it's probably not rocket science though :)

I've got a path I'd like to mask/clip with a rect (so it never goes outside the rect), how do I go about doing that?
(performance is a factor, so if clip is faster then masking that works too – it does have to fade or anything like that)

I've tried wrapping a <Drawing /> component in a <Mask> but that doesn't seem to work...

Best regards,
Erik

[wcandillon]

Your best bet here is to look at the declarative implementation to get a sense of how the masking is implemented: https://github.com/Shopify/react-native-skia/blob/main/package/src/renderer/components/Mask.tsx#L16

This is essentially done using blend modes.

[RCNNT-Industries]

Can it be done using just a single Drawing component?
Not sure how to translate the canvas.saveLayer() and restoreLayer calls from Group, which seems to do something important :)

The following mask does mask, but it also renders the mask (I'd like it to be invisible). Then the path itself is just black instead of yellow.

const maskPaint = Skia.Paint();
maskPaint.setBlendMode(BlendMode.Src);
maskPaint.setColor(Skia.Color("red"));
canvas.drawRect(rect(0, 0, 100, 100), maskPaint);

const pathPaint = Skia.Paint();
pathPaint.setStyle(PaintStyle.Stroke);
pathPaint.setColor(Skia.Color("yellow"))
pathPaint.setBlendMode(BlendMode.SrcIn);

canvas.drawPath(somePath, pathPaint);

[wcandillon]

You might want to look at this example as well to get a sense of how to leverage blend modes: https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/API/BlendModes.tsx

But indeed these examples are quite involved.

[RCNNT-Industries]

For others: this solves my problem :)
The Drawing component doesn't draw outside the clip set by the group.

<Group clip={rect(0, 0, someWidth, someHeight)}>
    <Drawing drawing={({canvas}) => {
       canvas.drawPath(somePath, somePaint);
    } } />
</Group>