jQuery-单击图像上的坐标并在其中画一个圆 [英] jQuery- click at a co-ordinate on an image and draw a circle there
问题描述
我有一个div即image_preview，里面有一个图像.有一个输入框可以从用户那里获取圆的半径.当我单击图像上的一个点时，我需要一个以该点为中心的圆，输入的半径为半径.圆圈上应该用记号笔标记.标识为hotspot_display的div用作标记，而div circle用作要显示的圆圈.两者都是绝对的位置.标记的背景图像尺寸为24X24.
每当我单击时，都会制作标记和圆圈的克隆并将其定位在我单击的点周围.鼠标单击可更改标记和圆圈的位置(您将在此问题的结尾找到小提琴链接).
我可以使用offset和clientX等捕获单击点的坐标.其代码如下:
HTML: 图片:
<input type="text" value="0" class="radius" name="radius"/>
<div id="image_preview">
<img src="https://i.imgur.com/B7VsSq3.png" alt="background" />
<div id="hotspot_display"></div>
<div class="circle" style="background-color: #858585; position: absolute;"></div>
</div><!-- end of id image_preview-->
<div id="hotspot_answer_points">
</div><!-- end of id hotspot_answer_points-->
JS:
$('#image_preview').bind('click', function (ev) {
var $div = $(ev.target);
var $div = $(this);
var $display = $('#image_preview').find('#hotspot_display');
var offset_t = $(this).offset().top - $(window).scrollTop();
var offset_l = $(this).offset().left - $(window).scrollLeft();
var left = Math.round( (ev.clientX - offset_l) );
var top = Math.round( (ev.clientY - offset_t) );
if(window.console){
console.log("left = "+left+" top = "+top);
}
var display_clone=$display.clone().show();
display_clone.css({'top':top+33,'left':left+10,'display':'block'});
});
display_clone.css的代码在其参数中将一些值(33和10)添加到left和top，没有这些值，我无法使图像标记的中心仅位于坐标上.
问题1)我只是随机使用了要添加的33和10个值.如果我的HTML代码位于复杂的HTML页面中，那么实际上要进行什么计算，因为要添加的这些数字可能会有所不同?
问题2 :我无法使圆心成为单击的坐标.这里应该怎么办?
整个场景是在这里.
我的场景实际上有2个部分.上述情况发生在管理区域中.在用户区域中，我再次显示div内的图像，即hotspot_user_area.我从管理区域将单击的坐标保存在数据库中.在用户我区域中，我有HTML:
<div id="hotspot_user_area">
<img src="https://i.imgur.com/B7VsSq3.png" alt="background" />
</div>
我从数据库中获取了坐标，并希望在图像的hotspot_user_area中用标记显示它们.假设我从DB获得的坐标在变量x1和y1中；现在，如果我使用 Roko C. Buljan 的回答中的以下代码，它将无法正常工作:
$("<div />", {
"class": "circle",
css: {
top: y1,
left: x1,
width: r * 2,
height: r * 2,
},
appendTo: $this // append to #image_preview!
}).
这不起作用，因为在管理面板中left和top属性的值分别为x和y，它们具有以下计算公式:
y = ev.pageY - o.top,
x = ev.pageX - o.left;
那么无论如何再次放置图像，如何将标记放置在图像的同一位置?
这是一种更简单的方法:
- 要获取中心，请使用
ev.pageX - el.offset().left - 不克隆元素.即时创建它们.
- 使用CSS
transform translate将其居中
var App = App || {};
App.points = []; // Use array to store objects like [{x,y,r}, {x,y,r} ...]
jQuery(function($) {
const $radius = $(".radius");
$('#image_preview').on('click', function(ev) {
const $this = $(this),
r = parseInt($radius.val().trim(), 10), // Parse as Integer radix 10
o = $this.offset(),
y = ev.pageY - o.top,
x = ev.pageX - o.left;
$("<div />", {
"class": "circle",
css: {
top: y,
left: x,
width: r * 2,
height: r * 2,
},
appendTo: $this // append to #image_preview!
});
// Append data to App.points
App.points.push({x,y,r});
// Test
console.log( App.points )
});
});
#image_preview {
position: relative; /* Add this since child are absolute! */
background: #eee;
margin: 15px;
cursor: crosshair;
}
#image_preview img {
display: inline-block;
vertical-align: top;
}
.circle {
position: absolute;
background: rgba(255, 0, 0, 0.2) url("https://i.imgur.com/qtpC8Rf.png") no-repeat 50% 50%;
border-radius: 50%;
transform: translate(-50%, -50%); /* use translate instead of JS calculations */
}
.radius {
position: absolute;
}
Radius: <input type="text" value="20" class="radius" name="radius">
<div id="image_preview">
<img src="https://i.imgur.com/B7VsSq3.png" alt="graph">
</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
I have a div namely image_preview with an image inside it. There is an input box to get the radius of the circle from the user. When I click at a point on the image, I need a circle with that point as the center and the radius input as the radius. The circle should be marked with a marker . The div with id hotspot_display works as the marker and the div circle acts as the circle to be displayed . Both are absolutely positioned. The marker has as its background an image with the dimension 24X24.
Whenever I click, clones of the marker and circle are made and positioned around the point I clicked. The marker and circle positions are changed with mouse click (You'll find the fiddle link at the end of this question).
I can capture the co-ordinate of the point at which I click with offset and clientX etc. the code for which follows:
HTML: Image:
<input type="text" value="0" class="radius" name="radius"/>
<div id="image_preview">
<img src="https://i.imgur.com/B7VsSq3.png" alt="background" />
<div id="hotspot_display"></div>
<div class="circle" style="background-color: #858585; position: absolute;"></div>
</div><!-- end of id image_preview-->
<div id="hotspot_answer_points">
</div><!-- end of id hotspot_answer_points-->
JS:
$('#image_preview').bind('click', function (ev) {
var $div = $(ev.target);
var $div = $(this);
var $display = $('#image_preview').find('#hotspot_display');
var offset_t = $(this).offset().top - $(window).scrollTop();
var offset_l = $(this).offset().left - $(window).scrollLeft();
var left = Math.round( (ev.clientX - offset_l) );
var top = Math.round( (ev.clientY - offset_t) );
if(window.console){
console.log("left = "+left+" top = "+top);
}
var display_clone=$display.clone().show();
display_clone.css({'top':top+33,'left':left+10,'display':'block'});
});
The code of display_clone.css has in its parameter some values (33 and 10 ) added to left and top without which I cannot get the center of image marker sit just on the co-ordinate.
Question 1) I just randomly used the 33 and 10 values to be added. What calculation should really be done here as these numbers to be added might vary If my HTML code sits inside a complex HTML page?
Question 2: I cannot get the circle's center to be the co-ordinate I clicked . What should be the way here ?
The whole of the scenario is here in a fiddle.
EDIT:
My scenario has actually 2 parts. The situation stated above takes place in an admin area. In the user area , I again show the image inside a div namely hotspot_user_area. I saved the clicked co-ordinates in database from the admin area. In user I area, I have the HTML:
<div id="hotspot_user_area">
<img src="https://i.imgur.com/B7VsSq3.png" alt="background" />
</div>
I take the co-ordinates from database and want to show them with markers in the hotspot_user_area on the image. Suppose I get the co-ordinate from DB to be in variable x1 and y1; Now if I use the following code from Roko C. Buljan's answer , it won't work :
$("<div />", {
"class": "circle",
css: {
top: y1,
left: x1,
width: r * 2,
height: r * 2,
},
appendTo: $this // append to #image_preview!
}).
This doesn;t work because in admin panel left and top properties have the values x and y respectively which have the following calculation:
y = ev.pageY - o.top,
x = ev.pageX - o.left;
So how can I place the markers at the same place of the image in whatever div the image is placed again ?
Here's a simpler approach:
- To get the center use something like
ev.pageX - el.offset().left - Don't clone elements. Create them on the fly.
- Use CSS
transform translateto center them
var App = App || {};
App.points = []; // Use array to store objects like [{x,y,r}, {x,y,r} ...]
jQuery(function($) {
const $radius = $(".radius");
$('#image_preview').on('click', function(ev) {
const $this = $(this),
r = parseInt($radius.val().trim(), 10), // Parse as Integer radix 10
o = $this.offset(),
y = ev.pageY - o.top,
x = ev.pageX - o.left;
$("<div />", {
"class": "circle",
css: {
top: y,
left: x,
width: r * 2,
height: r * 2,
},
appendTo: $this // append to #image_preview!
});
// Append data to App.points
App.points.push({x,y,r});
// Test
console.log( App.points )
});
});
#image_preview {
position: relative; /* Add this since child are absolute! */
background: #eee;
margin: 15px;
cursor: crosshair;
}
#image_preview img {
display: inline-block;
vertical-align: top;
}
.circle {
position: absolute;
background: rgba(255, 0, 0, 0.2) url("https://i.imgur.com/qtpC8Rf.png") no-repeat 50% 50%;
border-radius: 50%;
transform: translate(-50%, -50%); /* use translate instead of JS calculations */
}
.radius {
position: absolute;
}
Radius: <input type="text" value="20" class="radius" name="radius">
<div id="image_preview">
<img src="https://i.imgur.com/B7VsSq3.png" alt="graph">
</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
这篇关于jQuery-单击图像上的坐标并在其中画一个圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
