У меня есть следующий код, который дает мне желаемый эффект.

#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*/
}
<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>

Я хочу знать, могу ли я написать функцию, которая будет делать то же самое, что принимает массив координат, чтобы мне не приходилось жестко кодировать ее каждый раз, когда я хочу переместить окно. Он сработает при нажатии closeButton.

2
tsubi-rin 13 Дек 2017 в 23:32

1 ответ

Лучший ответ

Вы, безусловно, можете вычислить строку многоугольника в JavaScript, а затем установить этот стиль для элемента. Вот пример функции, которая может принимать координаты в 2 пикселя для создания аналогичного многоугольника:

#overlay {
  background-color: rgba(0, 0, 0, 0.66);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<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>
1
Alexander O'Mara 13 Дек 2017 в 21:02