无法将标记放置在图像上精确的鼠标点击区域

Question

我试图将标记放置在发生鼠标单击的图像上，但不知何故，我当前的代码将标记放置在远离鼠标指针的位置，我不明白，因为标记位置和鼠标单击坐标均以 px 为单位。

有人对此有任何想法吗？

$scope.obj = {};
$scope.obj.myStyle = {};
$scope.img = function(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coords = "X coords: " + x + ", Y coords: " + y;
  $log.info("coords--" + coords);
  $scope.obj.myStyle["left"] = event.clientX + 'px';
  $scope.obj.myStyle["top"] = event.clientY + 'px';
  $log.info($scope.obj.myStyle);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="myDiv" ng-click="img($event)">
  <img width="50%" height="50%" src="http://placekitten.com/g/400/300" alt="">
  <img style="width:20px;position: absolute;" ng-style="obj.myStyle" ng-if="obj.myStyle != {}" src="https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Marker-Outside-Chartreuse.png" id="marker" />

</div>

Answer 1

在这段代码中，我们首先计算点击坐标相对于容器和图像的偏移量。然后使用这些偏移来调整标记在容器内的位置。

$scope.img = function (event) {
    var container = document.getElementById("myDiv");
    var image = document.getElementById("image");

    var containerRect = container.getBoundingClientRect();
    var imageRect = image.getBoundingClientRect();

    var offsetX = event.clientX - containerRect.left - imageRect.left;
    var offsetY = event.clientY - containerRect.top - imageRect.top;

    console.log("offsetX:", offsetX);
    console.log("offsetY:", offsetY);

    $scope.obj.myStyle["left"] = offsetX + "px";
    $scope.obj.myStyle["top"] = offsetY + "px";
};

<div id="myDiv" ng-click="img($event)">
    <img
        width="50%"
        height="50%"
        src="http://placekitten.com/g/400/300"
        alt=""
        id="image"
    />
    <img
        style="width: 20px; position: absolute;"
        ng-style="obj.myStyle"
        ng-if="obj.myStyle.left !== undefined && obj.myStyle.top !== undefined"
        src="https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Marker-Outside-Chartreuse.png"
        id="marker"
    />
</div>