Document applying effects on pictures (#2287)

docs/docs/group.md

@@ -22,6 +22,12 @@ It can apply the following operations to its children:
 | invertClip? | `boolean`           | Invert the clipping region: parts outside the clipping region will be shown and, inside will be hidden.                                                                                                               |
 | layer?      | `RefObject<Paint>`  | Draws the children as a bitmap and applies the effects provided by the paint.                                                                                                                                         |
 
+The following three components are not being affected by the group properties. To apply paint effects on these component, you need to use [layer effects](#layer-effects).
+In each component reference, we also document how to apply paint effects on them.
+* [Picture](/docs/shapes/pictures#applying-effects)
+* [SVG](/docs/images-svg#applying-effects)
+* [Paragraph](/docs/text/paragraph#applying-effects)
+
 ## Paint Properties
 
 Its children will inherit all paint attributes applied to a group. These attributes can be properties like `color` or `style` or children like `<Shader />`, or `<ImageFilter />` for instance ([see painting](/docs/paint/overview)).

docs/docs/shapes/pictures.md

@@ -52,6 +52,52 @@ export const HelloWorld = () => {
 };
 ```
 
+<img src={require("/static/img/simple-picture.png").default} width="256" height="256" />
+
+## Applying Effects
+
+The `Picture` component doesn't follow the same painting rules as other components.
+However you can apply effets using the `layer` property.
+For instance, in the example below, fopr  we apply a blur image filter.
+
+```tsx twoslash
+import React from "react";
+import { Canvas, Skia, Group, Paint, Blur, createPicture, BlendMode, Picture } from "@shopify/react-native-skia";
+
+const width = 256;
+const height = 256;
+
+export const Demo = () => {
+  const picture = createPicture(
+    (canvas) => {
+      const size = 256;
+      const r = 0.33 * size;
+      const paint = Skia.Paint();
+      paint.setBlendMode(BlendMode.Multiply);
+
+      paint.setColor(Skia.Color("cyan"));
+      canvas.drawCircle(r, r, r, paint);
+
+      paint.setColor(Skia.Color("magenta"));
+      canvas.drawCircle(size - r, r, r, paint);
+
+      paint.setColor(Skia.Color("yellow"));
+      canvas.drawCircle(size / 2, size - r, r, paint);
+    }
+  );
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Group layer={<Paint><Blur blur={10} /></Paint>}>
+        <Picture picture={picture} />
+      </Group>
+    </Canvas>
+  );
+};
+```
+
+<img src={require("/static/img/blurred-picture.png").default} width="256" height="256" />
+
+
 ## Serialization
 
 You can serialize a picture to a byte array.

docs/docs/text/paragraph.md

@@ -169,7 +169,7 @@ For instance, in the example below, fopr  we apply a blur image filter.
 
 ```tsx twoslash
 import React from "react";
-import { Canvas, ImageSVG, Skia, Group, Paint, Blur, Paragraph } from "@shopify/react-native-skia";
+import { Canvas, Skia, Group, Paint, Blur, Paragraph } from "@shopify/react-native-skia";
 
 const width = 256;
 const height = 256;

package/src/renderer/__tests__/e2e/Picture.spec.tsx

@@ -1,5 +1,8 @@
+import React from "react";
+
 import { importSkia, surface } from "../setup";
-import { checkImage, itRunsNodeOnly } from "../../../__tests__/setup";
+import { checkImage, docPath, itRunsNodeOnly } from "../../../__tests__/setup";
+import { Blur, Group, Paint, Picture } from "../../components";
 import { BlendMode } from "../../../skia/types";
 
 describe("Pictures", () => {
@@ -68,4 +71,64 @@ describe("Pictures", () => {
     );
     checkImage(image, "snapshots/pictures/hello-world.png");
   });
+  it("Simple picture example", async () => {
+    const img = await surface.drawOffscreen(
+      (Skia, canvas, ctx) => {
+        const { size } = ctx;
+        const r = 0.33 * size;
+        const recorder = Skia.PictureRecorder();
+        const canvas2 = recorder.beginRecording(
+          Skia.XYWHRect(0, 0, size, size)
+        );
+        const paint = Skia.Paint();
+        paint.setBlendMode(ctx.BlendMode);
+
+        paint.setColor(Skia.Color("cyan"));
+        canvas2.drawCircle(r, r, r, paint);
+
+        paint.setColor(Skia.Color("magenta"));
+        canvas2.drawCircle(size - r, r, r, paint);
+
+        paint.setColor(Skia.Color("yellow"));
+        canvas2.drawCircle(size / 2, size - r, r, paint);
+        const picture = recorder.finishRecordingAsPicture();
+        canvas.drawPicture(picture);
+      },
+      { BlendMode: BlendMode.Multiply, size: surface.width }
+    );
+    checkImage(img, docPath("simple-picture.png"));
+  });
+  itRunsNodeOnly("Blur Picture", async () => {
+    const { Skia, createPicture } = importSkia();
+    const picture = createPicture((canvas) => {
+      const size = 256;
+      const r = 0.33 * size;
+      const paint = Skia.Paint();
+      paint.setBlendMode(BlendMode.Multiply);
+
+      paint.setColor(Skia.Color("cyan"));
+      canvas.drawCircle(r, r, r, paint);
+
+      paint.setColor(Skia.Color("magenta"));
+      canvas.drawCircle(size - r, r, r, paint);
+
+      paint.setColor(Skia.Color("yellow"));
+      canvas.drawCircle(size / 2, size - r, r, paint);
+    });
+
+    const img = await surface.draw(
+      <>
+        <Group
+          layer={
+            <Paint>
+              <Blur blur={10} />
+            </Paint>
+          }
+        >
+          <Picture picture={picture} />
+        </Group>
+      </>
+    );
+    checkImage(img, docPath("blurred-picture.png"));
+  });
 });