Как проверить, находится ли точка внутри замкнутого пути SVG

Question

Я пытаюсь собрать интерфейс перетаскивания, который позволяет пользователю перетаскивать div на странице, которая ограничена внутренней частью нерегулярного закрытого пути SVG.

Вот пример - оранжевый квадрат - это мой перетаскиваемый элемент, а серый SVG-путь - это то, к чему я хочу привязать его при выпадении:

<div class="drag-parent">

  <svg xmlns="http://www.w3.org/2000/svg" width="141.019" height="74.065" viewBox="0 0 141.019 74.065">
      <defs>
        <style>
          .target {
            fill: #333;
          }
        </style>
      </defs>
      <path id="Path_4569" data-name="Path 4569" class="target" d="M0,0H141.018V74.065h-24.27V37.033H10.88V12.971H0Z"/>
    </svg>


      <div class="draggable" style="width:20px;height:20px;background:orange;cursor:pointer;"></div>  
      </div>

То, что я хотел бы сделать, это проверить перетаскиваемый элемент div при его перетаскивании, чтобы убедиться, что он полностью находится внутри замкнутого пути моего SVG.

Я использую GSAP Draggable, чтобы позаботиться о перетаскивании элемента, но я озадачен тем, как проверить, находится ли он внутри этого пути или нет.

До сих пор я пытался isPointInFill, однако, похоже, что в chrome nomatter это возвращает true, что я и даю.

Я также пытался использовать mouseenter / mouseleave события на пути, который является отличной отправной точкой; но когда вы перетаскиваете что-то, эти события не запускаются, поскольку указатель мыши находится «поверх» перетаскиваемого элемента, а не пути SVG.

Что может быть хорошим способом наложения границ пути SVG - или есть более простой способ наложения нерегулярных границ на перетаскиваемых объектах?

Answer 1

Основная идея состоит в том, чтобы проверить, все ли 4 угла оранжевого div находятся на пути. Может быть, я упростил вещи, поскольку drag_parent имеет `margin 0; утеплитель: 0; ``

Я надеюсь, что это то, что вы спрашивали.

let D = false,// if D ids true you can drag
m = {},// the mouse position
thePath = document.querySelector("#Path_4569"),
draggable = document.querySelector("#draggable");

draggable.w = draggable.getBoundingClientRect().width;
draggable.h = draggable.getBoundingClientRect().height;

draggable.p0s = [[], [], [], []];//one array for every corner

draggable.delta = {};// distance between the click point and the left upper corner

draggable.addEventListener("mousedown", e => {
  D = true;
  draggable.delta = oMousePos(draggable, e);
});

drag_parent.addEventListener("mousemove", e => {
  if (D == true) {
    let counter = 0;// how many corners are in path
    m = oMousePos(drag_parent, e);
    draggablePoints(m);
    draggable.style.left = draggable.p0s[0][0] + 1 + "px";
    draggable.style.top = draggable.p0s[0][1] + 1 + "px";
    draggable.p0s.map(p => {
      if (document.elementFromPoint(p[0], p[1]) && document.elementFromPoint(p[0], p[1]).id == "Path_4569") {
        counter++;
      }
    });
  
    if (counter == 4) {// if all 4 corners are in path
      thePath.setAttributeNS(null, "fill", "#777");
    } else {
      thePath.setAttributeNS(null, "fill", "black");
    }
  }
});

drag_parent.addEventListener("mouseup", e => {
  D = false;
});

drag_parent.addEventListener("mouseleave", e => {
  D = false;
});

function oMousePos(elmt, evt) {
  var ClientRect = elmt.getBoundingClientRect();
  return {
    //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}

function draggablePoints(m) {
  //top left
  draggable.p0s[0][0] = m.x - draggable.delta.x - 1;
  draggable.p0s[0][1] = m.y - draggable.delta.y - 1;
  //top right
  draggable.p0s[1][0] = m.x - draggable.delta.x + draggable.w + 1;
  draggable.p0s[1][1] = m.y - draggable.delta.y + 1;
  //bottom right
  draggable.p0s[2][0] = m.x - draggable.delta.x + draggable.w + 1;
  draggable.p0s[2][1] = m.y - draggable.delta.y + draggable.h + 1;
  //bottom left
  draggable.p0s[3][0] = m.x - draggable.delta.x + 1;
  draggable.p0s[3][1] = m.y - draggable.delta.y + draggable.h + 1;
}

*{margin:0;padding:0}
svg {
  outline: 1px solid;
}
#drag_parent {
  outline: 1px solid;
  min-height: 100vh;
  position:relative;
}
#draggable {
  position: absolute;
  width: 20px;
  height: 20px;
  background: orange;
  cursor: pointer;
}

<div id="drag_parent">
  <svg xmlns="http://www.w3.org/2000/svg" width="141.019" height="74.065" viewBox="0 0 141.019 74.065">
      <path id="Path_4569" data-name="Path 4569" class="target" d="M0,0H141.018V74.065h-24.27V37.033H10.88V12.971H0Z"/>
  </svg>
      <div id="draggable"></div>
</div>