请教一下用鼠标如何在网页上画出矩形框。要求能从右往左画。

var LineColor="#000000";var LineWidth=3;
先先看看这个三角形
var ArrowHeadWidth=5;var ArrowHeadAngle=15/180*Math.PI;//弧度var ArrowBegin=true;var ArrowEnd=true; this.setArrowWidth = function(x)    {        ArrowHeadWidth = x;    }        this.setArrowAngle = function(x)    {        x=x>90?45:x;        x=x<0?45:x;        ArrowHeadAngle = x*Math.PI/180;    }        this.setLineWidth = function(x)    {        LineWidth=x;    }        this.setLineColor = function(x)    {        LineColor=x;    }        this.setArrowBegin = function(x)    {        ArrowBegin=x;    }        this.setArrowEnd = function(x)    {        ArrowEnd=x;    }              this.drawArrowHeadLine = function(beginX,beginY,endX,endY)       {           this.setColor(LineColor);         this.setStroke(LineWidth);                   var dx,dy;            dx=Math.abs(beginX-endX);        dy=Math.abs(beginY-endY);                var LineSlope;                     LineSlope=Math.atan(dx/dy);               
        var tmpLine;                tmpLine=(LineWidth+ArrowHeadWidth)/(2*Math.sin(ArrowHeadAngle));                        var BeginCenterX;        var BeginCenterY;                  var EndCenterX;        var EndCenterY;                        if(ArrowBegin)        {       
        //Begin                                    BeginCenterX=beginX+tmpLine*Math.sin(LineSlope);            BeginCenterY=beginY+tmpLine*Math.cos(LineSlope);                        
            var BeginX1,BeginY1;            var BeginX2,BeginY2;            var BeginX3,BeginY3;                        BeginX1=beginX;            BeginY1=beginY;                                        BeginX2=beginX-tmpLine*Math.sin(ArrowHeadAngle-LineSlope);            BeginY2=beginY+tmpLine*Math.cos(ArrowHeadAngle-LineSlope);                        BeginX3=beginX+tmpLine*Math.sin(ArrowHeadAngle+LineSlope);            BeginY3=beginY+tmpLine*Math.cos(ArrowHeadAngle+LineSlope);                                var XBeginpoints = new Array(BeginX1,BeginX2,BeginX3);            var YBeginpoints = new Array(BeginY1,BeginY2,BeginY3);            this.fillPolygon(XBeginpoints, YBeginpoints);                                            //End        }        else        {            BeginCenterX=beginX;            BeginCenterY=beginY;        }                        if(ArrowEnd)        {      
        //Begin                                   EndCenterX=endX-tmpLine*Math.sin(LineSlope);            EndCenterY=endY-tmpLine*Math.cos(LineSlope);                                    
            var EndX1,EndY1;            var EndX2,EndY2;            var EndX3,EndY3;                        EndX1=endX;            EndY1=endY;                        EndX2=endX-tmpLine*Math.sin(ArrowHeadAngle+LineSlope);            EndY2=endY-tmpLine*Math.cos(ArrowHeadAngle+LineSlope);                        EndX3=endX+tmpLine*Math.sin(ArrowHeadAngle-LineSlope);            EndY3=endY-tmpLine*Math.cos(ArrowHeadAngle-LineSlope);                                var XEndpoints = new Array(EndX1,EndX2,EndX3);            var YEndpoints = new Array(EndY1,EndY2,EndY3);            this.fillPolygon(XEndpoints, YEndpoints);                //End        }        else        {            EndCenterX=endX;            EndCenterY=endY;        }                
        this.drawLine(BeginCenterX,BeginCenterY,EndCenterX,EndCenterY);        }              this.drawFlowLine = function(beginX,beginY,endX,endY,beginText,endText)       {           var TextX;           var TextY;                      this.drawArrowHeadLine(beginX,beginY,endX,endY);                      TextX=beginX+20;           TextY=beginY;           this.drawString(beginText,TextX,TextY);       }
