Question

我正在尝试在引导程序模式中使用signaturepad，在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％;

一切正常，但是“墨水”从鼠标指针偏移。第一次单击时，初始墨水出现在鼠标指针的右侧和下方。我将鼠标向下移动得越远，垂直偏移量与水平偏移量就越远（即，偏移量似乎呈线性比例）。我尝试在demo中实现调整大小功能，但是chrome将offsetWidth评估为0，而画布仅缩小为0x0。

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

Answer 1

我也遇到了同样的问题，在画布上增加100％的高度和宽度会导致签名在水平方向上向右偏移。

这是正在发生的事情： Screenshot of signature issue

在堆栈的其他位置找到了这个-make canvas as wide and as high as parent ... 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上的线。

祝您编程愉快！

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

1 个答案: