Marking/Tagging Image using jquery taggd
Question
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.
<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 answers
solution1
3 ACCPTED 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. 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()
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.