使用 Canvas 绘制笔锋线条

因业务需求, 基于大佬的库 https://github.com/linjc/smooth-signature 进行二次修改, 将 canvas 的逻辑剥离

Installtion

npm i smooth-line

Usage

import SmoothLine from "smooth-line";
import useMouseEvent from "use-mouse-event";

const canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 传入 canvas 节点, 将 canvas 绑定的摁下/移动/抬起事件分别与绘制逻辑对应即可
const instance = new SmoothLine({ canvas });

useMouseEvent({
  el: canvas,
  onStart: (e) => {
    instance.start({
      x: e.touches ? e.touches[0].clientX : e.offsetX,
      y: e.touches ? e.touches[0].clientY : e.offsetY,
      t: Date.now(),
    });
  },
  onMove: (e) => {
    instance.draw({
      x: e.touches ? e.touches[0].clientX : e.offsetX,
      y: e.touches ? e.touches[0].clientY : e.offsetY,
      t: Date.now(),
    });
  },
  onEnd: instance.end,
});

Props

| 参数名 | 说明 | 默认值 | | -------- | -------------------------------- | ------ | | el | canvas 节点 | - | | scale | 缩放比例 window.devicePixelRatio | - | | color | 线条颜色 | - | | minWidth | 线条最小宽度 | - | | maxWidth | 线条最大宽度 | - |

Demo

Live Demo

Vue2 Demo

Vue3 Demo

React Demo