react-signature-canvas (胶印油墨)问题

Question

我在使用react-signature-canvas时遇到了问题。我能够使用Material UI Modal获得签名簿的工作。但是，我注意到墨水偏离了鼠标指针。我发现another thread也有和我一样的问题，但是用户似乎没有使用React……

这是复制了胶印油墨问题的codesandbox的链接。我该如何修复它？

https://codesandbox.io/s/signature-pad-demo-lsqyu?file=/demo.js

Answer 1

这是因为内部的<canvas>元素具有默认的宽度和高度，但父元素对其进行了拉伸。这对我很有效：

const styles = () => ({
  container: css`
    margin: 0 auto;
    height: 300px;
  `,
  sign: css`
    width: 100%;
    height: 100%;
  `
});

<div className={styles.container}>
  <SignatureCanvas
      canvasProps={{
        className: styles.sign
      }}
  />
</div>

Answer 2

我想这可能是因为你在Retina显示屏上的dpi是2倍。在我的例子中，画笔的墨水偏移量在左上角是正确的，但从画笔移动的位置开始缩放2倍。因此，位于正方形中心的钢笔将在右下角具有墨水。

解决此问题的一种方法是将画布设置为固定大小，但这并不理想。