javascript - 模态中的签名板不起作用(墨水从鼠标偏移)

Question

我正在尝试使用 signaturepad在引导模式中，我在 div 中有一个 Canvas :

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

在初始化时，我会( CoffeeScript ):

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

我的 Canvas css 是(因为我希望 Canvas 填充 div)

宽度:100%；
高度:100%；

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

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

Answer 1

我遇到了同样的问题，向 Canvas 添加 100% 的高度和宽度导致签名出现水平向右偏移。
这就是发生的事情:
Screenshot of signature issue
在堆栈的其他地方找到这个 - make canvas as wide and as high as parent ... Phrogz 的答案是关键。
“3. Canvas 上的 width 和 height 属性指定要绘制到的数据像素数(就像图像中的实际像素一样)，并且与 Canvas 的显示大小分开。”
他提供了这段 jQuery 代码，以使 Canvas 与其父级一样宽和高:

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 的线。
快乐编码!