`
zhizedai
  • 浏览: 16794 次
  • 性别: Icon_minigender_1
  • 来自: 大连
最近访客 更多访客>>
社区版块
存档分类
最新评论

js 画矩形程序(可以画多个)(按下ctrl或者shift键clear all)

    博客分类:
  • js
阅读更多
<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>
分享到:
评论

相关推荐

    jspm心理健康系统演示录像2021.zip

    所有源码都有经过测试,可以运行,放心下载~

    【故障诊断】基于matlab金枪鱼算法优化双向时间卷积神经网络TSO-BiTCN轴承数据故障诊断【Matlab仿真 5087期】.zip

    CSDN Matlab研究室上传的资料均有对应的仿真结果图,仿真结果图均是完整代码运行得出,完整代码亲测可用,适合小白; 1、完整的代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描博客文章底部QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    Amanda:Amanda机器学习实践.docx

    Amanda:Amanda机器学习实践.docx

    数据集蛇数据集826张YOLO+VOC格式.zip

    数据集格式:VOC格式+YOLO格式 压缩包内含:3个文件夹,分别存储图片、xml、txt文件 JPEGImages文件夹中jpg图片总计:826 Annotations文件夹中xml文件总计:826 labels文件夹中txt文件总计:826 标签种类数:1 标签名称:["Snake"] 每个标签的框数: Snake 框数 = 1147 总框数:1147 图片清晰度(分辨率:像素):清晰 图片是否增强:否 标签形状:矩形框,用于目标检测识别 重要说明:暂无 特别声明:本数据集不对训练的模型或者权重文件精度作任何保证,数据集只提供准确且合理标注

    RCEP伙伴国技术性贸易壁垒对中国出口贸易的影响研究_刘主光.caj

    RCEP伙伴国技术性贸易壁垒对中国出口贸易的影响研究_刘主光.caj

    【光伏功率预测】基于matlab粒子群算法优化高斯过程回归PSO-GPR光伏功率预测(多输入单输出)【Matlab仿真 4373期】.zip

    【光伏功率预测】基于matlab粒子群算法优化高斯过程回归PSO-GPR光伏功率预测(多输入单输出)【Matlab仿真 4373期】

    【DELM回归预测】基于matlab蜂虎狩猎算法改进深度学习极限学习机BEH-DELM数据回归预测【Matlab仿真 3847期】.zip

    【DELM回归预测】基于matlab蜂虎狩猎算法改进深度学习极限学习机BEH-DELM数据回归预测【Matlab仿真 3847期】

    【BP回归预测】基于matlab多元宇宙算法优化BP神经网络MVO-BP光伏数据预测(多输入单输出)【Matlab仿真 5150期】.zip

    CSDN Matlab研究室上传的资料均有对应的仿真结果图,仿真结果图均是完整代码运行得出,完整代码亲测可用,适合小白; 1、完整的代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描博客文章底部QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    HNUST数据仓库与数据挖掘期末复习(自整理)

    内容概要:本文综述了数据挖掘技术的核心概念和技术,详细介绍了多种数据挖掘算法,包括关联规则挖掘算法(如Apriori、FP-tree),分类算法(如决策树的ID3/C4.5、K-NN、贝叶斯分类)和聚类算法(如K-均值、层次聚类和密度聚类)。此外,文档也探讨了KDD(知识发现过程)、聚类与分类的区别以及聚类分析算法的评估指标等关键议题。 使用场景及目标(期末突击):①理解和掌握数据挖掘的基本原理与常用算法;②应用于各种数据分析场景,如客户分群、推荐系统、市场篮子分析等。

    页面居中设置的process

    页面居中设置的process

    【光伏功率预测】基于matlab高斯过程回归GPR光伏功率预测【Matlab仿真 4372期】.zip

    【光伏功率预测】基于matlab高斯过程回归GPR光伏功率预测【Matlab仿真 4372期】

    BLE蓝牙单片机CC2540、CC2541带OSAL操作系统的例程-点亮LED灯.zip

    1、嵌入式物联网单片机项目开发例程,简单、方便、好用,节省开发时间。 2、代码使用IAR软件开发,当前在CC2540/CC2541上运行,如果是其他型号芯片,请自行调整。 3、软件下载时,请注意接上硬件,并确认烧录器连接正常。 4、有偿指导v:wulianjishu666; 5、如果接入其他传感器,请查看账号发布的其他资料。 6、单片机与模块的接线,在代码当中均有定义,请自行对照。 7、若硬件有差异,请根据自身情况调整代码,程序仅供参考学习。 8、代码有注释说明,请耐心阅读。

    【图像分割数据集】-芒果缺陷分割检测数据集3154张json格式.zip

    数据集格式:labelme格式(不包含mask文件,仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数):3154 标注数量(json文件个数):3154 标注类别数:7 标注类别名称:["Healthy-mango","Damaged-mango","Anthracnose","Bacterial-Black-spot","Others","Fruitly","Mechanical-damage"] 每个类别标注的框数: Healthy-mango count = 603 Damaged-mango count = 4419 Anthracnose count = 2840 Bacterial-Black-spot count = 831 Others count = 485 Fruitly count = 2469 Mechanical-damage count = 33 使用标注工具:labelme=5.5.0 标注规则:对类别进行画多边形框polygon 重要说明:可以将数据集用labelme打开编辑,json数据集需自己转成mask或者yolo格式或者coco

    Ventoy是一款开源工具,专门用于制作可启动U盘

    一、主要功能 Ventoy能够支持在同一个U盘上存储多个不同的操作系统镜像,并在启动时提供选择菜单,方便用户选择要启动的操作系统。它无需反复格式化U盘,只需将ISO、WIM、IMG、VHD(x)、EFI等类型的文件拷贝到U盘里面就可以启动了,无需其他操作。同时,Ventoy还支持大部分常见类型的操作系统,如Windows、Linux、Unix、VMware、Xen等。 二、使用优势 便捷性:使用Ventoy制作启动盘非常简单,用户只需将U盘插入电脑,运行Ventoy安装程序,按照提示操作即可完成启动盘的创建。此外,Ventoy支持一次性拷贝多个不同类型的镜像文件,并在启动时显示一个菜单供用户选择,大大提高了使用的便捷性。 多系统支持:Ventoy能够支持几乎所有主流的操作系统,满足用户在操作系统选择和使用上的灵活性需求。 快速启动:Ventoy在启动时能够快速加载操作系统选择菜单,减少了用户的等待时间,提高了工作效率。 更新与维护:Ventoy项目保持活跃的更新,开发者不断修复漏洞、优化性能,并增加对新操作系统和硬件的支持。

    基于java的医院库存管理系统源代码(完整前后端+mysql+说明文档+LW).zip

    管理员模块: 系统管理员管理:管理系统管理员的账户和权限。 药品类别管理:管理药品的分类信息。 药品信息管理:管理药品的详细信息,如名称、规格、价格等。 药品供应商管理:管理药品供应商的信息。 员工信息管理:管理医院员工的资料和信息。 药品出库管理:管理药品出库的流程和记录。 药品销量查询统计:查询和统计药品的销售情况。 员工模块: 员工资料修改:员工可以修改自己的个人信息。 药品销售登记:员工记录药品的销售情况。 出库信息查询:员工查询药品出库的相关信息。 环境说明: 开发语言:Java,jsp JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea 部署容器:tomcat

    【ELM回归预测】基于matlab人工兔算法优化极限学习机ARO-ELM数据回归预测【Matlab仿真 3834期】.zip

    【ELM回归预测】基于matlab人工兔算法优化极限学习机ARO-ELM数据回归预测【Matlab仿真 3834期】

    BLE蓝牙单片机CC2540、CC2541带OSAL操作系统的例程-五向按键.zip

    1、嵌入式物联网单片机项目开发例程,简单、方便、好用,节省开发时间。 2、代码使用IAR软件开发,当前在CC2540/CC2541上运行,如果是其他型号芯片,请自行调整。 3、软件下载时,请注意接上硬件,并确认烧录器连接正常。 4、有偿指导v:wulianjishu666; 5、如果接入其他传感器,请查看账号发布的其他资料。 6、单片机与模块的接线,在代码当中均有定义,请自行对照。 7、若硬件有差异,请根据自身情况调整代码,程序仅供参考学习。 8、代码有注释说明,请耐心阅读。

    Comsol含色散材料光子晶体能带求解 包含一维光子晶体和二维光子晶体 共十余个mph文件,包含多个技巧

    Comsol含色散材料光子晶体能带求解。 包含一维光子晶体和二维光子晶体。 共十余个mph文件,包含多个技巧。

    【风电功率预测】基于matlab ARIMA结合支持向量机SVM风电功率预测【Matlab仿真 4571期】.zip

    【风电功率预测】基于matlab ARIMA结合支持向量机SVM风电功率预测【Matlab仿真 4571期】

    【ESN回归预测】基于matlab粒子群算法优化回声状态网络PSO-ESN数据回归预测【Matlab仿真 4383期】.zip

    【ESN回归预测】基于matlab粒子群算法优化回声状态网络PSO-ESN数据回归预测【Matlab仿真 4383期】

Global site tag (gtag.js) - Google Analytics