npm - @npm_lx/signature-pad-for-vue3 - Versions diffs - 0.0.1 - Mend

@npm_lx/signature-pad-for-vue3 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +124 -0
package/dist/signature-pad.css +1 -0
package/dist/signature-pad.js +597 -0
package/dist/signature-pad.umd.cjs +1 -0
package/dist/vite.svg +1 -0
package/package.json +25 -0

package/README.md ADDED Viewed

@@ -0,0 +1,124 @@
+# @lx/signature-pad-for-vue3
+一个基于[signature_pad](https://github.com/szimek/signature_pad)的签名板Vue3组件，支持自定义样式和多种导出格式，简单易用，可用于用户签名、合同签名等场景，可随时更换背景图片。
+## 安装
+```bash
+npm install @lx/signature-pad-for-vue3
+```
+## 组件预览
+```bash
+pnpm install
+pnpm run dev
+```
+## 基本使用
+```vue
+<template>
+  <div class="signature-container">
+    <SignaturePad
+      ref="signaturePadRef"
+      :penMinWidth="2"
+      :penMaxWidth="5"
+      :penColor="'#000000'"
+      :backgroundColor="'#F3F3F4'"
+      @beginStroke="handleBeginStroke"
+      @endStroke="handleEndStroke"
+    />
+    <div class="signature-actions">
+      <button @click="clearSignature">清除</button>
+      <button @click="saveSignature">保存</button>
+      <button @click="exportImage">导出图片</button>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import SignaturePad from '@lx/signature-pad-for-vue3'
+const signaturePadRef = ref(null)
+const handleBeginStroke = () => {
+  console.log('开始签名')
+}
+const handleEndStroke = () => {
+  console.log('结束签名')
+}
+const clearSignature = () => {
+  signaturePadRef.value.clear()
+}
+const saveSignature = () => {
+  const base64Data = signaturePadRef.value.getBase64Data()
+  if (base64Data) {
+    console.log('签名数据:', base64Data)
+    // 可以将base64Data发送到服务器保存
+  }
+}
+const exportImage = () => {
+  signaturePadRef.value.getImageFile()
+}
+</script>
+<style scoped>
+.signature-container {
+  width: 400px;
+  height: 300px;
+  border: 1px solid #ccc;
+  margin: 0 auto;
+}
+.signature-actions {
+  margin-top: 20px;
+  text-align: center;
+}
+button {
+  margin: 0 10px;
+  padding: 8px 16px;
+  cursor: pointer;
+}
+</style>
+```
+## 配置项
+| 参数名 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| penMinWidth | Number | 2 | 笔画的最小宽度 |
+| penMaxWidth | Number | 2 | 笔画的最大宽度 |
+| penColor | String | '#000000' | 笔画的颜色 |
+| backgroundColor | String | '#F3F3F4' | 画板的背景颜色 |
+| bgImageUrl | String | '' | 背景图片的URL（用于回显签名） |
+## 方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| --- | --- | --- | --- |
+| clear | isClearBg: Boolean (默认: false) | 无 | 清空画板，isClearBg为true时同时清除背景图片 |
+| getBase64Data | format: String (默认: 'png'), quality: Number (默认: 0.95) | String | 获取签名的Base64数据 |
+| getImageFile | format: String (默认: 'png'), quality: Number (默认: 0.95) | 无 | 导出签名为图片文件 |
+| setBgImage | url: String | 无 | 设置背景图片 |
+| isCanvasEmpty | 无 | Boolean | 检查画板是否为空 |
+## 事件
+| 事件名 | 说明 |
+| --- | --- |
+| beginStroke | 开始签名时触发 |
+| endStroke | 结束签名时触发 |
+## 注意事项
+1. 组件需要一个有固定宽高的容器来显示
+2. 使用ref来调用组件的方法
+3. 使用背景图片需要来源支持跨域设置
+4. 导出的图片格式支持png、jpg等常见格式

package/dist/signature-pad.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .signature-canvas-container[data-v-745eff61]{width:100%;height:100%;display:flex;flex-direction:column}

package/dist/signature-pad.js ADDED Viewed

@@ -0,0 +1,597 @@
+import { watch as k, ref as y, onMounted as O, nextTick as I, onUnmounted as A, createElementBlock as F, openBlock as R, createElementVNode as B } from "vue";
+var b = class {
+  x;
+  y;
+  pressure;
+  time;
+  constructor(d, t, e, i) {
+    if (isNaN(d) || isNaN(t))
+      throw new Error(`Point is invalid: (${d}, ${t})`);
+    this.x = +d, this.y = +t, this.pressure = e || 0, this.time = i || Date.now();
+  }
+  distanceTo(d) {
+    return Math.sqrt(
+      Math.pow(this.x - d.x, 2) + Math.pow(this.y - d.y, 2)
+    );
+  }
+  equals(d) {
+    return this.x === d.x && this.y === d.y && this.pressure === d.pressure && this.time === d.time;
+  }
+  velocityFrom(d) {
+    return this.time !== d.time ? this.distanceTo(d) / (this.time - d.time) : 0;
+  }
+}, $ = class W {
+  constructor(t, e, i, n, a, r) {
+    this.startPoint = t, this.control2 = e, this.control1 = i, this.endPoint = n, this.startWidth = a, this.endWidth = r;
+  }
+  static fromPoints(t, e) {
+    const i = this.calculateControlPoints(t[0], t[1], t[2]).c2, n = this.calculateControlPoints(t[1], t[2], t[3]).c1;
+    return new W(t[1], i, n, t[2], e.start, e.end);
+  }
+  static calculateControlPoints(t, e, i) {
+    const n = t.x - e.x, a = t.y - e.y, r = e.x - i.x, o = e.y - i.y, c = { x: (t.x + e.x) / 2, y: (t.y + e.y) / 2 }, h = { x: (e.x + i.x) / 2, y: (e.y + i.y) / 2 }, s = Math.sqrt(n * n + a * a), u = Math.sqrt(r * r + o * o), v = c.x - h.x, p = c.y - h.y, f = s + u == 0 ? 0 : u / (s + u), _ = { x: h.x + v * f, y: h.y + p * f }, x = e.x - _.x, P = e.y - _.y;
+    return {
+      c1: new b(c.x + x, c.y + P),
+      c2: new b(h.x + x, h.y + P)
+    };
+  }
+  // Returns approximated length. Code taken from https://www.lemoda.net/maths/bezier-length/index.html.
+  length() {
+    let e = 0, i, n;
+    for (let a = 0; a <= 10; a += 1) {
+      const r = a / 10, o = this.point(
+        r,
+        this.startPoint.x,
+        this.control1.x,
+        this.control2.x,
+        this.endPoint.x
+      ), c = this.point(
+        r,
+        this.startPoint.y,
+        this.control1.y,
+        this.control2.y,
+        this.endPoint.y
+      );
+      if (a > 0) {
+        const h = o - i, s = c - n;
+        e += Math.sqrt(h * h + s * s);
+      }
+      i = o, n = c;
+    }
+    return e;
+  }
+  // Calculate parametric value of x or y given t and the four point coordinates of a cubic bezier curve.
+  point(t, e, i, n, a) {
+    return e * (1 - t) * (1 - t) * (1 - t) + 3 * i * (1 - t) * (1 - t) * t + 3 * n * (1 - t) * t * t + a * t * t * t;
+  }
+}, N = class {
+  /* tslint:disable: variable-name */
+  _et;
+  /* tslint:enable: variable-name */
+  constructor() {
+    try {
+      this._et = new EventTarget();
+    } catch {
+      this._et = document;
+    }
+  }
+  addEventListener(d, t, e) {
+    this._et.addEventListener(d, t, e);
+  }
+  dispatchEvent(d) {
+    return this._et.dispatchEvent(d);
+  }
+  removeEventListener(d, t, e) {
+    this._et.removeEventListener(d, t, e);
+  }
+};
+function z(d, t = 250) {
+  let e = 0, i = null, n, a, r;
+  const o = () => {
+    e = Date.now(), i = null, n = d.apply(a, r), i || (a = null, r = []);
+  };
+  return function(...h) {
+    const s = Date.now(), u = t - (s - e);
+    return a = this, r = h, u <= 0 || u > t ? (i && (clearTimeout(i), i = null), e = s, n = d.apply(a, r), i || (a = null, r = [])) : i || (i = window.setTimeout(o, u)), n;
+  };
+}
+var G = class C extends N {
+  /* tslint:enable: variable-name */
+  constructor(t, e = {}) {
+    super(), this.canvas = t, this.velocityFilterWeight = e.velocityFilterWeight || 0.7, this.minWidth = e.minWidth || 0.5, this.maxWidth = e.maxWidth || 2.5, this.throttle = e.throttle ?? 16, this.minDistance = e.minDistance ?? 5, this.dotSize = e.dotSize || 0, this.penColor = e.penColor || "black", this.backgroundColor = e.backgroundColor || "rgba(0,0,0,0)", this.compositeOperation = e.compositeOperation || "source-over", this.canvasContextOptions = e.canvasContextOptions ?? {}, this._strokeMoveUpdate = this.throttle ? z(C.prototype._strokeUpdate, this.throttle) : C.prototype._strokeUpdate, this._handleMouseDown = this._handleMouseDown.bind(this), this._handleMouseMove = this._handleMouseMove.bind(this), this._handleMouseUp = this._handleMouseUp.bind(this), this._handleTouchStart = this._handleTouchStart.bind(this), this._handleTouchMove = this._handleTouchMove.bind(this), this._handleTouchEnd = this._handleTouchEnd.bind(this), this._handlePointerDown = this._handlePointerDown.bind(this), this._handlePointerMove = this._handlePointerMove.bind(this), this._handlePointerUp = this._handlePointerUp.bind(this), this._handlePointerCancel = this._handlePointerCancel.bind(this), this._handleTouchCancel = this._handleTouchCancel.bind(this), this._ctx = t.getContext(
+      "2d",
+      this.canvasContextOptions
+    ), this.clear(), this.on();
+  }
+  // Public stuff
+  dotSize;
+  minWidth;
+  maxWidth;
+  penColor;
+  minDistance;
+  velocityFilterWeight;
+  compositeOperation;
+  backgroundColor;
+  throttle;
+  canvasContextOptions;
+  // Private stuff
+  /* tslint:disable: variable-name */
+  _ctx;
+  _drawingStroke = !1;
+  _isEmpty = !0;
+  _dataUrl;
+  _dataUrlOptions;
+  _lastPoints = [];
+  // Stores up to 4 most recent points; used to generate a new curve
+  _data = [];
+  // Stores all points in groups (one group per line or dot)
+  _lastVelocity = 0;
+  _lastWidth = 0;
+  _strokeMoveUpdate;
+  _strokePointerId;
+  clear() {
+    const { _ctx: t, canvas: e } = this;
+    t.fillStyle = this.backgroundColor, t.clearRect(0, 0, e.width, e.height), t.fillRect(0, 0, e.width, e.height), this._data = [], this._reset(this._getPointGroupOptions()), this._isEmpty = !0, this._dataUrl = void 0, this._dataUrlOptions = void 0, this._strokePointerId = void 0;
+  }
+  redraw() {
+    const t = this._data, e = this._dataUrl, i = this._dataUrlOptions;
+    this.clear(), e && this.fromDataURL(e, i), this.fromData(t, { clear: !1 });
+  }
+  fromDataURL(t, e = {}) {
+    return new Promise((i, n) => {
+      const a = new Image(), r = e.ratio || window.devicePixelRatio || 1, o = e.width || this.canvas.width / r, c = e.height || this.canvas.height / r, h = e.xOffset || 0, s = e.yOffset || 0;
+      this._reset(this._getPointGroupOptions()), a.onload = () => {
+        this._ctx.drawImage(a, h, s, o, c), i();
+      }, a.onerror = (u) => {
+        n(u);
+      }, a.crossOrigin = "anonymous", a.src = t, this._isEmpty = !1, this._dataUrl = t, this._dataUrlOptions = { ...e };
+    });
+  }
+  toDataURL(t = "image/png", e) {
+    return t === "image/svg+xml" ? (typeof e != "object" && (e = void 0), `data:image/svg+xml;base64,${btoa(
+      this.toSVG(e)
+    )}`) : (typeof e != "number" && (e = void 0), this.canvas.toDataURL(t, e));
+  }
+  on() {
+    this.canvas.style.touchAction = "none", this.canvas.style.msTouchAction = "none", this.canvas.style.userSelect = "none", this.canvas.style.webkitUserSelect = "none";
+    const t = /Macintosh/.test(navigator.userAgent) && "ontouchstart" in document;
+    window.PointerEvent && !t ? this._handlePointerEvents() : (this._handleMouseEvents(), "ontouchstart" in window && this._handleTouchEvents());
+  }
+  off() {
+    this.canvas.style.touchAction = "auto", this.canvas.style.msTouchAction = "auto", this.canvas.style.userSelect = "auto", this.canvas.style.webkitUserSelect = "auto", this.canvas.removeEventListener("pointerdown", this._handlePointerDown), this.canvas.removeEventListener("mousedown", this._handleMouseDown), this.canvas.removeEventListener("touchstart", this._handleTouchStart), this._removeMoveUpEventListeners();
+  }
+  _getListenerFunctions() {
+    const t = window.document === this.canvas.ownerDocument ? window : this.canvas.ownerDocument.defaultView ?? this.canvas.ownerDocument;
+    return {
+      addEventListener: t.addEventListener.bind(
+        t
+      ),
+      removeEventListener: t.removeEventListener.bind(
+        t
+      )
+    };
+  }
+  _removeMoveUpEventListeners() {
+    const { removeEventListener: t } = this._getListenerFunctions();
+    t("pointermove", this._handlePointerMove), t("pointerup", this._handlePointerUp), t("pointercancel", this._handlePointerCancel), t("mousemove", this._handleMouseMove), t("mouseup", this._handleMouseUp), t("touchmove", this._handleTouchMove), t("touchend", this._handleTouchEnd), t("touchcancel", this._handleTouchCancel);
+  }
+  isEmpty() {
+    return this._isEmpty;
+  }
+  fromData(t, { clear: e = !0 } = {}) {
+    e && this.clear(), this._fromData(
+      t,
+      this._drawCurve.bind(this),
+      this._drawDot.bind(this)
+    ), this._data = this._data.concat(t);
+  }
+  toData() {
+    return this._data;
+  }
+  _isLeftButtonPressed(t, e) {
+    return e ? t.buttons === 1 : (t.buttons & 1) === 1;
+  }
+  _pointerEventToSignatureEvent(t) {
+    return {
+      event: t,
+      type: t.type,
+      x: t.clientX,
+      y: t.clientY,
+      pressure: "pressure" in t ? t.pressure : 0
+    };
+  }
+  _touchEventToSignatureEvent(t) {
+    const e = t.changedTouches[0];
+    return {
+      event: t,
+      type: t.type,
+      x: e.clientX,
+      y: e.clientY,
+      pressure: e.force
+    };
+  }
+  // Event handlers
+  _handleMouseDown(t) {
+    !this._isLeftButtonPressed(t, !0) || this._drawingStroke || this._strokeBegin(this._pointerEventToSignatureEvent(t));
+  }
+  _handleMouseMove(t) {
+    if (!this._isLeftButtonPressed(t, !0) || !this._drawingStroke) {
+      this._strokeEnd(this._pointerEventToSignatureEvent(t), !1);
+      return;
+    }
+    this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t));
+  }
+  _handleMouseUp(t) {
+    this._isLeftButtonPressed(t) || this._strokeEnd(this._pointerEventToSignatureEvent(t));
+  }
+  _handleTouchStart(t) {
+    t.targetTouches.length !== 1 || this._drawingStroke || (t.cancelable && t.preventDefault(), this._strokeBegin(this._touchEventToSignatureEvent(t)));
+  }
+  _handleTouchMove(t) {
+    if (t.targetTouches.length === 1) {
+      if (t.cancelable && t.preventDefault(), !this._drawingStroke) {
+        this._strokeEnd(this._touchEventToSignatureEvent(t), !1);
+        return;
+      }
+      this._strokeMoveUpdate(this._touchEventToSignatureEvent(t));
+    }
+  }
+  _handleTouchEnd(t) {
+    t.targetTouches.length === 0 && (t.cancelable && t.preventDefault(), this._strokeEnd(this._touchEventToSignatureEvent(t)));
+  }
+  _handlePointerCancel(t) {
+    this._allowPointerId(t) && (t.preventDefault(), this._strokeEnd(this._pointerEventToSignatureEvent(t), !1));
+  }
+  _handleTouchCancel(t) {
+    t.cancelable && t.preventDefault(), this._strokeEnd(this._touchEventToSignatureEvent(t), !1);
+  }
+  _getPointerId(t) {
+    return t.persistentDeviceId || t.pointerId;
+  }
+  _allowPointerId(t, e = !1) {
+    return typeof this._strokePointerId > "u" ? e : this._getPointerId(t) === this._strokePointerId;
+  }
+  _handlePointerDown(t) {
+    this._drawingStroke || !this._isLeftButtonPressed(t) || !this._allowPointerId(t, !0) || (this._strokePointerId = this._getPointerId(t), t.preventDefault(), this._strokeBegin(this._pointerEventToSignatureEvent(t)));
+  }
+  _handlePointerMove(t) {
+    if (this._allowPointerId(t)) {
+      if (!this._isLeftButtonPressed(t, !0) || !this._drawingStroke) {
+        this._strokeEnd(this._pointerEventToSignatureEvent(t), !1);
+        return;
+      }
+      t.preventDefault(), this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t));
+    }
+  }
+  _handlePointerUp(t) {
+    this._isLeftButtonPressed(t) || !this._allowPointerId(t) || (t.preventDefault(), this._strokeEnd(this._pointerEventToSignatureEvent(t)));
+  }
+  _getPointGroupOptions(t) {
+    return {
+      penColor: t && "penColor" in t ? t.penColor : this.penColor,
+      dotSize: t && "dotSize" in t ? t.dotSize : this.dotSize,
+      minWidth: t && "minWidth" in t ? t.minWidth : this.minWidth,
+      maxWidth: t && "maxWidth" in t ? t.maxWidth : this.maxWidth,
+      velocityFilterWeight: t && "velocityFilterWeight" in t ? t.velocityFilterWeight : this.velocityFilterWeight,
+      compositeOperation: t && "compositeOperation" in t ? t.compositeOperation : this.compositeOperation
+    };
+  }
+  // Private methods
+  _strokeBegin(t) {
+    if (!this.dispatchEvent(
+      new CustomEvent("beginStroke", { detail: t, cancelable: !0 })
+    ))
+      return;
+    const { addEventListener: i } = this._getListenerFunctions();
+    switch (t.event.type) {
+      case "mousedown":
+        i("mousemove", this._handleMouseMove, {
+          passive: !1
+        }), i("mouseup", this._handleMouseUp, { passive: !1 });
+        break;
+      case "touchstart":
+        i("touchmove", this._handleTouchMove, {
+          passive: !1
+        }), i("touchend", this._handleTouchEnd, { passive: !1 }), i("touchcancel", this._handleTouchCancel, { passive: !1 });
+        break;
+      case "pointerdown":
+        i("pointermove", this._handlePointerMove, {
+          passive: !1
+        }), i("pointerup", this._handlePointerUp, {
+          passive: !1
+        }), i("pointercancel", this._handlePointerCancel, {
+          passive: !1
+        });
+        break;
+    }
+    this._drawingStroke = !0;
+    const n = this._getPointGroupOptions(), a = {
+      ...n,
+      points: []
+    };
+    this._data.push(a), this._reset(n), this._strokeUpdate(t);
+  }
+  _strokeUpdate(t) {
+    if (!this._drawingStroke)
+      return;
+    if (this._data.length === 0) {
+      this._strokeBegin(t);
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("beforeUpdateStroke", { detail: t })
+    );
+    const e = this._createPoint(t.x, t.y, t.pressure), i = this._data[this._data.length - 1], n = i.points, a = n.length > 0 && n[n.length - 1], r = a ? e.distanceTo(a) <= this.minDistance : !1, o = this._getPointGroupOptions(i);
+    if (!a || !(a && r)) {
+      const c = this._addPoint(e, o);
+      a ? c && this._drawCurve(c, o) : this._drawDot(e, o), n.push({
+        time: e.time,
+        x: e.x,
+        y: e.y,
+        pressure: e.pressure
+      });
+    }
+    this.dispatchEvent(new CustomEvent("afterUpdateStroke", { detail: t }));
+  }
+  _strokeEnd(t, e = !0) {
+    this._removeMoveUpEventListeners(), this._drawingStroke && (e && this._strokeUpdate(t), this._drawingStroke = !1, this._strokePointerId = void 0, this.dispatchEvent(new CustomEvent("endStroke", { detail: t })));
+  }
+  _handlePointerEvents() {
+    this._drawingStroke = !1, this.canvas.addEventListener("pointerdown", this._handlePointerDown, {
+      passive: !1
+    });
+  }
+  _handleMouseEvents() {
+    this._drawingStroke = !1, this.canvas.addEventListener("mousedown", this._handleMouseDown, {
+      passive: !1
+    });
+  }
+  _handleTouchEvents() {
+    this.canvas.addEventListener("touchstart", this._handleTouchStart, {
+      passive: !1
+    });
+  }
+  // Called when a new line is started
+  _reset(t) {
+    this._lastPoints = [], this._lastVelocity = 0, this._lastWidth = (t.minWidth + t.maxWidth) / 2, this._ctx.fillStyle = t.penColor, this._ctx.globalCompositeOperation = t.compositeOperation;
+  }
+  _createPoint(t, e, i) {
+    const n = this.canvas.getBoundingClientRect();
+    return new b(
+      t - n.left,
+      e - n.top,
+      i,
+      (/* @__PURE__ */ new Date()).getTime()
+    );
+  }
+  // Add point to _lastPoints array and generate a new curve if there are enough points (i.e. 3)
+  _addPoint(t, e) {
+    const { _lastPoints: i } = this;
+    if (i.push(t), i.length > 2) {
+      i.length === 3 && i.unshift(i[0]);
+      const n = this._calculateCurveWidths(
+        i[1],
+        i[2],
+        e
+      ), a = $.fromPoints(i, n);
+      return i.shift(), a;
+    }
+    return null;
+  }
+  _calculateCurveWidths(t, e, i) {
+    const n = i.velocityFilterWeight * e.velocityFrom(t) + (1 - i.velocityFilterWeight) * this._lastVelocity, a = this._strokeWidth(n, i), r = {
+      end: a,
+      start: this._lastWidth
+    };
+    return this._lastVelocity = n, this._lastWidth = a, r;
+  }
+  _strokeWidth(t, e) {
+    return Math.max(e.maxWidth / (t + 1), e.minWidth);
+  }
+  _drawCurveSegment(t, e, i) {
+    const n = this._ctx;
+    n.moveTo(t, e), n.arc(t, e, i, 0, 2 * Math.PI, !1), this._isEmpty = !1;
+  }
+  _drawCurve(t, e) {
+    const i = this._ctx, n = t.endWidth - t.startWidth, a = Math.ceil(t.length()) * 2;
+    i.beginPath(), i.fillStyle = e.penColor;
+    for (let r = 0; r < a; r += 1) {
+      const o = r / a, c = o * o, h = c * o, s = 1 - o, u = s * s, v = u * s;
+      let p = v * t.startPoint.x;
+      p += 3 * u * o * t.control1.x, p += 3 * s * c * t.control2.x, p += h * t.endPoint.x;
+      let f = v * t.startPoint.y;
+      f += 3 * u * o * t.control1.y, f += 3 * s * c * t.control2.y, f += h * t.endPoint.y;
+      const _ = Math.min(
+        t.startWidth + h * n,
+        e.maxWidth
+      );
+      this._drawCurveSegment(p, f, _);
+    }
+    i.closePath(), i.fill();
+  }
+  _drawDot(t, e) {
+    const i = this._ctx, n = e.dotSize > 0 ? e.dotSize : (e.minWidth + e.maxWidth) / 2;
+    i.beginPath(), this._drawCurveSegment(t.x, t.y, n), i.closePath(), i.fillStyle = e.penColor, i.fill();
+  }
+  _fromData(t, e, i) {
+    for (const n of t) {
+      const { points: a } = n, r = this._getPointGroupOptions(n);
+      if (a.length > 1)
+        for (let o = 0; o < a.length; o += 1) {
+          const c = a[o], h = new b(
+            c.x,
+            c.y,
+            c.pressure,
+            c.time
+          );
+          o === 0 && this._reset(r);
+          const s = this._addPoint(h, r);
+          s && e(s, r);
+        }
+      else
+        this._reset(r), i(a[0], r);
+    }
+  }
+  toSVG({ includeBackgroundColor: t = !1, includeDataUrl: e = !1 } = {}) {
+    const i = this._data, n = Math.max(window.devicePixelRatio || 1, 1), a = 0, r = 0, o = this.canvas.width / n, c = this.canvas.height / n, h = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    if (h.setAttribute("xmlns", "http://www.w3.org/2000/svg"), h.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"), h.setAttribute("viewBox", `${a} ${r} ${o} ${c}`), h.setAttribute("width", o.toString()), h.setAttribute("height", c.toString()), t && this.backgroundColor) {
+      const s = document.createElement("rect");
+      s.setAttribute("width", "100%"), s.setAttribute("height", "100%"), s.setAttribute("fill", this.backgroundColor), h.appendChild(s);
+    }
+    if (e && this._dataUrl) {
+      const s = this._dataUrlOptions?.ratio || window.devicePixelRatio || 1, u = this._dataUrlOptions?.width || this.canvas.width / s, v = this._dataUrlOptions?.height || this.canvas.height / s, p = this._dataUrlOptions?.xOffset || 0, f = this._dataUrlOptions?.yOffset || 0, _ = document.createElement("image");
+      _.setAttribute("x", p.toString()), _.setAttribute("y", f.toString()), _.setAttribute("width", u.toString()), _.setAttribute("height", v.toString()), _.setAttribute("preserveAspectRatio", "none"), _.setAttribute("href", this._dataUrl), h.appendChild(_);
+    }
+    return this._fromData(
+      i,
+      (s, { penColor: u }) => {
+        const v = document.createElement("path");
+        if (!isNaN(s.control1.x) && !isNaN(s.control1.y) && !isNaN(s.control2.x) && !isNaN(s.control2.y)) {
+          const p = `M ${s.startPoint.x.toFixed(3)},${s.startPoint.y.toFixed(
+            3
+          )} C ${s.control1.x.toFixed(3)},${s.control1.y.toFixed(3)} ${s.control2.x.toFixed(3)},${s.control2.y.toFixed(3)} ${s.endPoint.x.toFixed(3)},${s.endPoint.y.toFixed(3)}`;
+          v.setAttribute("d", p), v.setAttribute("stroke-width", (s.endWidth * 2.25).toFixed(3)), v.setAttribute("stroke", u), v.setAttribute("fill", "none"), v.setAttribute("stroke-linecap", "round"), h.appendChild(v);
+        }
+      },
+      (s, { penColor: u, dotSize: v, minWidth: p, maxWidth: f }) => {
+        const _ = document.createElement("circle"), x = v > 0 ? v : (p + f) / 2;
+        _.setAttribute("r", x.toString()), _.setAttribute("cx", s.x.toString()), _.setAttribute("cy", s.y.toString()), _.setAttribute("fill", u), h.appendChild(_);
+      }
+    ), h.outerHTML;
+  }
+};
+const V = (d, t) => {
+  const e = d.__vccOpts || d;
+  for (const [i, n] of t)
+    e[i] = n;
+  return e;
+}, q = {
+  __name: "index",
+  props: {
+    // 笔画最小宽度
+    penMinWidth: {
+      type: Number,
+      default: 2
+    },
+    // 笔画最大宽度
+    penMaxWidth: {
+      type: Number,
+      default: 2
+    },
+    // 笔画颜色
+    penColor: {
+      type: String,
+      default: "#000000"
+    },
+    // 背景色
+    backgroundColor: {
+      type: String,
+      default: "#F3F3F4"
+    },
+    // 是否有背景图（用于回显）
+    bgImageUrl: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["beginStroke", "endStroke"],
+  setup(d, { expose: t, emit: e }) {
+    const i = e, n = d;
+    k(
+      () => n.bgImageUrl,
+      () => {
+        v();
+      }
+    ), k(
+      () => n.penColor,
+      () => {
+        o.value && (o.value.penColor = n.penColor);
+      }
+    ), k(
+      () => n.penMinWidth,
+      (l) => {
+        o.value && (o.value.minWidth = l);
+      }
+    ), k(
+      () => n.penMaxWidth,
+      (l) => {
+        o.value && (o.value.maxWidth = l);
+      }
+    );
+    const a = y(null), r = y(null), o = y(null), c = y(null), h = y(!0), s = y(null);
+    let u = window.devicePixelRatio || 1;
+    const v = () => {
+      if (n.bgImageUrl) {
+        const l = new Image();
+        l.crossOrigin = "anonymous", l.onload = () => {
+          c.value = l, o.value && (o.value.clear(), s.value && o.value.fromData(s.value));
+        }, l.src = n.bgImageUrl;
+      } else
+        c.value = null, o.value && (o.value.clear(), s.value && o.value.fromData(s.value));
+    }, p = () => {
+      if (!r.value || !a.value) return;
+      const l = r.value, m = a.value, g = m.clientWidth, S = m.clientHeight;
+      l.width = g * u, l.height = S * u, l.style.width = `${g}px`, l.style.height = `${S}px`;
+      const E = l.getContext("2d");
+      E.scale(u, u);
+      const w = new G(l, {
+        minWidth: n.penMinWidth,
+        maxWidth: n.penMaxWidth,
+        penColor: n.penColor,
+        backgroundColor: n.backgroundColor
+      });
+      f(w), _(w);
+      const D = w.clear;
+      w.clear = (L) => {
+        D.call(w), E.clearRect(0, 0, l.width, l.height), c.value && !L ? E.drawImage(c.value, 0, 0, g, S) : (E.fillStyle = n.backgroundColor, E.fillRect(0, 0, g, S));
+      }, o.value = w, w.clear(), s.value && w.fromData(s.value);
+    }, f = (l) => {
+      l.removeEventListener("beginStroke"), l.removeEventListener("endStroke");
+    }, _ = (l) => {
+      l.addEventListener("beginStroke", () => {
+        i("beginStroke");
+      }), l.addEventListener("endStroke", () => {
+        i("endStroke");
+      });
+    }, x = (l = !1) => {
+      o.value?.clear(l), s.value = null, h.value = !0;
+    }, P = (l = "png", m = 0.95) => o.value && !o.value.isEmpty() ? o.value.toDataURL(`image/${l}`, m) : null, T = (l = "png", m = 0.95) => {
+      const g = document.createElement("a");
+      g.href = o.value.toDataURL(`image/${l}`, m), g.download = `signature.${l}`, g.click();
+    }, U = (l) => {
+      const m = new Image();
+      m.crossOrigin = "anonymous", m.onload = () => {
+        c.value = m, o.value && (o.value.clear(), s.value && o.value.fromData(s.value));
+      }, m.src = l;
+    }, M = () => {
+      u = window.devicePixelRatio || 1, o.value && (s.value = o.value.toData()), p();
+    };
+    return O(() => {
+      I(() => {
+        p(), v(), window.addEventListener("resize", M);
+      });
+    }), A(() => {
+      window.removeEventListener("resize", M);
+    }), t({
+      clear: x,
+      getBase64Data: P,
+      getImageFile: T,
+      setBgImage: U,
+      isCanvasEmpty: () => (h.value = o.value.isEmpty(), h.value),
+      signaturePadRef: o
+    }), (l, m) => (R(), F("div", {
+      class: "signature-canvas-container",
+      ref_key: "containerRef",
+      ref: a
+    }, [
+      B("canvas", {
+        ref_key: "canvasRef",
+        ref: r,
+        class: "signature-canvas-pad"
+      }, null, 512)
+    ], 512));
+  }
+}, j = /* @__PURE__ */ V(q, [["__scopeId", "data-v-745eff61"]]);
+export {
+  j as default
+};

package/dist/signature-pad.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/dist/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "name": "@npm_lx/signature-pad-for-vue3",
+  "version": "0.0.1",
+  "type": "module",
+  "private": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "signature_pad": "^5.1.3"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/signature-pad.js",
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "^7.2.4"
+  }
+}