Question

我有以下作为我的代码，它给了我我想要的效果。

＆＃13;

#overlay {
  background-color: rgba(0, 0, 0, 0.66);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon( 0% 0%, /*exterior top left*/
  0% 100%, /*exterior bottom left*/
  220px 100%, /*overlapping point exterior 1*/
  220px 50%, /*overlapping point interior 1*/
  220px 310px, /*interior top left*/
  683px 310px, /*interior top right*/
  683px 450px, /*interior bottom right*/
  220px 450px, /*overlapping point interior 2*/
  220px 100%, /*overlapping point exterior 2*/
  100% 100%, /*exterior bottom right*/
  100% 0%);
  /*exterior top right*/
}

＆＃13;

<body>
  <div>Some background</div>
  <div id="overlay">

  </div>
  <div id="closeButton">
    <p>
      Close
    </p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    function main() {
      $("#overlay").hide();
      $("#overlay").fadeIn(500);

      $("#closeButton").on("click", function() {
        $("#overlay").toggle();
      });
    }
    $(document).ready(main);
  </script>
</body>

＆＃13;

我想知道我是否可以编写一个函数来执行与坐标数组相同的操作，这样我就不必在每次想要移动窗口时对其进行硬编码。它会在按下closeButton时触发。

Answer 1

您当然可以在JavaScript中计算多边形字符串，然后在元素上设置该样式。这是一个示例函数，可以使用2个像素坐标来创建类似的多边形：

＆＃13;

#overlay {
  background-color: rgba(0, 0, 0, 0.66);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<body>
  <div>Some background</div>
  <div id="overlay">

  </div>
  <div id="closeButton">
    <p>
      Close
    </p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>

    // Copy this function:
    function generatePoly(p1, p2) {
        var a = p1[0] + 'px';
        var b = p1[1] + 'px';
        var c = p2[0] + 'px';
        var d = p2[1] + 'px';
        return 'polygon(' + [
          '0% 0%',
          '0% 100%',
          a + ' 100%',
          a + ' 50%',
          a + ' ' + b,
          c + ' ' + b,
          c + ' ' + d,
          a + ' ' + d,
          a + ' 100%',
          '100% 100%',
          '100% 0%'
        ].join(', ') + ')';
    }

    function main() {

      // Run this when you want to set the polygon:
      $("#overlay").css('clip-path', generatePoly([40, 80], [120, 200]));

      $("#overlay").hide();
      $("#overlay").fadeIn(500);

      $("#closeButton").on("click", function() {
        $("#overlay").toggle();
      });
    }
    $(document).ready(main);
  </script>
</body>

＆＃13;

使用JavaScript和CSS clip-path属性绘制多边形

1 个答案: