[求解]:关于“批选择”的实现方法，伙计们请进。。

lshdic 2005-03-11 06:17:01
COPY后运行 - 按主鼠标左键拖动，就知道我问什么了。


<HTML xmlns:v>
<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>
<BODY oncontextmenu='return false' onselectstart='return false'>
<v:rect class=keshi style=position:absolute;display:none;z-index:5000 id=rect1 fillcolor=#eeeeee>
<v:Stroke dashstyle="dashdot"/>
<v:fill opacity=".5"/>
</v:rect>
<script>
var xx=0,yy=0
function document.onmousedown(){
xx=event.x;yy=event.y;
rect1.style.left=xx;rect1.style.top=yy;rect1.style.width=0;rect1.style.height=0;rect1.style.display=""
}
function document.onmousemove(){
tempx=event.x;tempy=event.y
if(tempx-xx<0){rect1.style.left=tempx;rect1.style.width=(xx-tempx)}else{rect1.style.width=(tempx-xx)}
if(tempy-yy<0){rect1.style.top=tempy;rect1.style.height=(yy-tempy)}else{rect1.style.height=(tempy-yy)}
}
function document.onmouseup(){ //关键是该这一部分
alert("选定的所有对象（所有被灰色矩型边框触及、或遮住的）对象颜色变绿\n\nVML写法是obj[i].fillcolor='green'\n\n只是我得不到所有obj的对象集合、无法通过DHTML访问目标\n\n我目前的解决思路是“循环用document.elementFromPoint(x,y)方法，循环捕捉矩形区域内每一个像素（比如矩形大小300*200，就循环捕捉500个点阵下是否有对应的对象，最后在归总，将得到的对象存进可变的数组做为今后编程的引用）”。\n\n不过我感觉这比较麻烦，效率也不会太快吧。所以我想在埋头着手测试编写该程序前，想先问问大家，还有没有更好的、其他的办法？或者就用该方法但有效率很高的实例？或是DHTML的window、document、obj/this有专门的这类函数方法？\n\n记的幻宇的js星际online就有这种实现（选兵打仗、挖矿），但不知是用了什么办法哪？ - 最不爱干的事就是看一大堆的代码^-^\n\nGOGO，请高人闪亮登场 - “献码+解说”。")
rect1.style.display="none"
}
</script>









<!--以下代码无须理会-->
<v:oval id=vml8 style="Z-INDEX:3014;LEFT:329;WIDTH:25;POSITION:absolute;TOP:191;HEIGHT:26" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml9 style="Z-INDEX:3015;LEFT:380;WIDTH:72;POSITION:absolute;TOP:206;HEIGHT:42" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml10 style="Z-INDEX:3016;LEFT:389;WIDTH:46;POSITION:absolute;TOP:268;HEIGHT:27" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml11 style="Z-INDEX:3017;LEFT:344;WIDTH:33;POSITION:absolute;TOP:326;HEIGHT:36" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml12 style="Z-INDEX:3018;LEFT:221;WIDTH:36;POSITION:absolute;TOP:381;HEIGHT:51" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml13 style="Z-INDEX:3019;LEFT:338;WIDTH:82;POSITION:absolute;TOP:459;HEIGHT:39" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml14 style="Z-INDEX:3020;LEFT:527;WIDTH:43;POSITION:absolute;TOP:215;HEIGHT:50" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml15 style="Z-INDEX:3021;LEFT:504;WIDTH:54;POSITION:absolute;TOP:294;HEIGHT:51" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml16 style="Z-INDEX:3022;LEFT:644;WIDTH:104;POSITION:absolute;TOP:101;HEIGHT:57" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml17 style="Z-INDEX:3023;LEFT:687;WIDTH:65;POSITION:absolute;TOP:262;HEIGHT:34" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml18 style="Z-INDEX:3024;LEFT:565;WIDTH:63;POSITION:absolute;TOP:356;HEIGHT:76" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml19 style="Z-INDEX:3025;LEFT:658;WIDTH:104;POSITION:absolute;TOP:391;HEIGHT:77" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml20 style="Z-INDEX:3026;LEFT:359;WIDTH:24;POSITION:absolute;TOP:265;HEIGHT:28" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml21 style="Z-INDEX:3027;LEFT:570;WIDTH:41;POSITION:absolute;TOP:141;HEIGHT:51" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml22 style="Z-INDEX:3028;LEFT:507;WIDTH:48;POSITION:absolute;TOP:194;HEIGHT:40" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
...全文
144 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
lshdic 2005-04-22
  • 打赏
  • 举报
 回复
