使用jquery taggd标记/标记图像
[英]Marking/Tagging Image using 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 . 
我正在使用这个插件taggd来创建一个应用程序，点击身体的任何部分创建一个标签到目前为止我已经管理了一切只是这个坐标没有正确它创建点文档有时，有时我的点击图片，如果我点击左上角。 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 它需要0-1或像素，但也不了解
Question How to make it work properly to take exact coordinates and put tag exactly where i click. 问题如何使其正常工作以获取精确坐标并将标签准确放置在我点击的位置。
<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 个解决方案
解决方案1
3 已采纳 2014-11-10 10:28:08
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. 在Photoshop中打开图像并查找所有标签的坐标很烦人。 Because of that, I created a generator: 因此，我创建了一个生成器：
https://timseverien.com/projects/taggd/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()
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.