模式中的签名板不起作用（墨水与鼠标偏移）

Question

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

<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)')

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

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

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

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

Answer 1

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

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

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

“3.画布上的宽度和高度属性指定要绘制的数据像素数（如图像中的实际像素），并且与画布的显示尺寸分开。”

他提供了这段 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 的线。

快乐编码！