roughjs手绘库

基础使用

roughjs 手绘支持两种渲染方式，canvas和svg。

canvas

import rough from 'roughjs';
import { useRef } from 'react';
import { useMount } from 'ahooks';

export default function Demo() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useMount(() => {
    if (canvasRef.current) {
      const rc = rough.canvas(canvasRef.current);
      // x, y, r半径, {fill:填充色， fillWeight：填充力度}
      rc.circle(50, 50, 100, { fill: 'blue', fillWeight: 2 }); 
    }
  });

  return (
    <div className="wrapp">
      <canvas ref={canvasRef}></canvas>
    </div>
  );
}

svg

import rough from 'roughjs';
import { useRef } from 'react';
import { useMount } from 'ahooks';

export default function Demo() {
  const svgRef = useRef<SVGSVGElement>(null);

  useMount(() => {
    if (svgRef.current) {
      const rc = rough.svg(svgRef.current);
      let node = rc.rectangle(10, 10, 100, 100); // x, y, width, height
      svgRef.current.appendChild(node);
    }
  });

  return (
    <div className="wrapp">
      <svg ref={svgRef} width="300" height="450" ></svg>
    </div>
  );
}