Question

我是jquery算法的新手，我想问一下，当我点击鼠标时，我可以添加点或线。所以我知道我已经标记过了。我想用它来映射图像。谢谢

$(document).ready(function(e) { 
var coords = [];
var temp;
$('#map').click(function(e) {
    var posX = $(this).offset().left, posY = $(this).offset().top;
    var temp =((e.pageX - posX)+ ',' + (e.pageY - posY));
    coords.push(temp);
    if(coords.length == 1){
        $('#coords').attr({
            "shape"  : "rect",
            /*"style"  : "position:absolute; width: 2px; height: 2px; top: "posY"px; left: "posX"px; background: red;",*/
            "coords" : coords
        });
    }
    else {
        $('#coords').attr({
            "shape"  : "poly",
          //  "style"  : "position:absolute; width: 100px; height: 100px; background: red;",
            "coords" : coords
        });
    };
   });

$('#ret').click(function(e){
    coords.pop(temp);
    });

$('#del').click(function(e){
    coords.length=0;
});

$('#show').click(function(e){
    console.log(coords);
});
});

https://jsfiddle.net/senryu/tdt8we0k/

Answer 1

你可以按照以下方式实现。

＆＃13;

 $(document).ready(function() {
       $("#maping").click(function(e) {
       e.preventDefault();
       var x = e.pageX - this.offsetLeft;
       var y = e.pageY - this.offsetTop;
       var img = $('<img>');
       img.css('top', y);
       img.css('left', x);
       img.attr('width', 20);
       img.attr('height', 20);
       img.attr('src', 'http://www.clker.com/cliparts/q/p/u/5/b/3/green-leaf-icon-hi.png');
       img.appendTo('#maping');
     })
  });

＆＃13;

#maping{
    background: pink; 
    width: 1000px; 
    height: 500px; 
    position: relative;
}
#maping img {
    position: absolute;   
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="maping">

</div>

＆＃13;

希望它有所帮助。

单击鼠标进行映射时添加点

1 个答案: