Document Coons patches (#143)

docs/docs/shapes/patch.md

@@ -0,0 +1,48 @@
+---
+id: patch
+title: Patch
+sidebar_label: Patch
+slug: /shapes/patch
+---
+
+Draws a [Coons patch](https://en.wikipedia.org/wiki/Coons_patch).
+
+| Name      | Type      |  Description                                                  |
+|:----------|:----------|:--------------------------------------------------------------|
+| cubics | `CubicBezier[4]` | Specifies four cubic Bezier starting at the top-left corner, in clockwise order, sharing every fourth point. The last cubic Bezier ends at the first point. |
+| textures   | `Point[]`.   | [Texture mapping](https://en.wikipedia.org/wiki/Texture_mapping). The texture is the shader provided by the paint |
+| colors?    | `string[]`   | Optional colors to be associated to each corner |
+| blendMode? | `BlendMode`  | If `colors` is provided, colors are blended with the paint using the blend mode. Default is `dstOver` if colors are provided, `srcOver` if not |
+
+## Example
+
+```tsx twoslash
+import {Canvas, Patch, vec} from "@shopify/react-native-skia";
+
+const PatchDemo = () => {
+  const colors = ["#61dafb", "#fb61da", "#61fbcf", "#dafb61"];
+  const C = 64;
+  const topLeft = { src: vec(0, 0), c1: vec(C, 0), c2: vec(0, C) };
+  const topRight = { src: vec(256, 0), c1: vec(256 + C, 0), c2: vec(256, C) };
+  const bottomRight = {
+    src: vec(256, 256),
+    c1: vec(256 - 2 * C, 256),
+    c2: vec(256, 256 - 2 * C),
+  };
+  const bottomLeft = {
+    src: vec(0, 256),
+    c1: vec(-2 * C, 256),
+    c2: vec(0, 256 - 2 * C),
+  };
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Patch
+        colors={colors}
+        cubics={[topLeft, topRight, bottomRight, bottomLeft]}
+      />
+    </Canvas>
+  );
+};
+```
+
+![SVG Notation](assets/patch/example1.png)

docs/sidebars.js

@@ -69,7 +69,12 @@ const sidebars = {
       collapsed: false,
       type: "category",
       label: "Shapes",
-      items: ["shapes/path", "shapes/polygons", "shapes/ellipses"],
+      items: [
+        "shapes/path",
+        "shapes/polygons",
+        "shapes/ellipses",
+        "shapes/patch",
+      ],
     },
     {
       collapsed: false,

example/src/Examples/API/Shapes2.tsx

@@ -59,6 +59,11 @@ const inner = rrect(
   0
 );
 
+const topLeft = { src: vec(0, 0), c1: vec(0, 15), c2: vec(15, 0) };
+const topRight = { src: vec(100, 0), c1: vec(100, 15), c2: vec(85, 0) };
+const bottomRight = { src: vec(100, 100), c1: vec(100, 85), c2: vec(85, 100) };
+const bottomLeft = { src: vec(0, 100), c1: vec(0, 85), c2: vec(15, 100) };
+
 export const Shapes = () => {
   return (
     <ScrollView>
@@ -106,7 +111,7 @@ export const Shapes = () => {
       <Canvas style={styles.container}>
         <Patch
           colors={["#61DAFB", "#fb61da", "#61fbcf", "#dafb61"]}
-          cubics={cubics}
+          cubics={[topLeft, topRight, bottomRight, bottomLeft]}
         />
       </Canvas>
     </ScrollView>

example/src/Examples/Matrix/Matrix.tsx

@@ -4,7 +4,6 @@ import {
   Fill,
   Paint,
   useFont,
-  useFontMgr,
 } from "@shopify/react-native-skia";
 import React from "react";
 import { useTimestamp } from "@shopify/react-native-skia/src/animation/Animation/hooks";

package/src/renderer/components/shapes/Patch.tsx

@@ -1,15 +1,21 @@
 import React from "react";
 
-import type { CustomPaintProps, SkEnum } from "../../processors";
+import type { CustomPaintProps, SkEnum, Vector } from "../../processors";
 import { enumKey, processColor } from "../../processors";
 import type { IPoint } from "../../../skia";
 import { BlendMode } from "../../../skia/Paint/BlendMode";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 import { useDrawing } from "../../nodes/Drawing";
 
+interface CubicBezier {
+  src: Vector;
+  c1: Vector;
+  c2: Vector;
+}
+
 export interface PatchProps extends CustomPaintProps {
   colors: string[];
-  cubics: IPoint[];
+  cubics: [CubicBezier, CubicBezier, CubicBezier, CubicBezier];
   texs?: IPoint[];
   blendMode?: SkEnum<typeof BlendMode>;
 }
@@ -18,9 +24,11 @@ export const Patch = (props: AnimatedProps<PatchProps>) => {
   const onDraw = useDrawing(
     props,
     ({ canvas, paint, opacity }, { colors, cubics, texs, blendMode }) => {
-      const mode = blendMode ? BlendMode[enumKey(blendMode)] : undefined;
+      // If the colors are provided, the default blendMode is set to dstOver, if not, the default is set to srcOver
+      const defaultBlendMode = colors ? BlendMode.DstOver : BlendMode.SrcOver;
+      const mode = blendMode ? BlendMode[enumKey(blendMode)] : defaultBlendMode;
       canvas.drawPatch(
-        cubics,
+        cubics.map(({ src, c1, c2 }) => [src, c1, c2]).flat(),
         colors.map((c) => processColor(c, opacity)),
         texs,
         mode,