Jquery - перетаскиваемый объект Свойство Containment для многоугольного родителя - PullRequest
Новая
       29

Jquery - перетаскиваемый объект Свойство Containment для многоугольного родителя

0 голосов
/ 07 марта 2019

Ссылка https://jqueryui.com/draggable/ Я могу реализовать функцию перетаскивания в родительском элементе (например, div). Однако мне нужно, чтобы эта перетаскиваемая функция работала внутри многоугольного элемента (как SVG-многоугольник). Я искал в сети, однако есть примеры того, как сделать перетаскиваемый многоугольник SVG, а не «как содержать функцию перетаскивания в пределах полигонального родителя (div).

Любые идеи / указатели будут полезны.

Спасибо.

1 Ответ

0 голосов
/ 08 марта 2019

Короткий рассказ: вам нужна функция, чтобы проверить, находится ли точка внутри многоугольника, а затем проверить, находятся ли четыре угла вашего перетаскиваемого объекта в этой форме.

Вот грубый пример того, как использовать перетаскиваемый образец из jQuery вместе с точкой в функции многоугольника из этого ответа . Этот пример далеко не совершенен, но я надеюсь, что он укажет вам правильное направление. 

// These are the points from the polygon
var polyPoints = [
  [200, 27],
  [364, 146],
  [301, 339],
  [98, 339],
  [35, 146]
];

$("#draggable").draggable({
  drag: function(e, ui) {
    var element = $("#draggable")[0];
    var rect = element.getBoundingClientRect();
    var rectPoints = rect2points(rect);
    
    let inside = true;
    rectPoints.forEach(p => {
      if(!pointInside(p, polyPoints)){
        inside = false;
      }
    });
    $("#draggable")[inside ? 'addClass' : 'removeClass']('inside').text(inside ? 'Yay!' : 'Boo!');
  }
});

function rect2points(rect) {
  return ([
    [rect.left, rect.top],
    [rect.right, rect.top],
    [rect.right, rect.bottom],
    [rect.left, rect.bottom]
  ]);
};

function pointInside(point, vs) {
  var x = point[0],
    y = point[1];

  var inside = false;
  for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
    var xi = vs[i][0],
      yi = vs[i][1];
    var xj = vs[j][0],
      yj = vs[j][1];

    var intersect = ((yi > y) != (yj > y)) &&
      (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }

  return inside;
};
#draggable {
  width: 100px;
  height: 80px;
  background: red;
  position: absolute;
  text-align: center;
  padding-top: 20px;
  color:#fff;
}
#draggable.inside{
  background: green;
}
html, body{
  margin: 0;
}
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div id="draggable">Drag me</div>
<svg width="400px" height="400px" viewBox="0 0 400 400">
  <rect width="600" height="600" fill="#efefef"></rect>
  <polygon points="200,27 364,146 301,339 98,339 35,146" fill="rgba(255,200,0, 1)" stroke="rgba(255,0,0,0.2" stroke-width="2"></polygon>
</svg>
...