duanfengshang1088 2014-04-02 18:26
浏览 41
已采纳

使用jquery taggd标记/标记图像

I am using This Plugin taggd to create an app which on click on any part of body creates a tag so far i have managed everything just this coordinates not getting right its creating dots on document sometimes and sometimes near my click on picture if i click on left top corner . So the problem is its not creating the point where i click on the picture unable to understand thats whats wrong with my coordinate not much help on documentation .

It takes scale 0-1 or in pixels but that's also not understood

Question How to make it work properly to take exact coordinates and put tag exactly where i click.

a Model

<html>

   <head>
      <link href='css/taggd.css' rel='stylesheet' type='text/css'>
      <script  type="text/javascript" src="js/jquery.js"></script>
      <script  type="text/javascript" src="js/jquery.taggd.js"></script>


   </head><body>




      <img  id="mytag" class="taggd" src="img/front.jpg"/>


         <script type="text/javascript">
var data = [];
var settings = [];

$(document).ready(function() {

   $('.taggd').click(function(e) {
     var offset = $(this).offset();
  var x = (e.pageX - offset.left);
  var y = (e.pageY - offset.top);


   console.log(x);
   console.log(y);

   data.push([
{ x:x/100, y:y/100, text: 'Huey This is a text' }


]);

settings.push({
align: { 'y': 'top' },
offset: { 'top': 100 },

'handlers': {
'mouseenter': 'show',
'mouseleave': 'hide'
}
});


$('.taggd').each(function(i, e) {
var $e = $(e);
 console.log(e);
$e.taggd(settings[i]);
$e.taggd('items', data[i])
});
});


});




/*

         $(document).ready(function() {
 var settings = {
        'align': {
            'x': 'center',
            'y': 'center'
        },

        'handlers': {},

        'offset': {
            'left': 0,
            'top': 0
        }
    };








            $('#mytag').click(function(e) {
       $('#mytag').taggd(settings);
               var x = e.pageX - this.offsetLeft;
               var y = e.pageY - this.offsetTop;
               console.log(x);
               console.log(y);









               $('#mytag').taggd('items',  {x: x, y: y, text: 'This is a test'})




            });
         });



*/
      </script>




   </body></html>
  • 写回答

1条回答 默认 最新

  • duanban4769 2014-11-10 10:28
    关注

    I know this is an old question, but I wanted to reply for completeness anyway.

    How to generate static coordinates

    Many users got stuck at generating coordinates. It’s annoying to open an image in Photoshop and look up the coordinates of all tags. Because of that, I created a generator:

    https://timseverien.com/projects/taggd/generator/

    How to create coordinates real-time

    Like the generator, it is possible to generate (and modify) data real-time.

    var $img = $('my-image');
    var taggd = $img.taggd(options, data);
    
    $img.on('mousedown', function(e) {
      // Get parent offset to calculate relative position
      var poffset = $(this).parent().offset();
      var x = e.pageX - poffset.left;
      var y = e.pageY - poffset.top;
    
      // By dividing the x and y coordinates with the
      // image’s width and height, you get a number
      // between 0 and 1, which is safer for scaling
    
      taggd.addData({
        x: x / $img.width(),
        y: y / $img.height(),
        text: Math.random()
      });
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)