<HTML>
<HEAD>
<TITLE>rect sample</TITLE>
<div id="rect" style="position:absolute;left:0px;top:0px;width:0;height:0;border-top: 2px solid red;border-left: 2px solid red;border-right: 2px solid red;border-bottom: 2px solid red;z-index:100000px;">
</div>
<script type="text/javascript">
var startX,startY,endX,endY;
var dragFlag;
var startDraw = false;
function doMouseDown(event){
event = window.event||event;
dragFlag = 0;
if(!startDraw) return ;
startX = event.clientX;
startY = event.clientY;
document.getElementById("rect").style.left = startX+"px";
document.getElementById("rect").style.top = startY+"px";
document.getElementById("rect").style.height = "0px";
document.getElementById("rect").style.width = "0px";
}
function doMouseUp(){
dragFlag = (dragFlag==0)?1:0;
startX=startY=endX=endY=0;
}
function doMouseMove(event){
if(!startDraw) return ;
event = window.event||event;
if(dragFlag == 0){
endX = event.clientX;
endY = event.clientY;
nowHeight = endY - startY;
nowWidth = endX - startX;
if(nowHeight<0){
document.getElementById("rect").style.top = endY+"px";
nowHeight = -1*nowHeight;
}
if(nowWidth<0){
document.getElementById("rect").style.left = endX+"px";
nowWidth = -1*nowWidth;
}
document.getElementById("rect").style.height = nowHeight+"px";
document.getElementById("rect").style.width = nowWidth+"px";
}
}
document.onmousemove = doMouseMove;
document.onmousedown = doMouseDown;
document.onmouseup = doMouseUp;
document.onkeydown = function(e){
var e = e || event;
var code = e.keyCode || e.which || e.charCode;
if(code== 16 || code==17){
startDraw=(startDraw)?false:true;
}
}
</script>
</HEAD>
<BODY>
<span>按下ctrl或者shift键开始draw，在按一下停止</span>
</BODY>
</HTML>
分享到：
相关推荐
【标题】"js 画矩形程序(可以画多个)（按下ctrl或者shift键clear all)" 描述了一段JavaScript代码，用于在网页上绘制多个矩形，并提供了键盘快捷键（Ctrl或Shift）来清除所有图形的功能。这个程序的核心是利用HTML5...
在本项目中，我们主要探讨的是如何使用C++编程语言来绘制矩形。C++是一种广泛应用的面向对象的编程语言，具有高效、灵活性强的特点，是编写图形用户界面（GUI）程序的理想选择。在这个特定的案例中，我们将利用...
本篇文章将深入探讨如何在MFC环境下使用VC++来实现在图片上画矩形框的功能，同时输出矩形框的位置信息。 首先，我们要理解MFC中的CWnd类是窗口的基础，而CDC类则用于控制设备上下文，这是在屏幕上画图的关键。在MFC...
易语言API画矩形源码,API画矩形,设置刷子颜色,取对象句柄_,设置画笔颜色,取设备场景_,释放设备场景_,画矩形_,删除对象_,DrawText,GetClientRect,选入设备场景_,画矩形边框_
3. **事件监听**: 为了实现鼠标操作画矩形，我们需要监听`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标抬起）事件。当用户按下鼠标时，记录初始坐标；在鼠标移动时，根据移动的坐标更新矩形...
3. **子程序2**：可能用于处理其他与矩形交互的逻辑，比如释放鼠标按钮时的处理，或者检查鼠标是否在矩形内部。如果子程序2是负责检测点是否在矩形内的，那么它会根据鼠标当前位置和矩形的坐标计算判断条件。 4. **...
在VB6.0环境下，创建一个能够用画笔画矩形的程序，涉及到的主要知识点包括图形绘制、事件处理以及用户界面交互。以下是对这些概念的详细解释： 1. **图形绘制**：VB6.0提供了丰富的图形绘制功能，主要通过`Graphics...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本教程将深入探讨如何使用jQuery实现一个功能，即在选定的图片上绘制带有颜色的矩形框，以便用户可以标记或选择...
1. **初始化LCD**：在开始任何显示操作前，我们需要对LCD进行初始化，包括设置显示模式、清屏、设定光标位置等。 2. **定义矩形坐标**：确定矩形的左上角和右下角坐标，这将决定矩形的大小和位置。 3. **设置像素*...
本文将深入探讨如何在VC6环境下，利用MFC（Microsoft Foundation Classes）库实现单文档视图（CView类的派生类）上画矩形的功能。 首先，我们需要了解MFC中的CView类。CView是MFC应用程序框架的核心部分，它代表了...
在Android开发中，坐标画矩形是一项基本的图形绘制任务，尤其在进行用户交互或游戏开发时非常常见。本课程设计旨在教你如何通过输入坐标在Android应用的画布上绘制矩形，并且提供了Eclipse IDE作为开发环境。下面将...
为了根据鼠标的移动来画矩形，我们需要监听鼠标的相关事件，比如`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标抬起）。当`mousedown`事件触发时，记录下鼠标的起始位置，作为矩形的左上角坐标...
CustomSense继承QGraphicsScene，QGraphicsView，重写了鼠标事件，在CustomSense上添加图片并画矩形标记出特定区域，是专门满足这个需求写的小测试例子，使用Qt5实现。
在Java编程语言中，设计一个可以根据鼠标拖曳来画直线、矩形和圆的画图程序，涉及到的主要知识点包括Java图形用户界面（GUI）的构建、事件处理以及几何形状的绘制。下面将详细阐述这些核心内容。 1. Java GUI基础：...
在这个程序中，当用户按下鼠标左键或右键时，程序会在当前鼠标位置开始绘制相应的图形。 事件处理是程序的核心部分。在Windows程序中，所有的用户交互都以消息的形式存在，包括鼠标点击事件。我们需要定义窗口过程...
标题中的“很好用的截图软件，ctrl+shift+P”表明我们讨论的是一款截图工具，其快捷键是Ctrl+Shift+P。在Windows操作系统中，有很多截图软件可以选择，如常用的QQ截图、微信截图，以及系统自带的Snipping Tool或Snip...
1097：画矩形 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 21249 通过数: 12589 【题目描述】 根据参数，画出矩形。输入四个参数：前两个参数为整数，依次代表矩形的高和宽（高不少于3行不多于10行，宽不少于5列...
LabVIEW通过视觉控件画矩形。通过载入一副图片，IMAQ Overlay rectangle 控件，叠加一个矩形到目标位置。 可以实现位置选定。