<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>
分享到：
相关推荐
NULL 博文链接：https://kukuyang.iteye.com/blog/645737
解压后，用VS6.0打开工作区，找到解压文件，选择0510，双击，运行。
易语言API画矩形源码,API画矩形,设置刷子颜色,取对象句柄_,设置画笔颜色,取设备场景_,释放设备场景_,画矩形_,删除对象_,DrawText,GetClientRect,选入设备场景_,画矩形边框_
CustomSense继承QGraphicsScene，QGraphicsView，重写了鼠标事件，在CustomSense上添加图片并画矩形标记出特定区域，是专门满足这个需求写的小测试例子，使用Qt5实现。
1097：画矩形 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 21249 通过数: 12589 【题目描述】 根据参数，画出矩形。输入四个参数：前两个参数为整数，依次代表矩形的高和宽（高不少于3行不多于10行，宽不少于5列...
C#中在picturebox中实时画矩形框
用画笔画矩形程序(VB6.0代码编写) 用画笔画矩形 QQ223857666勾月
这是一个简单的用Javascript画矩形的代码，用到鼠标相关事件。
CAD：excel 批量画矩形 把excel中的长、宽数据批量画到cad中
易语言画板模拟拖动矩形源码,画板模拟拖动矩形,子程序1,子程序2,刷新物体位置,点是否在矩形内
加载图片后，可在选择区域画框，并可以输出矩形框的位置信息
VB Line方法画矩形 VB Line方法画矩形 VB Line方法画矩形
android 程序 输入坐标保存后 可根据坐标在画布上 画出矩形.. Eclipise 课程设计用 有背景美化
LabVIEW通过视觉控件画矩形。通过载入一副图片，IMAQ Overlay rectangle 控件，叠加一个矩形到目标位置。 可以实现位置选定。
一个简单的利用C++MFC画矩形的程序，很容易懂的哦
C# 画图 画线条 画矩形 有两个窗体， 一个是画线条， 一个是画矩形 希望对大家有用
java图形工具源代码 设计一个可以根据鼠标的拖曳画直线，矩形，圆的画图程序。
Android开发摄像头SurfaceView预览 背景画图（矩形和圆形） 实现（双surfaceview，顶层画矩形框，底层预览视频）； UI:三个按钮 预览 摄像 图片保存，预览界面 可以显示（矩形和圆形等图画）
单片机 C语言 LCD12864画矩形 付仿真！
C#中在pictureBox1中实时画矩形框.