利用svg实现画线

概述：在svg中画一矩形用来当作用户画图区域，利用四个Test元素（选择起始点、选择终止点、画线、清空）的click事件依次实现相应的功能。利用Group元素实现画图节点的填充容器。
（一）svg文件说明
1，画rect代码

2，画text代码

<text transform="matrix(1 0 0 1 61.1379 266.7664)" font-family="'SimSun'" font-size="21" onclick="selectedStart()">选择起始点</text>

<text transform="matrix(1 0 0 1 212.1379 267.7664)" font-family="'SimSun'" font-size="21" onclick="selectedEnd()">选择终止点</text>

3，group节点代码

</g>

4，引用外部lib1.js文件
<script language="JavaScript" xlink:href="lib1.js"></script>
（二）脚本文件
1,圆类

/**//****************************************************************************

画园类

*****************************************************************************/

function SvgCircle(x,y,r,color,width)

{

this.x=x;

this.y=y;

this.r=r;

this.color=color;

this.width=width;

this.DrawCircle=DrawCircle;

}

function DrawCircle()

{

var circle=document.createElement("circle");

circle.setAttribute("cx",this.x);

circle.setAttribute("cy", this.y);

circle.setAttribute("r",this.r);

circle.getStyle().setProperty("stroke",this.color);

circle.getStyle().setProperty("stroke-width",this.width);

return circle;

}

/**//****************************************************************************

画园类

*****************************************************************************/

2，线类

/**//****************************************************************************

画线类

*****************************************************************************/

function SvgLine(x1,y1,x2,y2,linecolor,linewidth)

{

this.x1=x1;

this.y1=y1;

this.x2=x2;

this.y2=y2;

this.linecolor=linecolor;

this.linewidth=linewidth;

this.DrawLine=DrawLine;

}

function DrawLine()

{

// var target = get_target(evt);

// var svgdoc = target.getOwnerDocument();

var line=document.createElement("line");

line.setAttribute("x1",this.x1);

line.setAttribute("y1", this.y1);

line.setAttribute("x2", this.x2);

line.setAttribute("y2", this.y2);

line.getStyle().setProperty("stroke",this.linecolor);

line.getStyle().setProperty("fill",this.linecolor);

line.getStyle().setProperty("stroke-width",this.linewidth);

return line;

}

/**//****************************************************************************

画线类

*****************************************************************************/

3，事件

var start=false;

var end=false;

var sx;

var sy;

var endx;

var endy;

/**//****************************************************************************

事件

*****************************************************************************/

function selectedStart()

{

start=true;

}

function selectedEnd()

{

end=true;

}

function DrawSvgCircle(evt)

{

if(start)

{

sx = evt.getClientX();

sy= evt.getClientY();

var c1=new SvgCircle(sx,sy,"2","red","2");

var circle=c1.DrawCircle();

var group=document.getElementById("g5");

group.appendChild(circle);

// document.getDocumentElement().appendChild(group);

start=false;

}

if(end)

{

endx = evt.getClientX();

endy= evt.getClientY();

var c1=new SvgCircle(endx,endy,"2","red","2");

var circle=c1.DrawCircle();

var group=document.getElementById("g5");

group.appendChild(circle);

//document.getDocumentElement().appendChild(group);

end=false;

}

function drawline()

{

var l=new SvgLine(sx,sy,endx,endy,"red","2");

var line=l.DrawLine();

var group=document.getElementById("g5");

group.appendChild(line);

// document.getDocumentElement().appendChild(group);

}

function cancle()

{

var group=document.getElementById("g5");

for(var i=0;i<group.childNodes.length;i++)

{

group.removeChild(group.childNodes.item(i));

}

//var lines=group.getElementsByTagName("line");

// var circles=group.getElementsByTagName("circle");

/**//*for(var i=0;i<lines.length;i++)

{

group.removeChild(lines.item(i));

}

for(var i=0;i<circles.length;i++)

{

group.removeChild(circles.item(i));

}*/

}

总结：
1，不足：没有实现在text元素上鼠标变形；在刷屏时不能全部清空所画对象，谁能够实现请指教
2，继续学习DOM
全部源码

posted on 2007-04-16 17:26 老狼阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/MuYi/archive/2007/04/16/715610.html