UP，谁还有更简便的方法吗？
lshdic 2005-03-15
  • 打赏
  • 举报
 回复
如果没走错，这里是JS论坛。
期待高手、有这类代码收藏的朋友回贴共享代码，找到代码最简、效率最高的实现方法或者其他不同于我的代码/思路，如果没有，部分给ttyp，其他分不知送谁了：）
honghe1 2005-03-14
  • 打赏
  • 举报
 回复
你所做的工作我不擅长,我只懂简单的javaScrip.

其实你的这个工作,如果是在VC++里边的话,根本一点都不复杂的.
erplab 2005-03-12
  • 打赏
  • 举报
 回复
惊人的思想阿
lshdic 2005-03-12
  • 打赏
  • 举报
 回复
方法二：使用ttyp的思路完成内部，外围还是需要document.elementFromPoint(x,y)，折腾了近一个小时完成。

<HTML xmlns:v>
<Meta name='Gemeratpr' content='网络程序员伴侣(Lshdic)2005'>
<TITLE>区域选择第二种实现方法演示</TITLE>
<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>
<BODY oncontextmenu='return false' onselectstart='return false'>
<v:rect class=keshi style=position:absolute;display:none;z-index:5000 id=rect1 fillcolor=#eeeeee><v:Stroke dashstyle="dashdot"/><v:fill opacity=".5"/></v:rect>
<script>
/*区域选择第二种实现方法演示(效率高，但编写复杂)
作者:沐缘华(原名:风云舞)
msn:lshdic@sina.com
Q:21152530
转载请保留*/
var xx=0,yy=0
function document.onmousedown(){
xx=event.x;yy=event.y;
rect1.style.left=xx;rect1.style.top=yy;rect1.style.width=0;rect1.style.height=0;rect1.style.display=""
}
function document.onmousemove(){
tempx=event.x;tempy=event.y
if(tempx-xx<0){rect1.style.left=tempx;rect1.style.width=(xx-tempx)}else{rect1.style.width=(tempx-xx)}
if(tempy-yy<0){rect1.style.top=tempy;rect1.style.height=(yy-tempy)}else{rect1.style.height=(tempy-yy)}
}
function document.onmouseup(){ //关键算法在这里
rect1.style.display="none"
var left1=parseInt(rect1.style.left),top1=parseInt(rect1.style.top)
var width1=parseInt(rect1.style.width),height1=parseInt(rect1.style.height)
var randomcolor='rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')'
var objs=[],youbiao=-1,tempx=[],notag="BODY"
for(i=0;i<document.body.children.length;i++){
objs[i]=document.body.children[i]
tempx[0]=parseInt(objs[i].style.left);tempx[1]=parseInt(objs[i].style.top)
tempx[2]=parseInt(objs[i].style.width);tempx[3]=parseInt(objs[i].style.height)
//改变所有包围的元素
if(tempx[0]>left1&&tempx[1]>top1&&tempx[0]+tempx[2]<left1+width1&&tempx[1]+tempx[3]<top1+height1){objs[i].fillcolor=randomcolor;continue;}
}
var jingquedu=3 //精确度3px:该值越低，越精确，但越慢，推荐范围1-10……
for(r=left1;r<left1+width1;r+=jingquedu){
var tempobj=document.elementFromPoint(r,top1) //周边（上条线）触及
if(tempobj.tagName!=notag){if(objs[youbiao]!=tempobj){youbiao++;objs[youbiao]=tempobj;tempobj.style.display="none"}}
var tempobj=document.elementFromPoint(r,top1+height1) //周边（下条线）触及
if(tempobj.tagName!=notag){if(objs[youbiao]!=tempobj){youbiao++;objs[youbiao]=tempobj;tempobj.style.display="none"}}
}
for(i=top1;i<top1+height1;i+=jingquedu){
var tempobj=document.elementFromPoint(left1,i) //周边（左条线）触及
if(tempobj.tagName!=notag){if(objs[youbiao]!=tempobj){youbiao++;objs[youbiao]=tempobj;tempobj.style.display="none"}}
var tempobj=document.elementFromPoint(left1+width1,i) //周边（右条线）触及
if(tempobj.tagName!=notag){if(objs[youbiao]!=tempobj){youbiao++;objs[youbiao]=tempobj;tempobj.style.display="none"}}
}
for(i=0;i<youbiao+1;i++){objs[i].style.display="";objs[i].fillcolor=randomcolor;}
}
</script>


<!--以下代码输出基础形状-->
<v:oval id=vml8 style="Z-INDEX:3014;LEFT:329;WIDTH:25;POSITION:absolute;TOP:191;HEIGHT:26" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml9 style="Z-INDEX:3015;LEFT:380;WIDTH:72;POSITION:absolute;TOP:206;HEIGHT:42" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml10 style="Z-INDEX:3016;LEFT:389;WIDTH:46;POSITION:absolute;TOP:268;HEIGHT:27" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml11 style="Z-INDEX:3017;LEFT:344;WIDTH:33;POSITION:absolute;TOP:326;HEIGHT:36" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml12 style="Z-INDEX:3018;LEFT:221;WIDTH:36;POSITION:absolute;TOP:381;HEIGHT:51" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml13 style="Z-INDEX:3019;LEFT:338;WIDTH:82;POSITION:absolute;TOP:459;HEIGHT:39" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml14 style="Z-INDEX:3020;LEFT:527;WIDTH:43;POSITION:absolute;TOP:215;HEIGHT:50" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml15 style="Z-INDEX:3021;LEFT:504;WIDTH:54;POSITION:absolute;TOP:294;HEIGHT:51" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml16 style="Z-INDEX:3022;LEFT:644;WIDTH:104;POSITION:absolute;TOP:101;HEIGHT:57" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml17 style="Z-INDEX:3023;LEFT:687;WIDTH:65;POSITION:absolute;TOP:262;HEIGHT:34" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml18 style="Z-INDEX:3024;LEFT:565;WIDTH:63;POSITION:absolute;TOP:356;HEIGHT:76" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml19 style="Z-INDEX:3025;LEFT:658;WIDTH:104;POSITION:absolute;TOP:391;HEIGHT:77" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml20 style="Z-INDEX:3026;LEFT:359;WIDTH:24;POSITION:absolute;TOP:265;HEIGHT:28" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml21 style="Z-INDEX:3027;LEFT:570;WIDTH:41;POSITION:absolute;TOP:141;HEIGHT:51" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml22 style="Z-INDEX:3028;LEFT:507;WIDTH:48;POSITION:absolute;TOP:194;HEIGHT:40" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
lshdic 2005-03-12
  • 打赏
  • 举报
 回复
好了，不能光当言论家、要实践，没人献码？我来：）

方法一：

