javascript - 使用 SVG 图像边框制作交互式 Canvas

标签 javascript jquery html css

我在访问具有“不规则”边框设计的 div 中的元素时遇到问题。

我的要求是在 div 的顶部有一个有 2 个可点击元素的边框。 div 本身有一个 Canvas 可以绘制任何东西。

问题是,如果我需要使边框可见,那么我必须降低 div 的 z-index,这将不再允许在 Canvas 中绘图。如果我将 div 的 z-index 调高,那么边框元素就会被切断。

我试过 border-image,但它 (1) 使 Angular 变成方形,并且 (2) 它不会使 2 个元素可点击。所以,我有一个包含边框和 2 个可点击元素的 SVG。

(function() {
  const canvas = document.getElementById('signature-pad');

  function resizeCanvas() {
    const ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext('2d').scale(ratio, ratio);
  }

  window.onresize = resizeCanvas;
  resizeCanvas();

  const signaturePad = new SignaturePad(canvas, {
    backgroundColor: 'red' // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
  });

})();
.container {
  height: 500px;
  width: 409px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

img {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 1;
}

.container::before {
  display: block;
  content: " ";
  position: absolute;
  width: calc(100% - 3rem);
  height: calc(100% - 2rem);
  background-color: red;
  z-index: -1;
}

canvas {
  width: calc(100% - 3rem);
  height: calc(100% - 2rem);
  z-index: 1;
}
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

<div class="container">
  <img src="https://i.imgur.com/yWMwxJQ.png">
  <canvas id="signature-pad" class="signature-pad" height="500px;" width="409px;"></canvas>
</div>

JSFiddle

最佳答案

只需先设置您的 (更高的 z-index)及其 pointer-events CSS 规则为 none,这样,指针事件将通过它到达您的 Canvas :

(function() {
  const canvas = document.getElementById('signature-pad');

  function resizeCanvas() {
    const ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext('2d').scale(ratio, ratio);
  }

  window.onresize = resizeCanvas;
  resizeCanvas();

  const signaturePad = new SignaturePad(canvas, {
    backgroundColor: 'red' // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
  });

})();
.container {
  height: 500px;
  width: 409px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

img {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 1;
  /* disable all pointer-events so we can reach underneath layer */
  pointer-events: none;
}

.container::before {
  display: block;
  content: " ";
  position: absolute;
  width: calc(100% - 3rem);
  height: calc(100% - 2rem);
  background-color: red;
  z-index: -1;
}

canvas {
  width: calc(100% - 3rem);
  height: calc(100% - 2rem);
  z-index: 1;
}
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

<div class="container">
  <canvas id="signature-pad" class="signature-pad" height="500px;" width="409px;"></canvas>
  <!-- make <img> on top -->
  <img src="https://i.imgur.com/yWMwxJQ.png">
</div>

关于javascript - 使用 SVG 图像边框制作交互式 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57137827/

相关文章:

javascript - 如何确定javascript是否已被其他html文件加载

javascript - Knockout.js 似乎在破坏我的 jQuery 事件处理程序,多么粗鲁

html - 以 html 显示我的数据库

javascript - 动态加载的表不会 "overflow: scroll"

javascript - 单击链接时显示页面的隐藏内容

javascript - Jquery 中的 bindType 与 delegateType

javascript - onclick png背景颜色变化

jquery - 在jsp中循环通过div

jquery - ajax回调中的Url.RouteUrl并使用jquery添加参数

html - Css -webkit-backface-visibility 在旋转的 div 上显示白点