代码之家 › 专栏 › 技术社区 › Nidhin Joseph

用SVG图像边框制作div

css html jquery javascript

Nidhin Joseph · 技术社区 · 5 年前

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

问题是,如果我需要使边框可见,那么我必须降低div的z索引,这将不再允许在画布中绘制。如果我把div的z索引设得更高,那么border元素就会被截断。

我试过边界图像,但它(1)它使角成为正方形,(2)它不能使这两个项目点击。因此,我有一个SVG,它包含边框和2个可单击的元素。

(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

1 回复 | 直到 5 年前

Kaiido NickSlash 5 年前

只需首先设置<img>并设置其 pointer-events CSS规则到 none ,这样,指针事件将穿过它并到达画布:

(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>

Cue 5 年前

::before 你可以在里面创建一个块 .container 具有 z-index: -1

应用 background-image (或前景使用 <img> ,我选择了背景)到 .item .

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

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

.item {
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="item" style="background-image:url('https://i.imgur.com/yWMwxJQ.png')">
    <div><button onclick="alert(1)">Hello</button></div>
  </div>
</div>