<HTML xmlns:v>
<Meta name='Gemeratpr' content='网络程序员伴侣(Lshdic)2005'>
<TITLE>区域选择第一种实现方法演示</TITLE>
<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>
<BODY oncontextmenu='return false' onselectstart='return false'>
<v:rect class=keshi style=position:absolute;display:none;z-index:5000 id=rect1 fillcolor=#eeeeee><v:Stroke dashstyle="dashdot"/><v:fill opacity=".5"/></v:rect>
<script>
/*区域选择第一种实现方法演示(效率一般，但编写稍简)
作者:沐缘华(原名:风云舞)
msn:lshdic@sina.com
Q:21152530
转载请保留*/
var xx=0,yy=0
function document.onmousedown(){
xx=event.x;yy=event.y;
rect1.style.left=xx;rect1.style.top=yy;rect1.style.width=0;rect1.style.height=0;rect1.style.display=""
}
function document.onmousemove(){
tempx=event.x;tempy=event.y
if(tempx-xx<0){rect1.style.left=tempx;rect1.style.width=(xx-tempx)}else{rect1.style.width=(tempx-xx)}
if(tempy-yy<0){rect1.style.top=tempy;rect1.style.height=(yy-tempy)}else{rect1.style.height=(tempy-yy)}
}
function document.onmouseup(){ //关键算法在这里
rect1.style.display="none"
var left1=parseInt(rect1.style.left),top1=parseInt(rect1.style.top)
var width1=parseInt(rect1.style.width),height1=parseInt(rect1.style.height)
var objs=[],notag="BODY",youbiao=-1
var text1="",randomcolor='rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')'
var jingquedu=10 //精确度10px:该值越低，越精确，但越慢，推荐范围3-15……
for(r=left1;r<left1+width1;r+=jingquedu){
for(i=top1;i<top1+height1;i+=jingquedu){
var tempobj=document.elementFromPoint(r,i)
if(tempobj.tagName!=notag){
if(objs[youbiao]!=tempobj){youbiao++;objs[youbiao]=tempobj;tempobj.style.display="none"}
}
}}
for(i=0;i<youbiao+1;i++){objs[i].style.display="";objs[i].fillcolor=randomcolor;text1+=(objs[i].id+",");}
alert("共选择:"+(youbiao+1)+"个对象\n\n"+text1.substr(0,text1.length-1))
}
</script>


<!--以下代码输出基础形状-->
<v:oval id=vml8 style="Z-INDEX:3014;LEFT:329;WIDTH:25;POSITION:absolute;TOP:191;HEIGHT:26" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml9 style="Z-INDEX:3015;LEFT:380;WIDTH:72;POSITION:absolute;TOP:206;HEIGHT:42" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml10 style="Z-INDEX:3016;LEFT:389;WIDTH:46;POSITION:absolute;TOP:268;HEIGHT:27" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml11 style="Z-INDEX:3017;LEFT:344;WIDTH:33;POSITION:absolute;TOP:326;HEIGHT:36" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml12 style="Z-INDEX:3018;LEFT:221;WIDTH:36;POSITION:absolute;TOP:381;HEIGHT:51" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml13 style="Z-INDEX:3019;LEFT:338;WIDTH:82;POSITION:absolute;TOP:459;HEIGHT:39" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml14 style="Z-INDEX:3020;LEFT:527;WIDTH:43;POSITION:absolute;TOP:215;HEIGHT:50" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml15 style="Z-INDEX:3021;LEFT:504;WIDTH:54;POSITION:absolute;TOP:294;HEIGHT:51" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml16 style="Z-INDEX:3022;LEFT:644;WIDTH:104;POSITION:absolute;TOP:101;HEIGHT:57" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:oval id=vml17 style="Z-INDEX:3023;LEFT:687;WIDTH:65;POSITION:absolute;TOP:262;HEIGHT:34" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml18 style="Z-INDEX:3024;LEFT:565;WIDTH:63;POSITION:absolute;TOP:356;HEIGHT:76" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml19 style="Z-INDEX:3025;LEFT:658;WIDTH:104;POSITION:absolute;TOP:391;HEIGHT:77" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml20 style="Z-INDEX:3026;LEFT:359;WIDTH:24;POSITION:absolute;TOP:265;HEIGHT:28" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml21 style="Z-INDEX:3027;LEFT:570;WIDTH:41;POSITION:absolute;TOP:141;HEIGHT:51" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
<v:rect id=vml22 style="Z-INDEX:3028;LEFT:507;WIDTH:48;POSITION:absolute;TOP:194;HEIGHT:40" fillcolor="#fd434d" strokecolor="black" strokeweight="1px"/>
yjlztx95 2005-03-12
  • 打赏
  • 举报
 回复
