您所在位置：主题：页面画矩形问题????
ztong
[专家分：10] 发布于 2006-06-14 14:52:00
我要实现在一个图片上,拖拽鼠标画出一个矩形,矩形显示在当前页面图片上,使用以下方法,哪位大侠帮忙解决一下?????????????????????
<script language="javascript">
var canmove=false;
var leftX=0,topY=0,newX=0,newY=0;
var color1="#ff0000";
function moveAble()
{
if(event.srcElement.id=="moveArea")
{
canmove=true;
leftX=(event.clientX);
topY=(event.clientY);
}
}
function moveDisable()
{
canmove=false;
if(event.srcElement.id=="moveArea")
{
drawRect(leftX,topY,newX,newY,color1,1,0);
var x1=0;
var x2=0;
var y1=0;
var y2=0;
var abig=129.45446777;
var asmall=112.60508354;
var bbig=41.04247511;
var bsmall=21.72495689;
if(leftX>=newX)
{
x1=newX;
x2=leftX;
}
else
{
x1=leftX;
x2=newX;
}
if(topY>=newY)
{
y1=newY;
y2=topY;
}
else
{
y1=topY;
y2=newY;
}
document.getElementById("north").innerText=(500-y1+137)*(bbig-bsmall)/500+bsmall;
document.getElementById("south").innerText=(500-y2+137)*(bbig-bsmall)/500+bsmall;
document.getElementById("west").innerText=(x1-55)*(abig-asmall)/500+asmall;
document.getElementById("east").innerText=(x2-55)*(abig-asmall)/500+asmall;
}
}
function move()
{
if(canmove)
{
if(event.srcElement.id=="moveArea")
{
// newX = (event.clientX + document.body.scrollLeft);
// newY = (event.clientY + document.body.scrollTop);
newX = (event.clientX);
newY = (event.clientY);
var string1="newX:"+newX+"newY:"+newY;
}
else
{
leftX=0;
topY=0;
newX = 0;
newY = 0;
}
event.returnValue = false;
}
}
function drawDot(x,y,color,size)
{
var string3="<table border='0' cellspacing=0 cellpadding=0><tr>";
string3+="<td style='position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+size+" height="+size+"></td></tr></table>";
// document.write(string3);
var string4="<div style='position:absolute;left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+size+" height="+size+"></div>";
document.getElementById("display1").innerHTML += string4;
???????????????????????????????????????????????????????????????????
??????????????????????????????????????????????????????????????????
??????????????????????????????????????????????????????????????????
虽然使用document.write(string3);可以实现网页图片上画一个矩形,但是矩形出现在一个新的页面上,我想当点击网页上一个图片时,在图片上画出一个矩形,矩形和图片都显示在当前页面上,但是使用document.getElementById("display1").innerHTML += string4;又没有正常的显示,如何实现我的想法呢?我认为修改应该在此处,但是不知道如何改
???????????????????????????????????????????
????????????????????????????????????????????????????????????????????????
?????????????????????????????????????????????????????????????????????????
}
function drawLine(x1,y1,x2,y2,color,size,style)
{
var i;
var r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));
var theta=Math.atan((x2-x1)/(y2-y1));
if((y2-y1)<0)
{
theta=Math.PI+theta;
}
var dx=Math.sin(theta);//alert(dx)?
var dy=Math.cos(theta);
for(i=0;i<r;i++)
{
switch(style)
{
case 0:
drawDot(x1+i*dx,y1+i*dy,color,size);
break;
case 1:
i+=size*2;
drawDot(x1+i*dx,y1+i*dy,color,size);
break;
case 2:
if(Math.floor(i/4/size)%2==0)
{
drawDot(x1+i*dx,y1+i*dy,color,size);
}
else
{
i+=size*2;
drawDot(x1+i*dx,y1+i*dy,color,size);
}
break;
default:
drawDot(x1+i*dx,y1+i*dy,color,size);
break;
}
}
}
function drawRect(x1,y1,x2,y2,color,size,style)
{
drawLine(x1,y1,x2,y1,color,size,style);
drawLine(x1,y2,x2,y2,color,size,style);
drawLine(x1,y1,x1,y2,color,size,style);
drawLine(x2,y1,x2,y2,color,size,style);
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server" onmouseup="moveDisable()" onmousemove="move()" onmousedown="moveAble()" >
<P id="display1"><IMG id="moveArea" src="Images\coastline.gif"></P>
</form>
</body>
</HTML>
<script language="javascript">
var canmove=false;
var leftX=0,topY=0,newX=0,newY=0;
var color1="#ff0000";
function moveAble()
{
if(event.srcElement.id=="moveArea")
{
canmove=true;
leftX=(event.clientX);
topY=(event.clientY);
}
}
function moveDisable()
{
canmove=false;
if(event.srcElement.id=="moveArea")
{
drawRect(leftX,topY,newX,newY,color1,1,0);
var x1=0;
var x2=0;
var y1=0;
var y2=0;
var abig=129.45446777;
var asmall=112.60508354;
var bbig=41.04247511;
var bsmall=21.72495689;
if(leftX>=newX)
{
x1=newX;
x2=leftX;
}
else
{
x1=leftX;
x2=newX;
}
if(topY>=newY)
{
y1=newY;
y2=topY;
}
else
{
y1=topY;
y2=newY;
}
document.getElementById("north").innerText=(500-y1+137)*(bbig-bsmall)/500+bsmall;
document.getElementById("south").innerText=(500-y2+137)*(bbig-bsmall)/500+bsmall;
document.getElementById("west").innerText=(x1-55)*(abig-asmall)/500+asmall;
document.getElementById("east").innerText=(x2-55)*(abig-asmall)/500+asmall;
}
}
function move()
{
if(canmove)
{
if(event.srcElement.id=="moveArea")
{
// newX = (event.clientX + document.body.scrollLeft);
// newY = (event.clientY + document.body.scrollTop);
newX = (event.clientX);
newY = (event.clientY);
var string1="newX:"+newX+"newY:"+newY;
}
else
{
leftX=0;
topY=0;
newX = 0;
newY = 0;
}
event.returnValue = false;
}
}
function drawDot(x,y,color,size)
{
var string3="<table border='0' cellspacing=0 cellpadding=0><tr>";
string3+="<td style='position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+size+" height="+size+"></td></tr></table>";
// document.write(string3);
var string4="<div style='position:absolute;left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+size+" height="+size+"></div>";
document.getElementById("display1").innerHTML += string4;
???????????????????????????????????????????????????????????????????
??????????????????????????????????????????????????????????????????
??????????????????????????????????????????????????????????????????
虽然使用document.write(string3);可以实现网页图片上画一个矩形,但是矩形出现在一个新的页面上,我想当点击网页上一个图片时,在图片上画出一个矩形,矩形和图片都显示在当前页面上,但是使用document.getElementById("display1").innerHTML += string4;又没有正常的显示,如何实现我的想法呢?我认为修改应该在此处,但是不知道如何改
???????????????????????????????????????????
????????????????????????????????????????????????????????????????????????
?????????????????????????????????????????????????????????????????????????
}
function drawLine(x1,y1,x2,y2,color,size,style)
{
var i;
var r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));
var theta=Math.atan((x2-x1)/(y2-y1));
if((y2-y1)<0)
{
theta=Math.PI+theta;
}
var dx=Math.sin(theta);//alert(dx)?
var dy=Math.cos(theta);
for(i=0;i<r;i++)
{
switch(style)
{
case 0:
drawDot(x1+i*dx,y1+i*dy,color,size);
break;
case 1:
i+=size*2;
drawDot(x1+i*dx,y1+i*dy,color,size);
break;
case 2:
if(Math.floor(i/4/size)%2==0)
{
drawDot(x1+i*dx,y1+i*dy,color,size);
}
else
{
i+=size*2;
drawDot(x1+i*dx,y1+i*dy,color,size);
}
break;
default:
drawDot(x1+i*dx,y1+i*dy,color,size);
break;
}
}
}
function drawRect(x1,y1,x2,y2,color,size,style)
{
drawLine(x1,y1,x2,y1,color,size,style);
drawLine(x1,y2,x2,y2,color,size,style);
drawLine(x1,y1,x1,y2,color,size,style);
drawLine(x2,y1,x2,y2,color,size,style);
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server" onmouseup="moveDisable()" onmousemove="move()" onmousedown="moveAble()" >
<P id="display1"><IMG id="moveArea" src="Images\coastline.gif"></P>
</form>
</body>
</HTML>