文本路径

沿着路径绘制文本。

名称	类型	描述
path	`Path` 或 `string`	要绘制的路径。可以使用 SVG 路径表示法的字符串，或者使用 `Skia.Path.Make()` 创建的对象
text	`string`	要绘制的文本
font	`SkFont`	要使用的字体

示例

tsx
import {Canvas, Group, TextPath, Skia, useFont, vec, Fill} from "@shopify/react-native-skia";
 
const size = 128;
const path = Skia.Path.Make();
path.addCircle(size, size, size/2);
 
export const HelloWorld = () => {
  const font = useFont(require("./my-font.ttf"), 24);
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Group transform={[{ rotate: Math.PI }]} origin={vec(size, size)}>
        <TextPath font={font} path={path} text="Hello World!" />
      </Group>
    </Canvas>
  );
};

tsx
import {Canvas, Group, TextPath, Skia, useFont, vec, Fill} from "@shopify/react-native-skia";
 
const size = 128;
const path = Skia.Path.Make();
path.addCircle(size, size, size/2);
 
export const HelloWorld = () => {
  const font = useFont(require("./my-font.ttf"), 24);
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Group transform={[{ rotate: Math.PI }]} origin={vec(size, size)}>
        <TextPath font={font} path={path} text="Hello World!" />
      </Group>
    </Canvas>
  );
};

示例​

示例