图片

图片会在画布上渲染先前记录的绘制操作列表。图片是不可变的，一旦创建就无法编辑或更改。它可以在任何画布上多次使用。

名称	类型	描述
picture	SkPicture	要渲染的图片

你好，世界

tsx
import React, { useMemo } from "react";
import {
  createPicture,
  Canvas,
  Picture,
  Skia,
  Group,
  BlendMode
} from "@shopify/react-native-skia";
 
export const HelloWorld = () => {
  // Create a picture
  const picture = useMemo(() => 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 }}>
      <Picture picture={picture} />
    </Canvas>
  );
};

tsx
import React, { useMemo } from "react";
import {
  createPicture,
  Canvas,
  Picture,
  Skia,
  Group,
  BlendMode
} from "@shopify/react-native-skia";
 
export const HelloWorld = () => {
  // Create a picture
  const picture = useMemo(() => 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 }}>
      <Picture picture={picture} />
    </Canvas>
  );
};

应用效果

Picture 组件不遵循与其他组件相同的绘制规则。但是，您可以使用 layer 属性应用效果。例如，在下面的示例中，我们应用了一个模糊图像滤镜。

tsx
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>
  );
};

tsx
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>
  );
};

序列化

您可以将图片序列化为字节数组。序列化的图片仅与创建时使用的 Skia 版本兼容。您可以将序列化的图片与 Skia 调试器一起使用。

tsx
import React, { useMemo } from "react";
import {
  createPicture,
  Canvas,
  Picture,
  Skia,
  Group,
} from "@shopify/react-native-skia";
 
export const PictureExample = () => {
  // Create picture
  const picture = useMemo(() => createPicture(
    (canvas) => {
      const paint = Skia.Paint();
      paint.setColor(Skia.Color("pink"));
      canvas.drawRect({ x: 0, y: 0, width: 100, height: 100 }, paint);
 
      const circlePaint = Skia.Paint();
      circlePaint.setColor(Skia.Color("orange"));
      canvas.drawCircle(50, 50, 50, circlePaint);
    },
    { width: 100, height: 100 },
  ), []);
 
  // Serialize the picture
  const serialized = useMemo(() => picture.serialize(), [picture]);
 
  // Create a copy from serialized data
  const copyOfPicture = useMemo(
    () => (serialized ? Skia.Picture.MakePicture(serialized) : null),
    [serialized]
  );
 
  return (
    <Canvas style={{ flex: 1 }}>
      <Picture picture={picture} />
      <Group transform={[{ translateX: 200 }]}>
        {copyOfPicture && <Picture picture={copyOfPicture} />}
      </Group>
    </Canvas>
  );
};

tsx
import React, { useMemo } from "react";
import {
  createPicture,
  Canvas,
  Picture,
  Skia,
  Group,
} from "@shopify/react-native-skia";
 
export const PictureExample = () => {
  // Create picture
  const picture = useMemo(() => createPicture(
    (canvas) => {
      const paint = Skia.Paint();
      paint.setColor(Skia.Color("pink"));
      canvas.drawRect({ x: 0, y: 0, width: 100, height: 100 }, paint);
 
      const circlePaint = Skia.Paint();
      circlePaint.setColor(Skia.Color("orange"));
      canvas.drawCircle(50, 50, 50, circlePaint);
    },
    { width: 100, height: 100 },
  ), []);
 
  // Serialize the picture
  const serialized = useMemo(() => picture.serialize(), [picture]);
 
  // Create a copy from serialized data
  const copyOfPicture = useMemo(
    () => (serialized ? Skia.Picture.MakePicture(serialized) : null),
    [serialized]
  );
 
  return (
    <Canvas style={{ flex: 1 }}>
      <Picture picture={picture} />
      <Group transform={[{ translateX: 200 }]}>
        {copyOfPicture && <Picture picture={copyOfPicture} />}
      </Group>
    </Canvas>
  );
};

实例方法

名称	描述
makeShader	返回一个新的着色器，它将使用此图片进行绘制。
serialize	返回一个 UInt8Array，表示存储在图像中的绘制操作。