无法在 SignaturePad 上绘制任何内容

问题描述

我在我的应用中使用 https://github.com/szimek/signature_pad 作为签名。我安装了它并使用它签名板正在屏幕上占据区域，但我无法在其上绘制任何内容。我正在将它与 vue js ionic 用于移动应用

这就是我正在尝试的方式

   <div >
     <canvas id="signature-pad" class="signature-pad" width="640" height="480"></canvas>
    </div>

脚本

import SignaturePad from 'signature_pad'
async mounted() {
 
    var canvas = document.querySelector("canvas");

     var signaturePad =await new SignaturePad(canvas,{
    minWidth: 5,maxWidth: 10,penColor: "rgb(66,133,244)"
});
     signaturePad.toDataURL();
     signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.toDataURL("image/svg+xml"); // save image as SVG

// Draws signature image from data URL.
// NOTE: This method does not populate internal data structure that represents drawn signature. Thus,after using #fromDataURL,#toData won't work properly.
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

// Returns signature image as an array of point groups
const data = signaturePad.toData();

// Draws signature image from an array of point groups
signaturePad.fromData(data);

// Clears the canvas
signaturePad.clear();

// Returns true if canvas is empty,otherwise returns false
signaturePad.isEmpty();

// Unbinds all event handlers
signaturePad.off();

// Rebinds all event handlers
signaturePad.on();
     console.log(signaturePad)
  },

在控制台我得到这个

backgroundColor: "rgba(0,0)"
canvas: canvas#signature-pad.signature-pad
dotSize: ƒ dotSize()
maxWidth: 10
mindistance: 5
minWidth: 5
onBegin: undefined
onEnd: undefined
options: {minWidth: 5,244)"}
penColor: "rgb(66,244)"
throttle: 16
veLocityFilterWeight: 0.7
_ctx: CanvasRenderingContext2D {canvas: canvas#signature-pad.signature-pad,globalAlpha: 1,globalCompositeOperation: "source-over",filter: "none",imageSmoothingEnabled: true,…}
_data: []
_handleMouseDown: (event) => {…}
arguments: [Exception: TypeError: 'caller','callee',and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.r (<anonymous>:1:83)]
caller: (...)
length: 1
name: ""
__proto__: ƒ ()
[[FunctionLocation]]: signature_pad.js?90e2:129
[[Scopes]]: Scopes[4]
_handleMouseMove: (event) => {…}
_handleMouseUp: (event) => {…}
_handletouchEnd: (event) => {…}
arguments: (...)
caller: [Exception: TypeError: 'caller',and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.r (<anonymous>:1:83)]
length: 1
name: ""
__proto__: ƒ ()
[[FunctionLocation]]: signature_pad.js?90e2:158
[[Scopes]]: Scopes[4]
_handletouchMove: (event) => {…}
_handletouchStart: (event) => {…}
_isEmpty: true
_lastPoints: []
_lastVeLocity: 0
_lastWidth: 7.5
_mouseButtonDown: false

是不是因为这个插件没有更多的维护

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）