4

我正在尝试在引导模式中使用签名板，我在 div 中有一个画布：

<div class="modal-body">
    <div class='signature-container' >
        <canvas id="signature"></canvas>
        </canvas>
</div>

在初始化时，我会（咖啡脚本）：

canvas = $("canvas#signature")[0]
  signature_pad = new SignaturePad(canvas, backgroundColor: 'rgb(255, 255, 255)')

我的画布 css 是（因为我希望画布填充 div）

宽度：100%；高度：100%；

一切正常，但“墨水”从鼠标指针偏移。当我第一次单击时，初始墨水出现在鼠标指针的右侧和下方。我将鼠标向下移动得越远，垂直偏移越远，与水平相同（即，偏移看起来是线性缩放的）。我尝试在演示中实现调整大小功能，但 chrome 将 offsetWidth 评估为 0，并且画布只是缩小到 0x0。

有人知道我做错了什么吗？

4

1 回答 1

2

我遇到了同样的问题，向画布添加 100% 的高度和宽度导致签名出现水平向右偏移。

这就是发生的事情： 签名问题的屏幕截图

在堆栈的其他地方找到了这个 -使画布与父级一样宽和高...... Phrogz 的答案是关键。

“3. Canvas 上的 width 和 height 属性指定要绘制到的数据像素数（就像图像中的实际像素一样），并且与画布的显示大小分开。”

他提供了这段 jQuery 代码，以使画布与其父级一样宽和高：

var canvas = document.querySelector('canvas');
fitToContainer(canvas);

function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

当您清除它时，我还想删除出现在 sigpad 上的行......为此，我将这些选项添加到 jquery：

signaturePad = $('.sigPad').signaturePad({
            drawOnly: true,
            bgColour: '#FFF',
            defaultAction: 'drawIt',
            penColour: '#2c3e50',
            lineWidth: 0,    
        });

最后一行 (lineWidth) 控制跨 sigpad 的线。

快乐编码！

于 2020-07-21T20:29:47.680 回答