<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>
分享到：
相关推荐
在C++中，我们可以使用标准模板库（STL）或者自定义函数来实现这个功能。 绘制矩形通常涉及到窗口系统，如Windows API，这允许我们与操作系统进行交互，创建窗口并绘制图形。例如，使用Windows API，我们需要包含`...
本话题将深入探讨如何使用纯JavaScript来实现一个简单的画矩形功能。我们将关注以下几个关键知识点： 1. **HTML5 Canvas**: 首先，我们要知道在浏览器环境中，`<canvas>`元素是用于绘制2D图形的。在`paint.html`...
画板通常指的是一个可以绘制图形的窗口或区域，它允许程序员通过指定坐标和颜色来绘制各种形状。在易语言中，我们可以创建一个窗口，并在其中设置一个画布控件，用于绘制和显示矩形。 接下来，让我们详细讲解“模拟...
在实际开发中，你可以根据需要添加更多的功能，如保存标注信息，或者支持多个矩形框。 以上就是使用MFC和VC++在图片上画矩形框的基本步骤。在开发过程中，可能还需要处理其他细节，如错误处理、用户交互优化等。...
易语言API画矩形源码,API画矩形,设置刷子颜色,取对象句柄_,设置画笔颜色,取设备场景_,释放设备场景_,画矩形_,删除对象_,DrawText,GetClientRect,选入设备场景_,画矩形边框_
在Java编程语言中，设计一个可以根据鼠标拖曳来画直线、矩形和圆的画图程序，涉及到的主要知识点包括Java图形用户界面（GUI）的构建、事件处理以及几何形状的绘制。下面将详细阐述这些核心内容。 1. Java GUI基础：...
1097：画矩形 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 21249 通过数: 12589 【题目描述】 根据参数，画出矩形。输入四个参数：前两个参数为整数，依次代表矩形的高和宽（高不少于3行不多于10行，宽不少于5列...
这个功能可以扩展以支持多个矩形、删除矩形、保存坐标等更多操作。 总结，使用jQuery实现“在图片上画矩形”功能涉及的主要知识点包括： 1. jQuery的选择器、事件处理和DOM操作。 2. CSS的`position`属性和相对...
为了根据鼠标的移动来画矩形，我们需要监听鼠标的相关事件，比如`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标抬起）。当`mousedown`事件触发时，记录下鼠标的起始位置，作为矩形的左上角坐标...
在VB6.0环境下，创建一个能够用画笔画矩形的程序，涉及到的主要知识点包括图形绘制、事件处理以及用户界面交互。以下是对这些概念的详细解释： 1. **图形绘制**：VB6.0提供了丰富的图形绘制功能，主要通过`Graphics...
在画矩形时，你可以创建一个Rect对象并用它来传递给`drawRect()`方法。 3. **Paint对象**: Paint类用于设置绘制的样式，比如颜色、线宽、填充模式等。在画矩形之前，你需要先创建一个Paint对象，设置其属性，然后将...
在VC++环境中，开发一个单文档界面（Single Document Interface, SDI）的应用程序时，我们经常需要在视图上绘制图形，例如矩形。本文将深入探讨如何在VC6环境下，利用MFC（Microsoft Foundation Classes）库实现单...
LCD12864是一种点阵液晶显示器，拥有128列和64行的像素点，可以显示128x64个字符或者自定义图形。这种显示器通常通过串行或并行接口与单片机通信，如SPI或I2C协议。在C语言中，我们需要编写相应的驱动程序来控制LCD...
微信小程序由多个页面组成，每个页面包括wxml（结构层）、wxss（样式层）和js（逻辑层）三个部分。在本项目中，我们关注的是js文件，因为这是处理canvas操作的地方。 1. **创建canvas**：在wxml文件中，我们定义一...
在给定的信息中，我们可以深入探讨使用VC++（Visual C++）编程环境开发的一个简易画图应用程序。这个程序的核心功能包括绘制直线、矩形和椭圆，这些都是基本的图形元素，广泛应用于各种图形用户界面（GUI）应用和...
2.利用这个画图程序，通过选择画直线、画圆形、画矩形等功能选项并且在屏幕上拖动鼠标操作能实现画出相应图形的功能； 3.这个画图程序，还应该做到能够改变画笔颜色的功能； 4.这个画图程序，还应该具备能够清除已...
在C#编程环境中，我们可以利用GDI+（Graphics Device Interface Plus）库来实现图形绘制功能，包括画线条和矩形。GDI+是.NET Framework的一部分，提供了丰富的绘图能力，可以用于创建各种复杂的图形和图像处理。下面...