css - 如何为 vue 签名创建掩码/过滤器？

Question

目前，这是我正在使用的电子签名板，它正在工作。https://registry.npmjs.org/vue-signature/-/vue-signature-2.5.1

问题是如果用户签名的签名离边界太近，签名将不会被捕获。

下面是失败的电子签名。

如何添加蒙版/过滤器以在边框之间添加一些间距？

这样即使用户在边框附近签名，输出仍然会有边框周围的间距。

这是 pug 中的当前代码：

.esign--pad-control: .esign--pad-container
  .esign--pad
    vuesignature(
      id="signaturePad",
      ref='eSign', 
      :sigOption='{ penColor:"rgb(0, 0, 0)", backgroundColor:"rgb(255,255,255)" }'
    )

和风格：

.esign--pad-control {
  position: relative;
  max-width: 450px;
}

.esign--pad-container {
  overflow: auto;
}

.esign--pad {
  width: 450px;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  border: 4px dashed #d5d5d5;

  @include MQ(XSM) {
    border: 4px dashed #ccc;
    margin-bottom: 10px;
  }    
}

这是从包中生成的 html。我从检查中得到它。

<div id="signaturePad" style="width: 100%; height: 100%;"><canvas id="canvas894" data-uid="canvas894" class="canvas" width="442" style="touch-action: none;" height="192"></canvas></div>
<canvas id="canvas894" data-uid="canvas894" class="canvas" width="442" style="touch-action: none;" height="192"></canvas>
</div>

我可以使用before或after伪元素来做到这一点吗？

我尝试使用此代码在画布之前添加图像。

.esign--pad-control: .esign--pad-container
  .esign--pad
    .esign--pad--inner            
      img(src="../../../assets/images/signature.png",class="sign-bg")        
      vuesignature(
        id="signaturePad",
        ref='eSign', 
        :sigOption='{ penColor:"rgb(0, 0, 0)", backgroundColor:"rgb(255,255,255)"}'
      )

和风格：

.esign--pad--inner { 
  position: relative;
  width: 400px;
  height: 200px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sign-bg {
  position: absolute;
  left: 0;
  top: 0;
}

现在，它在用户界面上看起来不错，但它不可签名，因为图像位于签名板的“顶部”。有什么解决办法吗？

标签： cssvue.js