将元素的原点设置为中心而不是左上角（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);
});

如何使标记的中心的默认位置恰好在质心中，同时仍然能够拖动标记？

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

感谢任何帮助。谢谢！！

Answer 1

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

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

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

所以改变这个：

  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%)。这会将标记向左和向上移动其宽度和高度的一半，无论它们是什么。