添加自定义形状的波浪图

2023-12-27 17:32:22

虽然内置了若干形状，但使用者的需求是变幻无穷的。因此我们也开放了自定义 shape 的方式：只需要传入一个构建 Path 的回调函数即可，方便开发者可以按照自己的诉求来定制水波图，下面是一些自定义形状的水波图。本篇文章会先简单介绍下这个自定义 shape 的 API 使用方式，然后给出一些自定义形状的例子，供大家参考。

API 介绍

自定义 shape 的 API 使用方法非常简单，只需要传入一个构建 Path 的回调函数即可，这个回调函数会接收一个参数 ctx，这个 ctx 对象提供了许多 Path API，可以让我们非常方便的构建各种各样的图形。

shape: (ctx: CanvasRenderingContext2D) => Path2D;

示例

星星形状的水波图

import { Wave } from 'water-wave';
import { useEffect, useRef } from 'react';

const Star = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const wave = new Wave({
      canvas,
      ctx,
      width: canvas.width,
      height: canvas.height,
      shape: (ctx) => {
        const path = new Path2D();
        path.moveTo(150, 0);
        path.lineTo(225, 100);
        path.lineTo(300, 0);
        path.lineTo(375, 100);
        path.lineTo(450, 0);
        path.lineTo(300, 150);
        path.lineTo(150, 0);
        return path;
      },
    });

    wave.start();

    return () => {
      wave.stop();
    };
  }, []);

  return <canvas ref={canvasRef} />;
};

export default Star;

心形形状的水波图

import { Wave } from 'water-wave';
import { useEffect, useRef } from 'react';

const Heart = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const wave = new Wave({
      canvas,
      ctx,
      width: canvas.width,
      height: canvas.height,
      shape: (ctx) => {
        const path = new Path2D();
        path.moveTo(250, 100);
        path.quadraticCurveTo(300, 50, 350, 100);
        path.quadraticCurveTo(400, 150, 350, 200);
        path.quadraticCurveTo(300, 250, 250, 200);
        path.quadraticCurveTo(200, 150, 250, 100);
        return path;
      },
    });

    wave.start();

    return () => {
      wave.stop();
    };
  }, []);

  return <canvas ref={canvasRef} />;
};

export default Heart;

云朵形状的水波图

import { Wave } from 'water-wave';
import { useEffect, useRef } from 'react';

const Cloud = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const wave = new Wave({
      canvas,
      ctx,
      width: canvas.width,
      height: canvas.height,
      shape: (ctx) => {
        const path = new Path2D();
        path.moveTo(150, 100);
        path.quadraticCurveTo(200, 50, 250, 100);
        path.quadraticCurveTo(300, 150, 250, 200);
        path.quadraticCurveTo(200, 250, 150, 200);
        path.quadraticCurveTo(100, 150, 150, 100);
        return path;
      },
    });

    wave.start();

    return () => {
      wave.stop();
    };
  }, []);

  return <canvas ref={canvasRef} />;
};

export default Cloud;