将元素的原点设置为中心而不是左上角（jquery）

Question

我在三角形内有这个标记（这是一个简单的 div）：

标记的中心应恰好位于三角形的质心。

如图所示，它并不完全位于质心（它有点向右，可能在底部）。

我正在使用 jquery ui .draggable方法。 这是我的标记 css：

#marker {
  position: absolute;
  background: #808080;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: grab;
}

这是我的 jquery 脚本：

$(document).ready(function () {
  var triangle = $("#triangle");
  var marker = $("#marker");
  var coord = getTriangleCoordinates(triangle);
  var center = centroid(coord);

  $("#marker").hover(
    function () {
      // over
      $(this).css("filter", "brightness(0.8)");
    },
    function () {
      // out
      $(this).css("filter", "brightness(1)");
    }
  );

  $("#marker").mouseup(function () {
    $(this).css("background", "salmon");
  });

  $("#marker").draggable({
    drag: function (event, ui) {
      var offset = ui.offset;
      if (!bounded(offset, coord)) return false;
    }
  });

  marker.css("left", Math.round(center.left) - 5 + "px");
  marker.css("top", Math.round(center.top) - 5 + "px");

  console.log(coord);
});

如何使标记中心的默认值 position 正好位于质心，同时仍然能够拖动标记？

我尝试了transform: translate(-50%, 0) css 属性。 虽然它修复了 position，但它完全搞砸了拖动功能。

任何帮助表示赞赏。 谢谢！！

Answer 1

您的标记元素的宽度为 50 像素，高度为 50 像素。

假设您的质心 function 返回正确的结果，然后您将标记的左上角（记住，它基本上是一个正方形）定位在距离实际质心仅 5px 的偏移处。

它需要偏移其宽度和高度的一半，以便其中心点位于质心。

所以改变这个：

  marker.css("left", Math.round(center.left) - 5 + "px");
  marker.css("top", Math.round(center.top) - 5 + "px");

对此：

  marker.css("left", Math.round(center.left) - 25 + "px");
  marker.css("top", Math.round(center.top) - 25 + "px");

对于更通用的解决方案，例如，如果标记的尺寸可能会随着视口大小或其他因素而变化，您可以将左上角设置为质心，然后进行transform: translate(-50%, 50%) 。 这会将标记向左和向上移动其宽度和高度的一半，无论它们是什么。