凑个热闹
lshdic 2005-03-11
  • 打赏
  • 举报
 回复
都是可行的高论，期待有人实践实践：）

先下了，改天来送码+结分
ttyp 2005-03-11
  • 打赏
  • 举报
 回复
不错，两个都判断的好，尤其是绘制图象为不规则图形时，判断选区顶点在绘制区内很好
honghe1 2005-03-11
  • 打赏
  • 举报
 回复
也或者可以这样理解,选取区域为A,绘制对象为B,如果B的一个边界点如果在A内则认为选中,同时反过来,如果A的一个边界点如果在B内,我们也可以认为B为选中.

这样遍历收集绘制对象数组,都做两个判断,这样是不是会更快一些呢?
honghe1 2005-03-11
  • 打赏
  • 举报
 回复
我的思路,你绘制的对象你可以预先收集到一个数组中,方便以后遍历使用.

重新定义你的选择规则:-----选区一定要完全覆盖对象,即:对象完全包含在区域里边的对象才被认为是选中了.

这样一来:算法就简单了:遍历每一个对象,从中找出4个值(最上最下最左最右),看是不是都在选区的范围内(必须都满足),如果满足的话,把这个对象加入到一个临时数组中,过后处理.

在实际选取对象过程中,这个算法也没有给用户带来多大的麻烦,习惯了就好了.
ttyp 2005-03-11
  • 打赏
  • 举报
 回复
在判断顶点在不在范围时，objLeft>selRight||objRight<selLeft||objTop>selBottom||objBottom<selTop
则直接可以不判断
lshdic 2005-03-11
  • 打赏
  • 举报
 回复
……，好方法，这样在用document.elementFromPoint(x,y)就减少了许多次循环，比我以前想的要高明：）

同志们请继续
lawyu 2005-03-11
  • 打赏
  • 举报
 回复
学习，研究中..
ttyp 2005-03-11
  • 打赏
  • 举报
 回复
那你取得document的所有对象，取得对象的left,top,right,bottom四个顶点,计算只要一个点在选的矩形内则选中
lshdic 2005-03-11
  • 打赏
  • 举报
 回复
什么形状不要紧的（其实我们看三角型、曲线、直线等好象体积不规则很小，但实际上其X，Y，WIDTH，HEIGHT就是一个“隐性矩形”，是一个很大的面积，可以用document.elementFromPoint(x,y)捕捉的，哪怕XY交接点触及不到“我们可见”的图形）

请CSDN高手参与讨论，用最好的办法实现该功能。
ttyp 2005-03-11
  • 打赏
  • 举报
 回复
被选的是规则形状么？如长方形
如果是长方形还比较好办，算出他们的坐标，比较下就好了
matlab常微分方程求解
matlab常微分方程求解，通过编程实战掌握具体应用。包括matlab常微分方程求解前、matlab常微分方程求解中、matlab常微分方程求解后。
【动态规划】：泰波那契模型_解码方法
动态规划思想求解LeetCode91.解码方法
ONLYOFFICE：一个免费、开源、跨平台的办公神器
一面项目介绍 优化点如何实现的 优化了多少性能c++11的新特性右值引用是做什么的指针和引用的区别引用折叠和完美转发（不知道）编译的过程如果让你增加一个c++的百度提前批一面g 投的晚了，面试流程没走完，直接...
c/c++笔试题
编程，请实现一个c语言中类似atoi的函数功能（输入可能包含非数字和空格）   百度笔试题   一、选择题：15分 共10题 1.  在排序方法中，关键码比较次数与记录地初始排列无关的是  . A. Shell...
【24届】泰康人寿2024年全球校园招聘正式启动！
#机械制造2024笔面经# 本硕211，投的传感器结构设计，一开始是自我介绍，然后是项目经历，问项目中的难点及如何解决，专业问题很少，然后就是关于加班的看法，个。努力苦心，求内推，辛。蓝月亮，宁德时代，顺丰，得...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章