Php 使用jquery taggd标记/标记图像
我正在使用这个插件创建一个应用程序，点击身体的任何部位都会创建一个标签。到目前为止，我已经管理好了一切，只是这个坐标不正确，有时会在文档上创建点，如果我点击左上角，有时会在我的点击图片附近创建点。所以问题是它没有创建点，我点击图片无法理解，这是我的坐标有什么问题，在文档方面没有太多帮助 它以0-1或像素为单位进行缩放，但这一点也不清楚 问题 如何使它正常工作，以采取准确的坐标和放置标签正是我点击的地方Php 使用jquery taggd标记/标记图像,php,jquery,html,Php,Jquery,Html,我正在使用这个插件创建一个应用程序，点击身体的任何部位都会创建一个标签。到目前为止，我已经管理好了一切，只是这个坐标不正确，有时会在文档上创建点，如果我点击左上角，有时会在我的点击图片附近创建点。所以问题是它没有创建点，我点击图片无法理解，这是我的坐标有什么问题，在文档方面没有太多帮助 它以0-1或像素为单位进行缩放，但这一点也不清楚 问题 如何使它正常工作，以采取准确的坐标和放置标签正是我点击的地方 <html> <head> <link hr
<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>
var数据=[]；
var设置=[]；
$（文档）.ready（函数（）{
$（'.taggd'）。单击（函数（e）{
var offset=$（this.offset（）；
var x=（e.pageX-offset.left）；
变量y=（e.pageY-offset.top）；
控制台日志（x）；
控制台日志（y）；
数据推送([
{x:x/100，y:y/100，文本：“休伊，这是一个文本”}
]);
设置.推送({
对齐：{y'：'top'}，
偏移量：{'top'：100}，
“处理程序”：{
“mouseenter”：“show”，
“mouseleave”：“hide”
}
});
$（'.taggd'）。每个（函数（即，e）{
var$e=$（e）；
控制台日志（e）；
$e.taggd（设置[i]）；
$e.taggd（'项目'，数据[i]）
});
});
});
/*
$（文档）.ready（函数（）{
变量设置={
“对齐”：{
“x”：“中心”，
“y”：“中间”
},
'handlers'：{}，
“偏移量”：{
“左”：0，
“顶部”：0
}
};
$（“#mytag”）。单击（函数（e）{
$（'#mytag'）.taggd（设置）；
var x=e.pageX-this.offsetLeft；
变量y=e.pageY-this.offsetTop；
控制台日志（x）；
控制台日志（y）；
$（'#mytag'）.taggd（'items'，{x:x，y:y，text:'This a test'}）
});
});
*/
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()
});
});
你的问题是？问题是坐标取对了。如何在单击图像时获取准确的坐标，以便创建标签，这取决于您的页面结构以及是否滚动等。这可能最终成为返回坐标的有效用例！你好@Tim，谢谢你的帖子，我需要一些与你的代码类似的东西，但我需要添加一些输入字段，例如一个标题，让用户选择在标签中插入哪个标题，我该怎么做？@Pedro在2.x中，你可以使用（未记录的）编辑选项
{edit:true}