Signature Pad签名插件

插件描述

Signature Pad 是一款用于绘制平滑签名的 JavaScript 库。 它基于 HTML5 画布，并使用基于 Square 发布的 Smoother Signatures 可变宽度贝塞尔曲线插值。 它适用于所有现代桌面和移动浏览器，并且不依赖于任何外部库。

使用方法

应用程序接口

var canvas = document.querySelector("canvas");
 
var signaturePad = new SignaturePad(canvas);
 
//将签名图像作为数据 URL 返回
signaturePad.toDataURL(); // 将图像另存为 PNG
signaturePad.toDataURL("image/jpeg"); //将图像另存为 JPEG
signaturePad.toDataURL("image/svg+xml"); //将图像另存为 SVG
 
//从数据 URL 中绘制签名图像。
//注意：此方法不会填充表示绘制签名的内部数据结构。 因此，使用#fromDataURL 后，#toData 将无法正常工作。
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
//以点组数组的形式返回签名图像
const data = signaturePad.toData();
 
//从一组点组中绘制签名图像
signaturePad.fromData(data);
 
//清除画布
signaturePad.clear();
 
//如果画布为空则返回真，否则返回假
signaturePad.isEmpty();
 
//解除所有事件处理程序的绑定
signaturePad.off();
 
//重新绑定所有事件处理程序
signaturePad.on();

选项

• dotSize（浮点数或函数）单个点的半径。
• minWidth （float）线的最小宽度。默认为 0.5。
• maxWidth （float）线的最大宽度。默认为 2.5。
• throttle（整数）每 x 毫秒最多绘制下一个点。将其设置为 0 以关闭节流。默认为 16。
• minDistance（整数）仅当前一个点远于 x 像素时才添加下一个点。默认为 5。
• backgroundColor（字符串）用于清除背景的颜色。可以是 context.fillStyle 接受的任何颜色格式。默认为“rgba(0,0,0,0)”（透明黑色）。使用不透明的颜色，例如“rgb(255,255,255)”（不透明白色）如果您想将签名保存为 JPEG 图像。
• penColor（字符串）用于绘制线条的颜色。可以是 context.fillStyle 接受的任何颜色格式。默认为“黑色”。
• velocityFilterWeight （float）用于根据先前速度修改新速度的权重。默认为 0.7。
• onBegin （功能）笔画开始时的回调。
• onEnd （function）行程结束时回调。

您可以在初始化期间设置选项：

var signaturePad = new SignaturePad(canvas, {
    minWidth: 5,
    maxWidth: 10,
    penColor: "rgb(66, 133, 244)"
});

或在运行时：

var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 5;
signaturePad.maxWidth = 10;
signaturePad.penColor = "rgb(66, 133, 244)";

技巧和窍门

处理高 DPI 屏幕

要在低 DPI 和高 DPI 屏幕上正确处理画布，必须考虑 devicePixelRatio 并相应地缩放画布。这种缩放对于正确显示通过 SignaturePad#fromDataURL 加载的签名也是必要的。

这是一个如何完成的示例：

function resizeCanvas() {
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
    signaturePad.clear(); // otherwise isEmpty() might return incorrect value
}
 
window.addEventListener("resize", resizeCanvas);
resizeCanvas();

以上关于Signature Pad签名插件的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。