ajax想必程序员们都听说过,这个技术就是为了缓和服务器端压力和前台展示而推出的技术,实际上就是javascript和xml(DOM)组成的一个以浏览器为载体的前端客户端结构,他脱离了远程数据交互,减轻了频繁访问数据库并加强了,浏览器的能力在图形展示界面操作文件控制,都提供了很多支持,相信了解他的人都会非常喜欢他,有些人甚至认为,使用了这种技术可以使我们从复杂的mvc开发模式还原成客户端-服务器模式,所有业务逻辑全部都有前台处理。
好了废话我就不多说了,下面的代码是我做项目需要而被逼着写的(部分,有抄袭的几个方法)很好玩,基本上可以说,好好加工下能做个网络化图板。哈哈。
下面保存成todem_pic.js
function isRightKj(cKj)//判断是否当前页面元素
{
if(event.srcElement == cKj)
{
return true;
}
else
{
return false;
}
}
function empdrawRectangle(x0,y0,x1,y1,color)//圈选非填充矩形
{
var myrs = "";
myrs = drawLine(x0,y0,x0,y1,color)+
drawLine(x0,y0,x1,y0,color)+
drawLine(x1,y1,x1,y0,color)+
drawLine(x1,y1,x0,y1,color);
return myrs;
}
function drawLine(x0,y0,x1,y1,color)//画线
{
var rs = "";
if (y0 == y1)
{
if (x0>x1){var t=x0;x0=x1;x1=t}
rs = "<span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";height:1; width:"+Math.abs(x1-x0)+"'></span>";
}
else if (x0 == x1)
{
if (y0>y1){var t=y0;y0=y1;y1=t}
rs = "<span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";width:1;height:"+Math.abs(y1-y0)+"'></span>";
}
else
{
var lx = x1-x0
var ly = y1-y0
var l = Math.sqrt(lx*lx+ly*ly)
rs = new Array();
for (var i=0;i<l;i+=1)
{
var p = i/l;
var px = parseInt(x0 + lx*p);
var py = parseInt(y0 + ly*p);
rs[rs.length] = "<span style='top:"+py+";left:"+px+";height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"'></span>";
}
rs = rs.join("");
}
return rs
}
function drawRectangle(x0,y0,x1,y1,color)//填充矩形
{
if (x0 == x1 || y0 == y1) return;
if (x0>x1) {var t=x0;x0=x1;x1=t}
if (y0>y1) {var t=y0;y0=y1;y1=t}
return "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+"></td></table>";
}
function drawPie(x0,y0,radius,startAngle,endAngle,color)//填充柄图
{
var rs = drawArc(x0,y0,radius,startAngle,endAngle,color)
startAngle = startAngle/360*Math.PI*2;
endAngle = endAngle/360*Math.PI*2;
var startx=Math.sin(startAngle)*radius+x0;
var endx=Math.sin(endAngle)*radius+x0;
var starty=Math.cos(startAngle)*radius+y0;
var endy=Math.cos(endAngle)*radius+y0;
rs += drawLine(x0,y0,startx,starty,color)
rs += drawLine(x0,y0,endx,endy,color)
return rs;
}
function drawArc(x0,y0,radius,startAngle,endAngle,color)
{
rs = new Array();
tmpar = new Array();
startAngle = startAngle/360*Math.PI*2;
endAngle = endAngle/360*Math.PI*2;
for (var i=startAngle;i<endAngle;i+=(1/radius))
{
var dx = parseInt(Math.sin(i)*radius+x0);
var dy = parseInt(Math.cos(i)*radius+y0);
rs[rs.length] = "<span style='top:"+dy+";left:"+dx+";position:absolute;height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"'></span>";
}
return (rs.join(""));
}
function drawCurve()
{
var rs = new Array();
for (var i=0;i<2*Math.PI;i+=.01)
{
var x = parseInt(300-Math.sin(i)*100)
var y = parseInt(300-Math.cos(i)*100)
rs[rs.length] = "<span style='top:"+x+";left:"+(i*100+90)+" ;height:1;width:1;position:absolute;font-size:1px;background-color:blue'></span>";
rs[rs.length] = "<span style='top:"+y+";left:"+(i*100+90)+" ;height:1;width:1;position:absolute;font-size:1px;background-color:blue'></span>";
}
return rs.join("");
}
下面是html代码,名字你定,注意红色部分是图片路径,你要自己选一张画啊,~^_^~
<html>
<head>
<title>画长方形</title>
<script language="javascript" type="text/javascript" src="todem_pic.js"></script>
<script language="javascript" type="text/javascript">
var nsty,x0,x1,y0,y1;//页面必须参数
nsty = 0;
function setCoordinate(modt)//设置位区,modt的属性为down,up,move
{
var rs = "";
if(modt == "down")
{
if(isRightKj(div1))
{
x0 = event.offsetX;
y0 = event.offsetY;
nsty = 1;
tx1.value = x0.toString()+","+y0.toString();
}
else
{
return false;
}
}
else if((modt == "move")&&(nsty == 1))
{
if(isRightKj(div1))
{
x1 = event.offsetX;
y1 = event.offsetY;
rs = empdrawRectangle(x0,y0,x1,y1,"red");//(矩形左上x,y 右下x,y 颜色)
div1.innerHTML =rs;
}
else
{
return false;
}
tx1.value = x1.toString()+","+y1.toString();
}
else if(modt == "up")
{
nsty = 0;
tx1.value =x0.toString()+","+y0.toString()+","+ x1.toString()+","+y1.toString();
if(isRightKj(div1))
{
x1 = event.offsetX;
y1 = event.offsetY;
rs = empdrawRectangle(x0,y0,x1,y1,"red");//(矩形左上x,y 右下x,y 颜色)
div1.innerHTML =rs;
}
else
{
return false;
}
}
}
</script>
</head>
<body>
坐标显示:<input type="text" id="tx1">
<div id="div1" style="position:relative;height:250px;width:400px;background-image:url(file:///D|/娱乐/images/eva/eva1.jpg)" onMouseDown="setCoordinate('down');" onMouseUp="setCoordinate('up');" onMouseMove="setCoordinate('move');">111</div>
<div id="div2" style="position:relative;height:250px;width:400px;background-image:url(file:///D|/娱乐/images/eva/eva1.jpg)">222</div>
</body>
</html>
转自:http://hi.baidu.com/snjdju/blog/item/1a36bfb1dcef555a08230297.html