Add TextPath & TextBlob support

docs/docs/text/blob.md

@@ -0,0 +1,38 @@
+---
+id: blob
+title: Text Blob
+sidebar_label: Text Blob
+slug: /text/blob
+---
+
+A text blob contains glyphs, their positions, and paint attributes specific to text.
+
+| Name        | Type       |  Description                                                 |
+|:------------|:-----------|:-------------------------------------------------------------|
+| blob        | `TextBlob` | Text blob                                                    |
+| x?          | `number`   | x coordinate of the origin of the entire run. Default is 0   |
+| y?          | `number`   | y coordinate of the origin of the entire run. Default is 0   |
+
+## Example
+
+```tsx twoslash
+import {Canvas, TextBlob, Skia} from "@shopify/react-native-skia";
+
+
+export const HelloWorld = () => {
+  const typeface = Skia.FontMgr.RefDefault().matchFamilyStyle("helvetica");
+  if (!typeface) {
+    throw new Error("Helvetica not found");
+  }
+  const font = Skia.Font(typeface, 30);
+  const blob = Skia.TextBlob.MakeFromText("Hello World!", font);
+  return (
+      <Canvas style={{ flex: 1 }}>
+        <TextBlob
+          blob={blob}
+          color="blue"
+        />
+      </Canvas>
+  );
+};
+```

docs/docs/text/fonts.md

@@ -5,7 +5,10 @@ sidebar_label: Fonts
 slug: /text/fonts
 ---
 
-By default all the fonts available within your app are available in your Canvas. For instance, you can write the following.
+## System Fonts
+
+By default all the fonts available within your app are available in your Canvas.
+For instance, you can write the following.
 
 ```tsx twoslash
 import {Canvas, Text} from "@shopify/react-native-skia";
@@ -16,11 +19,61 @@ export const HelloWorld = () => {
       <Text
         x={0}
         y={0}
-        value="Hello World"
+        text="Hello World"
         familyName="serif"
         size={16}
       />
     </Canvas>
   );
 };
+```
+
+System fonts can also be accessed as a font instance using the system font manager.
+
+```tsx twoslash
+import {Canvas, Text, Skia} from "@shopify/react-native-skia";
+
+const typeface = Skia.FontMgr.RefDefault().matchFamilyStyle("helvetica");
+if (!typeface) {
+  throw new Error("Helvetica not found");
+}
+const font = Skia.Font(typeface, 30);
+
+export const HelloWorld = () => {
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Text
+        x={0}
+        y={0}
+        text="Hello World"
+        font={font}
+      />
+    </Canvas>
+  );
+};
+```
+
+## Custom Fonts
+
+Alternatively, you can use your own set of custom fonts to be available in the canvas, as seen below.
+
+```tsx twoslash
+import {Canvas, Text, useFont} from "@shopify/react-native-skia";
+
+export const HelloWorld = () => {
+  const font = useFont(require("./my-custom-font.otf"), 16);
+  if (font === null) {
+    return null;
+  }
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Text
+        x={0}
+        y={0}
+        font={font}
+        text="Hello World"
+      />
+    </Canvas>
+  );
+};
 ```

docs/docs/text/glyphs.md

@@ -0,0 +1,41 @@
+---
+id: glyphs
+title: Glyphs
+sidebar_label: Glyphs
+slug: /text/glyphs
+---
+
+This component raws a run of glyphs, at corresponding positions, in a given font.
+
+| Name        | Type       |  Description                                                           |
+|:------------|:-----------|:-----------------------------------------------------------------------|
+| glyphs      | `Ghlyph[]` | Glyphs to draw                                                         |
+| x?          | `number`.  | x coordinate of the origin of the entire run. Default is 0             |
+| y?          | `number`.  | y coordinate of the origin of the entire run. Default is 0             |
+| font        | `Font`     | Font to use (see [Fonts](/docs/text/fonts))                            |
+| familyName? | `string`   | Font family name to use  (see [Fonts](/docs/text/fonts))               |
+| size?       | `number`   | Font size if `familName` is provided                                   |
+
+## Draw text vertically
+
+```tsx twoslash
+import {Canvas, Glyphs, vec, useFont} from "@shopify/react-native-skia";
+
+export const HelloWorld = () => {
+  const font = useFont(require("./my-font.otf"), 16);
+  if (font === null) {
+    return null;
+  }
+  const glyphs = font
+    .getGlyphIDs("Hello World!")
+    .map((id, i) => ({ id, pos: vec(0, i*32) }));
+  return (
+    <Canvas style={{ flex:  1 }}>
+      <Glyphs
+        font={font}
+        glyphs={glyphs}
+      />
+    </Canvas>
+  );
+}
+```

docs/docs/text/path.md

