在图像上绘制矩形
问题描述:
我正在做一个项目,用于在图像上绘制矩形框并查找矩形的坐标。我使用JavaScript来编写这个程序。在图像上绘制矩形
我的代码是:
<style>
#rubberBand {
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 2px solid red;
}
</style>
</HEAD>
<BODY>
<img name="myImage" id="myImage" src="a.jpg">
<DIV ID="rubberBand"></DIV>
<SCRIPT>
var IMG;
function startRubber (evt) {
if (document.all) {
var r = document.all.rubberBand;
r.style.width = 0;
r.style.height = 0;
r.style.pixelLeft = event.x;
r.style.pixelTop = event.y;
r.style.visibility = 'visible';
IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
}
else if (document.getElementById) {
// firefox
evt.preventDefault();
var r = document.getElementById('rubberBand');
r.style.width = 0;
r.style.height = 0;
r.style.left = evt.clientX + 'px';
r.style.top = evt.clientY + 'px';
r.style.visibility = 'visible';
r.onmouseup = stopRubber;
}
IMG.onmousemove = moveRubber;
}
function moveRubber (evt) {
if (document.all) { // IE
var r = document.all.rubberBand;
r.style.width = event.x - r.style.pixelLeft;
r.style.height = event.y - r.style.pixelTop;
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand');
r.style.width = evt.clientX - parseInt(r.style.left);
r.style.height = evt.clientY - parseInt(r.style.top);
}
return false; // otherwise IE won't fire mouseup :/
}
function stopRubber (evt) {
IMG.onmousemove = null;
}
function cancelDragDrop()
{
window.event.returnValue = false;
}
IMG = document.getElementById('myImage');
IMG.onmousedown = startRubber;
IMG.onmouseup = stopRubber;
</SCRIPT>
我如何在形式(x1,y1)(x2,y2)
显示矩形的坐标。这是左上角和右下角坐标,最后是左右角。
我试图显示不同的变量,但它是不正确的。请帮助我的任何人显示矩形的坐标。
答
获取的坐标是容易的,假设你有一个变量的橡皮元素称为rectangle
:
var x1 = rectangle.style.left;
var y1 = rectangle.style.top;
var x2 = x1 + rectangle.style.width;
var y2 = y1 + rectangle.style.height;
如果你想显示他们指定的格式在页面上,请尝试以下(假设你有一个输出元素与output
一个id:
var coords = '(' + x1 + ',' + y1 + ')(' + + x2 + ',' + y2 + ')';
document.getElementById('output').innerHTML = coords;
答
你有种欠我一个啤酒这一个:
var IMG, rubber, pt = { x: 0, y: 0 };
function startRubber (evt) {
var ev = evt || window.event,
rs = rubber.style,
bb = IMG.getBoundingClientRect();
console.dir(ev);
rs.left = bb.left + 'px';
rs.top = bb.top + 'px';
rs.width = bb.width + 'px';
rs.height = bb.height + 'px';
rs.display = 'block';
pt = { x: ev.clientX - bb.left, y: ev.clientY - bb.top };
return false;
}
function stopRubber() {
rubber.style.display = 'none';
}
function moveRubber (evt) {
var ev = evt || window.event;
rubber.style.left = (evt.clientX - pt.x) + 'px';
rubber.style.top = (evt.clientY - pt.y) + 'px';
}
rubber = document.getElementById('rubberBand');
IMG = document.getElementById('myImage');
IMG.onmousedown = startRubber;
document.onmouseup = stopRubber;
document.onmousemove = moveRubber;
试验台:http://jsbin.com/ojaxew/edit
希望这有助于-ck
考虑使用一些JavaScript框架,如jQuery,MooTools的向往之......它让生活变得更加简单。 – zeroos 2012-02-21 19:05:21
这与您提出的最后两个问题有什么不同? http://*.com/questions/9397104/javascript-for-draw-rectangle-over-a-image和http://*.com/questions/9383337/drag-and-draw-rectangles-on-an- image-in-javascript – j08691 2012-02-22 16:28:48