<HTML>
<HEAD>
<META http-equiv=imagetoolbar content=no>
<TITLE>
</TITLE>
<STYLE>
.rubberBand {
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 2px solid red;
}
.hidden{
display: none;
}
</STYLE>
</HEAD>
<BODY>
<img name="myImage" id="myImage" src="1.jpg" >
<SCRIPT>
var IMG;
var i = 0;
var startX=0,startY=0,endX=0,endY=0;
var store =[] ;
function startRubber (evt) {
if (!!window.ActiveXObject) {
// IE
var r= document.createElement("div");
r.setAttribute("className","rubberBand")
r.setAttribute("id","rubberBand"+i)
document.body.appendChild(r);
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.createElement("div");
r.setAttribute("class","rubberBand")
r.setAttribute("id","rubberBand"+i)
document.body.appendChild(r);
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 (!!window.ActiveXObject) { // IE
var r = eval("document.all.rubberBand"+i);
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'+i);
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;
statisticCoor();
i=i+1;
}
function statisticCoor(){
if (!!window.ActiveXObject) { // IE
var r = eval("document.all.rubberBand"+i);
store.push({"startX":r.style.pixelLeft,"startY":r.style.pixelTop,"endX":parseInt(r.style.width)+r.style.pixelLeft,"endY":parseInt(r.style.height)+r.style.pixelTop});
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand'+i);
store.push({"startX":parseInt(r.style.left),"startY":parseInt(r.style.top),"endX":parseInt(r.style.width)+parseInt(r.style.left),"endY":parseInt(r.style.height)+parseInt(r.style.top)});
}
}
function cancelDragDrop()
{
window.event.returnValue = false;
}
IMG = document.getElementById('myImage');
IMG.onmousedown = startRubber;
IMG.onmouseup = stopRubber;
function deleteAllSelected(){
for(var a=0;a<i;a++){
element = getElement('rubberBand'+a);
element.style.display = "None";
}
store = [];
}
function getElement(id){
var element;
if (!!window.ActiveXObject) { // IE
element = eval("document.all."+id);
}
else if (document.getElementById) { // firefox
element = document.getElementById(id);
}
return element;
}
document.onkeydown = function(e){
var e = e || event;
var code = e.keyCode || e.which || e.charCode;
if(code== 16 || code==17){
deleteAllSelected();
}
}
</SCRIPT>
</BODY>
</HTML>
分享到：
相关推荐
解压后，用VS6.0打开工作区，找到解压文件，选择0510，双击，运行。
1097：画矩形 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 21249 通过数: 12589 【题目描述】 根据参数，画出矩形。输入四个参数：前两个参数为整数，依次代表矩形的高和宽（高不少于3行不多于10行，宽不少于5列...
易语言API画矩形源码,API画矩形,设置刷子颜色,取对象句柄_,设置画笔颜色,取设备场景_,释放设备场景_,画矩形_,删除对象_,DrawText,GetClientRect,选入设备场景_,画矩形边框_
这是一个简单的用Javascript画矩形的代码，用到鼠标相关事件。
java图形工具源代码 设计一个可以根据鼠标的拖曳画直线，矩形，圆的画图程序。
易语言画板模拟拖动矩形源码,画板模拟拖动矩形,子程序1,子程序2,刷新物体位置,点是否在矩形内
C# 画图 画线条 画矩形 有两个窗体， 一个是画线条， 一个是画矩形 希望对大家有用
用画笔画矩形程序(VB6.0代码编写) 用画笔画矩形 QQ223857666勾月
Qt绘图编辑器（涂鸦、画矩形、画椭圆形、画蝴蝶），修改颜色、打开图片、保存图片、画刷风格、画刷颜色、画笔风格、画笔颜色、画笔线宽等等 Qt绘图编辑器（涂鸦、画矩形、画椭圆形、画蝴蝶），修改颜色、打开图片、...
C#中在picturebox中实时画矩形框
as3 flash 画板源码、直线、画文输入本框、画矩形、画直线、橡皮 可以像在桌面画矩形一样的画一个文本输入框。有点击按钮可以有类似ctrl+z，ctrl+y的功能。全部清除功能。可以演示。
CAD：excel 批量画矩形 把excel中的长、宽数据批量画到cad中
CustomSense继承QGraphicsScene，QGraphicsView，重写了鼠标事件，在CustomSense上添加图片并画矩形标记出特定区域，是专门满足这个需求写的小测试例子，使用Qt5实现。
VB Line方法画矩形 VB Line方法画矩形 VB Line方法画矩形
一个简单的利用C++MFC画矩形的程序，很容易懂的哦
android 程序 输入坐标保存后 可根据坐标在画布上 画出矩形.. Eclipise 课程设计用 有背景美化
LabVIEW通过视觉控件画矩形。通过载入一副图片，IMAQ Overlay rectangle 控件，叠加一个矩形到目标位置。 可以实现位置选定。
vtk中的例子TestvtkAffineWidget 可以画矩形和圆，但是矩形和圆都不能移动和缩放，本内容改造了vtkAffineRepresentation2D , 使矩形和圆都可以放大和缩小。也可以移动，满足了测量的需求，可以用它来对选择的感兴趣...
加载图片后，可在选择区域画框，并可以输出矩形框的位置信息