使用jquery taggd标记/标记图像

Question

我正在使用这个插件taggd来创建一个应用程序，点击身体的任何部分创建一个标签到目前为止我已经管理了一切只是这个坐标没有正确它创建点文档有时，有时我的点击图片，如果我点击左上角。 所以问题是它没有创建点我点击图片无法理解那是我的坐标错误对文档没什么帮助。

它需要0-1或像素，但也不了解

问题如何使其正常工作以获取精确坐标并将标签准确放置在我点击的位置。

一个模型

<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>

Answer 1

我知道这是一个老问题，但无论如何我想回答完整性。

如何生成静态坐标

许多用户都陷入了生成坐标的困境。 在Photoshop中打开图像并查找所有标签的坐标很烦人。 因此，我创建了一个生成器：

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

如何实时创建坐标

与生成器一样，可以实时生成（和修改）数据。

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()
  });
});

使用jquery taggd标记/标记图像

问题描述

1 个解决方案

解决方案1
3 已采纳 2014-11-10 10:28:08

如何生成静态坐标

如何实时创建坐标

使用jquery taggd标记/标记图像

问题描述

1 个解决方案

解决方案1 3 已采纳 2014-11-10 10:28:08

如何生成静态坐标

如何实时创建坐标

解决方案1
3 已采纳 2014-11-10 10:28:08