利用svg实现画线

利用svg实现画线

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

< rect  x ="0.137"  y ="-4.646"  onclick ="DrawSvgCircle(evt)"   fill ="#ADFF5F"  stroke ="#000000"  stroke-width ="0.7078"  stroke-linecap ="round"  stroke-linejoin ="round"  stroke-miterlimit ="500"  width ="594.566"  height ="247.729" />

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 >
< text  transform ="matrix(1 0 0 1 353.1375 266.7664)"  font-family ="'SimSun'"  font-size ="21"  onclick ="drawline()" > 画线 </ text >
< text  transform ="matrix(1 0 0 1 429.1375 265.7664)"  font-family ="'SimSun'"  font-size ="21"  onclick ="cancle()" > 清空 </ text >

3，group节点代码

< g  id ="g5" >
</ 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