react-signature-canvas 问题（偏移墨水）答案

【问题标题】：Problem with react-signature-canvas (offset ink)react-signature-canvas 问题（偏移墨水）
【发布时间】：2022-02-07 01:24:57
【问题描述】：

我在使用 react-signature-canvas 时遇到问题。我可以使用 Material UI Modal 让签名板正常工作。但是，我注意到墨水偏离了鼠标指针。我看到 another thread 遇到了同样的问题，但似乎用户没有使用 React....

这里是复制了胶印油墨问题的代码框的链接。我该如何解决？

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

【问题讨论】：

它对我来说很好。
嗨。是的，它正在工作......但是墨水从鼠标指针偏移了。当我用鼠标绘图时，墨水实际上出现在实际鼠标指针右下角的某个地方。墨水应该是鼠标指针指向的位置...您可以看到另一个演示，但没有偏移问题：codesandbox.io/s/react-signature-canvas-example-xevhz?file=/src/… 我不知道为什么我的代码会出现偏移问题...

标签： javascript reactjs create-react-app

【解决方案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>

【讨论】：

【解决方案2】：

我认为这可能是因为您使用的是 2 倍 dpi 的 Retina 显示器。在我的例子中，笔的墨水偏移在左上角是正确的，但是从笔移动的任何地方都会缩放 2 倍。因此，正方形中心的笔将在右下角有墨水。

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

【讨论】：

【解决方案3】：

我遇到了同样的问题并设法通过以下方式解决它：

将SignatureCanvas 组件包装在div 中并将这些CSS 样式分配给该包装器（宽度和高度是任意的，只是不要使用%）：

.signature-wrapper {
  position: relative;
  width: 400px;
  height: 200px;
}

并传递给SignatureCanvas 组件本身：

.signature {
  position: absolute;
  width: 100%;
  height: 100%;
}

不要在canvasProps 中指定宽度和高度。这样，无论屏幕大小或分辨率如何，您都没有偏移量。

【讨论】：