使用jQuery taggd标记/标记图像 - php

我正在使用此插件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>

参考方案

我知道这是一个老问题，但是无论如何我都想答复。

如何生成静态坐标

许多用户被困在生成坐标上。在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 Ajax解析对象的PHP数组 - php

我正在尝试将数据库中的数据与对象数组放入jquery中以呈现在网站上。例如：example.php<?php function testFunction() { $data = array() $mydata = new stdClass; $mydata->example = 'test'; $data[] = $mydat…

PHP strtotime困境 - php

有人可以解释为什么这在我的服务器上输出为true吗？date_default_timezone_set('Europe/Bucharest'); var_dump( strtotime('29.03.2015 03:00', time()) === strtotime('29.03.2015 04:00�…

PHP-全局变量的性能和内存问题 - php

假设情况：我在php中运行一个复杂的站点，并且我使用了很多全局变量。我可以将变量存储在现有的全局范围内，例如$_REQUEST['userInfo']，$_REQUEST['foo']和$_REQUEST['bar']等，然后将许多不同的内容放入请求范围内（这将是适当的用法，因为这些数据指的是要求自…

php-casperjs获取内部文本 - php

我正在为casperjs使用php包装器-https://github.com/alwex/php-casperjs我正在网上自动化一些重复的工作，我需要访问一个项目的innerText，但是我尚不清楚如何从casperjs浏览器访问dom。我认为在js中我会var arr = document.querySelector('label.input…

PHP-从最后一个循环中删除逗号 - php

我在循环时有一个PHP，如果是最后一个循环，我想从,中删除最后一个逗号echo '],'; while($ltr = mysql_fetch_array($lt)){ echo '['; echo $ltr['days']. ' ,'. $ltr['name…

使用jQuery taggd标记/标记图像 - php

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…