handwrite-js v0.0.5

handwrite-js

一个js手写库，支持Web端、H5端，并提供基础API控制。

功能

• ✅ 同时支持web端、h5端。
• ✅ 支持流行前端框架，例如：react、vue等。
• ✅ 支持修改画笔颜色、粗细。
• ✅ 支持修改画布背景。
• ✅ 支持导入、导出签名。

基本使用

In Html.

<script src="https://unpkg.com/handwrite-js/umd/index.js"></script>
<div style="display: inline-block; border: 1px solid #ccc">
    <div id="dom" style="width: 300px; height: 500px"></div>
</div>
<script>
    const { HandWrite } = window.handWriteSdk;
    const handWrite = new HandWrite({
        dom: document.getElementById("dom"),
    });
    // handWrite.unmount(); // 卸载
</script>

In React.

import { HandWrite } from 'handWrite-js'
import { useRef } from "react";

function Page() {
  const handWriteRef = useRef<HandWrite>();
  const domRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    handWriteRef.current = new HandWrite({
      dom: domRef.current
    });
    return () => {
      handWriteRef.current?.unmount?.();
      handWriteRef.current = undefined;
    }
  }, []);

  return (
    <div style="display: inline-block; border: 1px solid #ccc">
      <div ref="domRef" style="width: 300px; height: 500px"/>
    </div>
  )
}

In Vue.

<script setup>
  import { ref, onMounted, onUnmounted } from "vue";
  import { HandWrite } from "handWrite-js";

  const domRef = ref();
  let handWrite = new HandWrite();

  onMounted(() => {
    handWrite.mount?.(domRef.value);
  });

  onUnmounted(() => {
    handWrite?.unmount?.();
    handWrite = undefined;
  });
</script>

<template>
  <div style="display: inline-block; border: 1px solid #ccc">
    <div ref="domRef" style="width: 300px; height: 500px" />
  </div>
</template>

本地调试

# node16、pnpm@7.30.5
pnpm i

pnpm dev

API

基础 api：

扩展 api：