Question

我正在尝试为图像添加标记。我不认为将它转换为图像映射是有用的也不实际的。

当用户点击图片时，它应该放置一个标记。我可以检索相对坐标但是我不能放置标记，因为我无法得到我认为的绝对坐标。

我正在尝试做一些与此插件非常相似的内容：http://waynegm.github.io/imgNotes/examples/basic_interactive.html（点击底部的编辑，然后点击图片）

$('#AddSensors_img').click(function (e) {
    var rpos = [];
    rpos.x = e.pageX - this.offsetLeft;
    rpos.y = e.pageY - this.offsetTop;

    if (rpos) {

        var el = $(document.createElement('span')).addClass("marker black").html("1");
        var pos = [];

        var offset = $(this).offset();
        pos.x = Math.round($(window).scrollLeft()-rpos.x);
        pos.y = Math.round($(window).scrollTop() -rpos.y);
         console.log(pos);

        if (pos) {
            $(el).css({
                left: (pos.x),
                top: (pos.y),
                position: "absolute"
            });
        }
    }
});

还试过这个：

$('#AddSensors_img').click(function (e) {
    var rpos = [];
    rpos.x = e.pageX - this.offsetLeft;
    rpos.y = e.pageY - this.offsetTop;
    var marker = $('span').addClass('marker black').html("1");
    marker.css({
        left: rpos.x,
        top: rpos.y
    })
    marker.appendTo(this);

});

Answer 1

您可以创建一个包含postion: relative的包装，并且您的图像将具有position: absolute（与标记相同），然后您可以使用偏移来获取相对值并用于放置标记。

HTML：

<div id="wrapper">
   <img src="some_image.png"/>
</div>

的CSS：

#wrapper { position: relative; }
#wrapper img, #wrapper .marker { position: absolute; }
#wrapper .marker { z-index: 100; }
#wrapper img { top: 0; left: 0; }

的javascript：

var $wrapper = $('#wrapper');
$('#wrapper img').click(function(e) {
    var $this = $(this);
    var offset = $this.offset();
    $('<span>1</span>').addClass('marker').css({
        left: e.pageX-offset.left,
        top: e.pageY-offset.top
    }).appendTo($wrapper);
});

将标记添加到图像 - 从相对坐标转换回绝对坐标时遇到麻烦

1 个答案: