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

用SVG图像边框制作div

  •  0
  • 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 年前
        1
  •  1
  •   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>
        2
  •  1
  •   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>