测试代码：<HTML>    <HEAD>        <title>DHTML _JavaScript Tooltips</title>                                                          var jg = new jsGraphics();               jg.setArrowWidth(4);              jg.setArrowAngle(20);              jg.setLineWidth(2);              jg.setLineColor("Blue");                       jg.drawFlowLine(10,10,200,200,"Line1");               jg.setLineColor("Red");              jg.setArrowBegin(false);              jg.drawFlowLine(110,10,300,200,"Line2","End");               jg.setLineColor("Green");              jg.setArrowBegin(true);              jg.setArrowEnd(false);              jg.drawFlowLine(210,10,400,200,"","Line3");               jg.setArrowEnd(true);              jg.setArrowAngle(15);              jg.drawFlowLine(310,10,500,200,"","Line4");               jg.setArrowAngle(30);              jg.drawFlowLine(410,10,600,200,"","Line5");                                          jg.setLineWidth(10)              jg.drawFlowLine(410,10,600,200,"","Line5");               jg.setStroke(10)              jg.drawLine(10,300,400,500);               jg.paint();        </script>        <meta http-equiv="expires" content="0">            </HEAD>    <body>    </body>〈/html>

解决方案 »

  1.   

    上面那段代码里有很多错误,不能运行.这是我找到的答案<html>
    <head>
    <title> 鼠标选取框 </title>
    <script language="JavaScript">
    var x0;
    var y0;
    var select=false;function document.onmousedown()
    {
        x0=document.body.scrollLeft+event.clientX;// 鼠标起始横坐标
        y0=document.body.scrollTop+event.clientY;// 鼠标起始纵坐标
        select=true;
    }function document.onmouseup()
    {
        select=false;
    }function document.onselectstart()
    {
        return false;
    }function document.ondrag()
    {
        return false;
    }function document.onmousemove()
    {
        if (select)
        {
            dd.style.display='';// 如果鼠标已经正确移动，将层设置为可视。
            if(document.body.scrollLeft+event.clientX-x0>0) // 从左向右
            {
                dd.style.left=x0;
                dd.style.width=document.body.scrollLeft+event.clientX-x0;
            }
            else // 从右向左
            {
                dd.style.left=document.body.scrollLeft+event.clientX;
                dd.style.width=x0-(document.body.scrollLeft+event.clientX);
            }
            if (document.body.scrollTop+event.clientY-y0>0)// 从上向下
            {
                dd.style.top=y0;
                dd.style.height=document.body.scrollTop+event.clientY-y0;
            }
            else// 从下向上
            {
                dd.style.top=document.body.scrollTop+event.clientY;
                dd.style.height=y0-(document.body.scrollTop+event.clientY);
            }
        }
    }
    </script>
    </head><body>
    <table id="dd" style="position:absolute; width:0px; height:0px; z-index:99; border:1px black dashed; display:none;"><tr><td></td></tr></table>
    </body>
    </html>
      

  2.   

    <html>
    <head>
    <title> 鼠标选取框 </title>
    <script language="JavaScript">
    var x0;
    var y0;
    var select=false;function document.onmousedown()
    {
        x0=document.body.scrollLeft+event.clientX;// 鼠标起始横坐标
        y0=document.body.scrollTop+event.clientY;// 鼠标起始纵坐标
        select=true;
    }function document.onmouseup()
    {
        select=false;
    }function document.onselectstart()
    {
        return false;
    }function document.ondrag()
    {
        return false;
    }function document.onmousemove()
    {
        if (select)
        {
            dd.style.display='';// 如果鼠标已经正确移动，将层设置为可视。
            if(document.body.scrollLeft+event.clientX-x0>0) // 从左向右
            {
        dd.style.display="none";
        return false;
            }
            else // 从右向左
            {
                dd.style.left=document.body.scrollLeft+event.clientX;
                dd.style.width=x0-(document.body.scrollLeft+event.clientX);
            }
            if (document.body.scrollTop+event.clientY-y0>0)// 从上向下
            {
                dd.style.top=y0;
                dd.style.height=document.body.scrollTop+event.clientY-y0;
            }
            else// 从下向上
            {
                dd.style.top=document.body.scrollTop+event.clientY;
                dd.style.height=y0-(document.body.scrollTop+event.clientY);
            }
        }
    }
    </script>
    </head>
    <body>
    <table id="dd" style="position:absolute; width:0px; height:0px; z-index:99; border:1px black dashed;display:none;"><tr><td></td></tr></table>
    </body>
    </html>
      

  3.   

    不用那么多代码吧，有10行够了。
    div style="border:1px solid #ff0000"div style="display:none"
    关键是这两个样式再扑抓event.x  和 event.y就可以了啊。
      

  4.   

    谢谢上一位hbzyduwu(鞋带又松了~) 的提醒