@@ -0,0 +1,41 @@
+---
+id: path
+title: Text Path
+sidebar_label: Text Path
+slug: /text/path
+---
+
+Draws text along an SVG path.
+The fonts available in the canvas are described in [here](/docs/text/fonts).
+
+| Name        | Type               |  Description                                                 |
+|:------------|:-------------------|:-------------------------------------------------------------|
+| path        | `Path` or `string` | Path to draw. Can be a string using the [SVG Path notation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#line_commands) or an object created with `Skia.Path.Make()` |
+| text        | `string`           | Text to draw                                                 |
+| font        | `Font`             | Font to use (see [Fonts](/docs/text/fonts))                  |
+| familyName? | `string`           | Font family name to use  (see [Fonts](/docs/text/fonts))     |
+| size?       | `number`           | Font size if `familName` is provided                         |
+
+## Example
+
+```tsx twoslash
+import {Canvas, Group, TextPath, Skia} from "@shopify/react-native-skia";
+
+const circle = Skia.Path.Make();
+circle.addCircle(128, 128, 128);
+
+export const HelloWorld = () => {
+  return (
+      <Canvas style={{ flex: 1 }}>
+        <Group transform={[{ translateY: 25 }]}>
+          <TextPath
+            path={circle}
+            familyName="helvetica"
+            size={24}
+            text="Hello World!"
+          />
+        </Group>
+      </Canvas>
+  );
+};
+```

docs/docs/text/text.md

@@ -6,15 +6,14 @@ slug: /text/text
 ---
 
 The text component can be used to draw a simple text.
-The font family and the font size must be specified.
 The fonts available in the canvas are described in [here](/docs/text/fonts).
 
-| Name       | Type      |  Description                                                  |
-|:-----------|:----------|:--------------------------------------------------------------|
-| value      | `string`  | Text to draw                                                  |
-| familyName | `string`  | Font family name                                              |
-| size       | `number`  | Font size                                                     |
-| font       | `font`    | Custom font to use (loaded with useFont)                      |
+| Name        | Type      |  Description                                                  |
+|:------------|:----------|:--------------------------------------------------------------|
+| text        | `string`  | Text to draw                                                  |
+| font        | `Font`     | Font to use (see [Fonts](/docs/text/fonts))                  |
+| familyName? | `string`   | Font family name to use  (see [Fonts](/docs/text/fonts))     |
+| size?       | `number`   | Font size if `familName` is provided                         |
 
 ### Example
 
@@ -27,7 +26,7 @@ export const HelloWorld = () => {
       <Text
         x={0}
         y={0}
-        value="Hello World"
+        text="Hello World"
         familyName="serif"
         size={32}
       />
@@ -36,27 +35,3 @@ export const HelloWorld = () => {
 };
 ```
 
-## Using a custom font
-
-Alternatively, you can use your own set of custom fonts to be available in the canvas, as seen below.
-
-```tsx twoslash
-import {Canvas, Text, useFont} from "@shopify/react-native-skia";
-
-export const HelloWorld = () => {
-  const font = useFont(require("./my-custom-font.otf"), 16);
-  if (font === null) {
-    return null;
-  }
-  return (
-    <Canvas style={{ flex: 1 }}>
-      <Text
-        x={0}
-        y={0}
-        font={font}
-        value="Hello World"
-      />
-    </Canvas>
-  );
-};
-```

docs/sidebars.js

@@ -47,7 +47,13 @@ const sidebars = {
       collapsed: true,
       type: "category",
       label: "Text",
-      items: ["text/fonts", "text/text"],
+      items: [
+        "text/fonts",
+        "text/text",
+        "text/glyphs",
+        "text/path",
+        "text/blob",
+      ],
     },
     {
       collapsed: true,

example/src/Examples/API/Path2.tsx

@@ -7,6 +7,8 @@ import {
   Path,
   Group,
   rect,
+  TextPath,
+  useFont,
 } from "@shopify/react-native-skia";
 
 import { Title } from "./components/Title";
@@ -43,6 +45,10 @@ const result = Skia.Path.MakeFromOp(rect1, circle, PathOp.Difference)!;
 result.simplify();
 
 export const PathExample = () => {
+  const font = useFont(require("./Roboto-Regular.otf"), 32);
+  if (!font) {
+    return null;
+  }
   return (
     <ScrollView>
       <Title>Path Operations</Title>
@@ -68,6 +74,12 @@ export const PathExample = () => {
       <Canvas style={styles.stroke}>
         <Path path={s} color="black" style="stroke" strokeWidth={1} />
       </Canvas>
+      <Title>Text Path</Title>
+      <Canvas style={styles.textPath}>
+        <Group transform={[{ translateY: 25 }]}>
+          <TextPath path={circle} font={font} text="Hello World!" />
+        </Group>
+      </Canvas>
     </ScrollView>
   );
 };
@@ -89,4 +101,8 @@ const styles = StyleSheet.create({
     width: SIZE,
     height: SIZE,
   },
+  textPath: {
+    width: SIZE,
+    height: SIZE,
+  },
 });

example/src/Examples/Graphs/Slider.tsx

@@ -59,7 +59,7 @@ export const Slider: React.FC<GraphProps> = ({ height, width }) => {
           size={12}
           x={() => touchPos.value.x - 24}
           y={() => touchPos.value.y - 18}
-          value={() => "$ " + (touchPos.value.y * -1).toFixed(2)}
+          text={() => "$ " + (touchPos.value.y * -1).toFixed(2)}
         />
         <Line
           p1={() => vec(touchPos.value.x, touchPos.value.y + 14)}

example/src/Examples/Matrix/Matrix.tsx

@@ -36,15 +36,17 @@ export const Matrix = () => {
   if (font === null) {
     return null;
   }
+  const symbols = font.getGlyphIDs("abcdefghijklmnopqrstuvwxyz");
   return (
     <Canvas style={{ flex: 1 }}>
       <Fill color="black" />
       <Paint>
-        <BlurMask sigma={10} style="solid" />
+        <BlurMask sigma={8} style="solid" />
       </Paint>
       {cols.map((_i, i) =>
         rows.map((_j, j) => (
           <Symbol
+            symbols={symbols}
             font={font}
             timestamp={timestamp}
             key={`${i}-${j}`}