热点排行

在页面上动态定义节点(html控件)、拖动、以及节点连线

类别：.NET开发 点击：0 评论：0 推荐：

◆页面（draw3.aspx）
<%@ Page language="c#" Codebehind="draw3.aspx.cs" AutoEventWireup="false" Inherits="CTest.draw3" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>draw</title>
        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        <meta content="C#" name="CODE_LANGUAGE">
        <meta content="JavaScript" name="vs_defaultClientScript">
        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        <script language="javascript" src="jsgraphics.js" type="text/javascript"></script>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
            <asp:datalist id="DataList1" style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 392px"
                runat="server" Width="80%">
                <ItemTemplate>
                    <asp:TextBox id="TextSelItem" runat="server" Width="70%"></asp:TextBox><DIV id="SelItemCoordinate" runat="server"><FONT>坐标:（</FONT>
                        <asp:TextBox id="TextSelItemX" runat="server" Width="30px">0</asp:TextBox><FONT>，</FONT>
                        <asp:TextBox id="TextSelItemY" runat="server" Width="30px">0</asp:TextBox><FONT>）</FONT></DIV>
                </ItemTemplate>
            </asp:datalist>
            <DIV id="parentdiv" style="Z-INDEX: 102; LEFT: 16px; WIDTH: 640px; POSITION: absolute; TOP: 40px; HEIGHT: 300px; BACKGROUND-COLOR: aliceblue"
                runat="server" ms_positioning="GridLayout" noWrap></DIV>
            <asp:textbox id="TextOper" style="Z-INDEX: 103; LEFT: 16px; POSITION: absolute; TOP: 8px" runat="server"
                Width="24px">1</asp:textbox>&nbsp;&nbsp;<asp:radiobuttonlist id="RadioButtonList1" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 352px"
                runat="server" Width="448px" RepeatDirection="Horizontal" AutoPostBack="True">
                <asp:ListItem Value="0" Selected="True">定义节点</asp:ListItem>
                <asp:ListItem Value="1">节点位置排放</asp:ListItem>
                <asp:ListItem Value="2">节点间连线</asp:ListItem>
            </asp:radiobuttonlist><asp:button id="Button2" style="Z-INDEX: 105; LEFT: 544px; POSITION: absolute; TOP: 8px" runat="server"
                Text="JustRefresh"></asp:button>
            <asp:TextBox id="TextAnswer" style="Z-INDEX: 106; LEFT: 48px; POSITION: absolute; TOP: 8px" runat="server"
                Width="480px"></asp:TextBox><INPUT id="hidTag" style="Z-INDEX: 107; LEFT: 480px; POSITION: absolute; TOP: 352px" type="hidden"
                name="Hidden1" runat="server">
            <asp:TextBox id="TextBox1" style="Z-INDEX: 108; LEFT: 700px; POSITION: absolute; TOP: 104px"
                runat="server"></asp:TextBox></form>
        <script>
            //被拖动的对象
            var Obj=''
           
            var startObj="";
           
            //被拖动对象的最初坐标位置
            var pLeft,pTop;
   
   //起点坐标,终点坐标
   var startLeft,startTop,endLeft,EndTop;
    
            var jg = new jsGraphics("parentdiv");
           
            var clientWidth = document.all("parentdiv").clientWidth;
            var clientHeight = document.all("parentdiv").clientHeight;
            var clientLeft = document.all("parentdiv").style.pixelLeft;
            var clientTop = document.all("parentdiv").style.pixelTop;
           
            //document.all("TextBox1").value = clientWidth + "," + clientHeight + "," + clientLeft + "," + clientTop;
            //按下鼠标时
            function MDown(Object)
            {
    Obj=Object.id
                //捕获对象
                document.all(Obj).setCapture();
               
                //获得对象的最初坐标位置
    pLeft = document.all(Obj).style.pixelLeft;
    pTop = document.all(Obj).style.pixelTop;
     
    if (document.all("TextOper").value == 2)
                {
     startLeft = document.all(Obj).style.pixelLeft + 10;
     startTop = document.all(Obj).style.pixelTop + 10;
     document.all("TextOper").value = 3;
     startObj = Obj;
                }
                else if (document.all("TextOper").value == 3)
                {
     if(Obj != startObj)
     {
      endLeft = document.all(Obj).style.pixelLeft + 10;
      endTop = document.all(Obj).style.pixelTop + 10;
      document.all("TextOper").value = 2;
      
      jg.setColor("blue");
      jg.drawLine(startLeft,startTop,endLeft,endTop);
      jg.paint("parentdiv");
      document.all("TextAnswer").value = document.all("TextAnswer").value + startObj + "--" + Obj + " | ";
      startObj = "";
                 }
                 else
                 {
      document.all("TextOper").value = 3;
                 }
                }
               
                pX=event.x-document.all(Obj).style.pixelLeft;
                pY=event.y-document.all(Obj).style.pixelTop;  
               
            }
           
            function MMove()
            {
                if (event.button == 1 && document.all("hidTag").value != "2")
                {
                    //对象的移动位置
                    if(Obj!='')
                    {
                        if ((event.x)< (clientWidth + clientLeft - 20) && (event.x) > (clientLeft + 20))
                        {
                         document.all(Obj).style.left=event.x-pX;                   
                     }
                    
                     if ((event.y) < (clientHeight + clientTop - 10) && (event.y) > (clientTop + 20))
                     {
                         document.all(Obj).style.top=event.y-pY;
                     }
                 }
             }
            
            }

            function MUp()
            {
                if(Obj!='')
                {
     var index = Obj.replace("MoveDiv","");
     var txtXid = "DataList1__ctl" + index + "_TextSelItemX";
     var txtYid = "DataList1__ctl" + index + "_TextSelItemY";
     document.all[txtXid].value = document.all(Obj).style.pixelLeft;
     document.all[txtYid].value = document.all(Obj).style.pixelTop;
                    //释放对象
            
                 document.all(Obj).releaseCapture();
                 if (document.all("TextOper").value != 1)
                 {
                     //还原到最初按下鼠标时的位置
                     document.all(Obj).style.pixelLeft = pLeft;
                     document.all(Obj).style.pixelTop = pTop;
                    }
                 Obj='';
             }

            }
                       
            document.onmouseup=MUp;
            document.onmousemove=MMove;
           
            function CancelContextMenu()
            {
                event.cancelBubble = true;
                event.returnValue = false;
            }
            document.oncontextmenu = CancelContextMenu;
        </script>
    </body>
</HTML>

********************************************************************************
◆代码文件（draw3.aspx.cs）
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace CTest
{
 /// <summary>
 /// draw 的摘要说明。
 /// </summary>
 public class draw3 : System.Web.UI.Page
 {
  protected System.Web.UI.HtmlControls.HtmlGenericControl parentdiv;
  protected System.Web.UI.WebControls.RadioButtonList RadioButtonList1;
  protected System.Web.UI.WebControls.Button Button2;
  protected System.Web.UI.WebControls.TextBox TextOper;
  protected System.Web.UI.WebControls.TextBox TextAnswer;
        protected System.Web.UI.HtmlControls.HtmlInputHidden hidTag;
        protected System.Web.UI.WebControls.TextBox TextBox1;
        protected System.Web.UI.WebControls.DataList DataList1;
   
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
            if (!IsPostBack)
            {
                this.AddDiv(6);
   
            }
  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);

  }
  
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {   
            this.DataList1.ItemDataBound += new System.Web.UI.WebControls.DataListItemEventHandler(this.DataList1_ItemDataBound);
            this.RadioButtonList1.SelectedIndexChanged += new System.EventHandler(this.RadioButtonList1_SelectedIndexChanged);
            this.Button2.Click += new System.EventHandler(this.Button2_Click);
            this.Load += new System.EventHandler(this.Page_Load);

        }
  #endregion

        private void AddDiv(int n)
        {
            string [] strAry = new string[n];
            DataList1.DataSource = strAry;
            DataList1.DataBind();
        }
  private void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
  {
   TextBox txt = new TextBox();
   HtmlGenericControl div = new HtmlGenericControl();

   txt=(TextBox)e.Item.Controls[2].Controls[1];
   txt.Text = "10";

   txt=(TextBox)e.Item.Controls[2].Controls[3];
   txt.Text = (10 + 30*e.Item.ItemIndex).ToString();

   div = (HtmlGenericControl)e.Item.Controls[2];
   div.Style.Add("display","none");
  }

  
  private void RadioButtonList1_SelectedIndexChanged(object sender, System.EventArgs e)
  {
   
   switch(RadioButtonList1.SelectedIndex)
   {
    case 0:
     this.DataList1.Style.Add("display","inline");
     this.TextOper.Text = "1";
     break;
    case 1:
     this.DataList1.Style.Add("display","inline");
     this.TextOper.Text = "1";
                    this.hidTag.Value = "1";
     break;
    case 2:
     this.DataList1.Style.Add("display","none");
     this.TextOper.Text = "2";
                    this.hidTag.Value = "2";
     break;
   }
   showSelItems();
  }
  
  private void showSelItems()
  {
   string html = "";
   string txtValue ="";
   string txtX = "";
   string txtY = "";
   TextBox txt = new TextBox();
   HtmlGenericControl div = new HtmlGenericControl();

   for(int i=0;i<DataList1.Items.Count;i++)
   {  
    txt=(TextBox)DataList1.Items[i].Controls[2].Controls[1];
    txtX = txt.Text.Trim();

    txt=(TextBox)DataList1.Items[i].Controls[2].Controls[3];
    txtY = txt.Text.Trim();

    txt=(TextBox)DataList1.Items[i].Controls[1];
    txtValue = txt.Text.TrimStart().TrimEnd();
    
    if(txtValue.Length>0)
     html += "<DIV onmousedown='MDown(this)' id='MoveDiv"+ i.ToString() +"' style='Z-INDEX: 105; LEFT: " + txtX + "px; CURSOR: hand; POSITION: absolute; TOP: "+ txtY +"px; BORDER-RIGHT: darkgreen 3px double; BORDER-TOP: darkgreen 3px double; BORDER-LEFT: darkgreen 3px double; BORDER-BOTTOM: darkgreen 3px double; BACKGROUND-COLOR: FloralWhite' ms_positioning='FlowLayout' >&nbsp;"+txtValue+"&nbsp;</DIV>";
    else if(this.RadioButtonList1.SelectedIndex>0)
     txt.Visible = false;
    else
     txt.Visible = true;
    
    div = (HtmlGenericControl)DataList1.Items[i].Controls[2];
    if(this.RadioButtonList1.SelectedIndex>0 && txtValue.Length>0)
     div.Style.Add("display","inline");
    else
     div.Style.Add("display","none");
   }
   this.parentdiv.InnerHtml =html;
  }

   }
}

********************************************************************************
◆脚本文件（jsGraphics.js）

var jg_ihtm, jg_ie, jg_fast, jg_dom, jg_moz,
jg_n4 = (document.layers && typeof document.classes != "undefined");


function chkDHTM(x, i)
{
 x = document.body || null;
 jg_ie = x && typeof x.insertAdjacentHTML != "undefined";
 jg_dom = (x && !jg_ie &&
  typeof x.appendChild != "undefined" &&
  typeof document.createRange != "undefined" &&
  typeof (i = document.createRange()).setStartBefore != "undefined" &&
  typeof i.createContextualFragment != "undefined");
 jg_ihtm = !jg_ie && !jg_dom && x && typeof x.innerHTML != "undefined";
 jg_fast = jg_ie && document.all && !window.opera;
 jg_moz = jg_dom && typeof x.style.MozOpacity != "undefined";
}


function pntDoc()
{
 this.wnd.document.write(jg_fast? this.htmRpc() : this.htm);
 this.htm = '';
}


function pntCnvDom()
{
 var x = document.createRange();
 x.setStartBefore(this.cnv);
 x = x.createContextualFragment(jg_fast? this.htmRpc() : this.htm);
 this.cnv.appendChild(x);
 this.htm = '';
}


function pntCnvIe()
{
 this.cnv.insertAdjacentHTML("BeforeEnd", jg_fast? this.htmRpc() : this.htm);
 this.htm = '';
}


function pntCnvIhtm()
{
 this.cnv.innerHTML += this.htm;
 this.htm = '';
}


function pntCnv()
{
 this.htm = '';
}


function mkDiv(x, y, w, h)
{
 this.htm += '<div style="position:absolute;'+
  'left:' + x + 'px;'+
  'top:' + y + 'px;'+
  'width:' + w + 'px;'+
  'height:' + h + 'px;'+
  'clip:rect(0,'+w+'px,'+h+'px,0);'+
  'background-color:' + this.color +
  (!jg_moz? ';overflow:hidden' : '')+
  ';"><\/div>';
}


function mkDivIe(x, y, w, h)
{
 this.htm += '%%'+this.color+';'+x+';'+y+';'+w+';'+h+';';
}


function mkDivPrt(x, y, w, h)
{
 this.htm += '<div style="position:absolute;'+
  'border-left:' + w + 'px solid ' + this.color + ';'+
  'left:' + x + 'px;'+
  'top:' + y + 'px;'+
  'width:0px;'+
  'height:' + h + 'px;'+
  'clip:rect(0,'+w+'px,'+h+'px,0);'+
  'background-color:' + this.color +
  (!jg_moz? ';overflow:hidden' : '')+
  ';"><\/div>';
}


function mkLyr(x, y, w, h)
{
 this.htm += '<layer '+
  'left="' + x + '" '+
  'top="' + y + '" '+
  'width="' + w + '" '+
  'height="' + h + '" '+
  'bgcolor="' + this.color + '"><\/layer>\n';
}


var regex =  /%%([^;]+);([^;]+);([^;]+);([^;]+);([^;]+);/g;
function htmRpc()
{
 return this.htm.replace(
  regex,
  '<div style="overflow:hidden;position:absolute;background-color:'+
  '$1;left:$2;top:$3;width:$4;height:$5"></div>\n');
}


function htmPrtRpc()
{
 return this.htm.replace(
  regex,
  '<div style="overflow:hidden;position:absolute;background-color:'+
  '$1;left:$2;top:$3;width:$4;height:$5;border-left:$4px solid $1"></div>\n');
}


function mkLin(x1, y1, x2, y2)
{
 if (x1 > x2)
 {
  var _x2 = x2;
  var _y2 = y2;
  x2 = x1;
  y2 = y1;
  x1 = _x2;
  y1 = _y2;
 }
 var dx = x2-x1, dy = Math.abs(y2-y1),
 x = x1, y = y1,
 yIncr = (y1 > y2)? -1 : 1;

 if (dx >= dy)
 {
  var pr = dy<<1,
  pru = pr - (dx<<1),
  p = pr-dx,
  ox = x;
  while ((dx--) > 0)
  {
   ++x;
   if (p > 0)
   {
    this.mkDiv(ox, y, x-ox, 1);
    y += yIncr;
    p += pru;
    ox = x;
   }
   else p += pr;
  }
  this.mkDiv(ox, y, x2-ox+1, 1);
 }

 else
 {
  var pr = dx<<1,
  pru = pr - (dy<<1),
  p = pr-dy,
  oy = y;
  if (y2 <= y1)
  {
   while ((dy--) > 0)
   {
    if (p > 0)
    {
     this.mkDiv(x++, y, 1, oy-y+1);
     y += yIncr;
     p += pru;
     oy = y;
    }
    else
    {
     y += yIncr;
     p += pr;
    }
   }
   this.mkDiv(x2, y2, 1, oy-y2+1);
  }
  else
  {
   while ((dy--) > 0)
   {
    y += yIncr;
    if (p > 0)
    {
     this.mkDiv(x++, oy, 1, y-oy);
     p += pru;
     oy = y;
    }
    else p += pr;
   }
   this.mkDiv(x2, oy, 1, y2-oy+1);
  }
 }
}


function mkLin2D(x1, y1, x2, y2)
{
 if (x1 > x2)
 {
  var _x2 = x2;
  var _y2 = y2;
  x2 = x1;
  y2 = y1;
  x1 = _x2;
  y1 = _y2;
 }
 var dx = x2-x1, dy = Math.abs(y2-y1),
 x = x1, y = y1,
 yIncr = (y1 > y2)? -1 : 1;

 var s = this.stroke;
 if (dx >= dy)
 {
  if (s-3 > 0)
  {
   var _s = (s*dx*Math.sqrt(1+dy*dy/(dx*dx))-dx-(s>>1)*dy) / dx;
   _s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;
  }
  else var _s = s;
  var ad = Math.ceil(s/2);

  var pr = dy<<1,
  pru = pr - (dx<<1),
  p = pr-dx,
  ox = x;
  while ((dx--) > 0)
  {
   ++x;
   if (p > 0)
   {
    this.mkDiv(ox, y, x-ox+ad, _s);
    y += yIncr;
    p += pru;
    ox = x;
   }
   else p += pr;
  }
  this.mkDiv(ox, y, x2-ox+ad+1, _s);
 }

 else
 {
  if (s-3 > 0)
  {
   var _s = (s*dy*Math.sqrt(1+dx*dx/(dy*dy))-(s>>1)*dx-dy) / dy;
   _s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;
  }
  else var _s = s;
  var ad = Math.round(s/2);

  var pr = dx<<1,
  pru = pr - (dy<<1),
  p = pr-dy,
  oy = y;
  if (y2 <= y1)
  {
   ++ad;
   while ((dy--) > 0)
   {
    if (p > 0)
    {
     this.mkDiv(x++, y, _s, oy-y+ad);
     y += yIncr;
     p += pru;
     oy = y;
    }
    else
    {
     y += yIncr;
     p += pr;
    }
   }
   this.mkDiv(x2, y2, _s, oy-y2+ad);
  }
  else
  {
   while ((dy--) > 0)
   {
    y += yIncr;
    if (p > 0)
    {
     this.mkDiv(x++, oy, _s, y-oy+ad);
     p += pru;
     oy = y;
    }
    else p += pr;
   }
   this.mkDiv(x2, oy, _s, y2-oy+ad+1);
  }
 }
}


function mkLinDott(x1, y1, x2, y2)
{
 if (x1 > x2)
 {
  var _x2 = x2;
  var _y2 = y2;
  x2 = x1;
  y2 = y1;
  x1 = _x2;
  y1 = _y2;
 }
 var dx = x2-x1, dy = Math.abs(y2-y1),
 x = x1, y = y1,
 yIncr = (y1 > y2)? -1 : 1,
 drw = true;
 if (dx >= dy)
 {
  var pr = dy<<1,
  pru = pr - (dx<<1),
  p = pr-dx;
  while ((dx--) > 0)
  {
   if (drw) this.mkDiv(x, y, 1, 1);
   drw = !drw;
   if (p > 0)
   {
    y += yIncr;
    p += pru;
   }
   else p += pr;
   ++x;
  }
  if (drw) this.mkDiv(x, y, 1, 1);
 }

 else
 {
  var pr = dx<<1,
  pru = pr - (dy<<1),
  p = pr-dy;
  while ((dy--) > 0)
  {
   if (drw) this.mkDiv(x, y, 1, 1);
   drw = !drw;
   y += yIncr;
   if (p > 0)
   {
    ++x;
    p += pru;
   }
   else p += pr;
  }
  if (drw) this.mkDiv(x, y, 1, 1);
 }
}


function mkOv(left, top, width, height)
{
 var a = width>>1, b = height>>1,
 wod = width&1, hod = (height&1)+1,
 cx = left+a, cy = top+b,
 x = 0, y = b,
 ox = 0, oy = b,
 aa = (a*a)<<1, bb = (b*b)<<1,
 st = (aa>>1)*(1-(b<<1)) + bb,
 tt = (bb>>1) - aa*((b<<1)-1),
 w, h;
 while (y > 0)
 {
  if (st < 0)
  {
   st += bb*((x<<1)+3);
   tt += (bb<<1)*(++x);
  }
  else if (tt < 0)
  {
   st += bb*((x<<1)+3) - (aa<<1)*(y-1);
   tt += (bb<<1)*(++x) - aa*(((y--)<<1)-3);
   w = x-ox;
   h = oy-y;
   if (w&2 && h&2)
   {
    this.mkOvQds(cx, cy, -x+2, ox+wod, -oy, oy-1+hod, 1, 1);
    this.mkOvQds(cx, cy, -x+1, x-1+wod, -y-1, y+hod, 1, 1);
   }
   else this.mkOvQds(cx, cy, -x+1, ox+wod, -oy, oy-h+hod, w, h);
   ox = x;
   oy = y;
  }
  else
  {
   tt -= aa*((y<<1)-3);
   st -= (aa<<1)*(--y);
  }
 }
 this.mkDiv(cx-a, cy-oy, a-ox+1, (oy<<1)+hod);
 this.mkDiv(cx+ox+wod, cy-oy, a-ox+1, (oy<<1)+hod);
}


function mkOv2D(left, top, width, height)
{
 var s = this.stroke;
 width += s-1;
 height += s-1;
 var a = width>>1, b = height>>1,
 wod = width&1, hod = (height&1)+1,
 cx = left+a, cy = top+b,
 x = 0, y = b,
 aa = (a*a)<<1, bb = (b*b)<<1,
 st = (aa>>1)*(1-(b<<1)) + bb,
 tt = (bb>>1) - aa*((b<<1)-1);

 if (s-4 < 0 && (!(s-2) || width-51 > 0 && height-51 > 0))
 {
  var ox = 0, oy = b,
  w, h,
  pxl, pxr, pxt, pxb, pxw;
  while (y > 0)
  {
   if (st < 0)
   {
    st += bb*((x<<1)+3);
    tt += (bb<<1)*(++x);
   }
   else if (tt < 0)
   {
    st += bb*((x<<1)+3) - (aa<<1)*(y-1);
    tt += (bb<<1)*(++x) - aa*(((y--)<<1)-3);
    w = x-ox;
    h = oy-y;

    if (w-1)
    {
     pxw = w+1+(s&1);
     h = s;
    }
    else if (h-1)
    {
     pxw = s;
     h += 1+(s&1);
    }
    else pxw = h = s;
    this.mkOvQds(cx, cy, -x+1, ox-pxw+w+wod, -oy, -h+oy+hod, pxw, h);
    ox = x;
    oy = y;
   }
   else
   {
    tt -= aa*((y<<1)-3);
    st -= (aa<<1)*(--y);
   }
  }
  this.mkDiv(cx-a, cy-oy, s, (oy<<1)+hod);
  this.mkDiv(cx+a+wod-s+1, cy-oy, s, (oy<<1)+hod);
 }

 else
 {
  var _a = (width-((s-1)<<1))>>1,
  _b = (height-((s-1)<<1))>>1,
  _x = 0, _y = _b,
  _aa = (_a*_a)<<1, _bb = (_b*_b)<<1,
  _st = (_aa>>1)*(1-(_b<<1)) + _bb,
  _tt = (_bb>>1) - _aa*((_b<<1)-1),

  pxl = new Array(),
  pxt = new Array(),
  _pxb = new Array();
  pxl[0] = 0;
  pxt[0] = b;
  _pxb[0] = _b-1;
  while (y > 0)
  {
   if (st < 0)
   {
    st += bb*((x<<1)+3);
    tt += (bb<<1)*(++x);
    pxl[pxl.length] = x;
    pxt[pxt.length] = y;
   }
   else if (tt < 0)
   {
    st += bb*((x<<1)+3) - (aa<<1)*(y-1);
    tt += (bb<<1)*(++x) - aa*(((y--)<<1)-3);
    pxl[pxl.length] = x;
    pxt[pxt.length] = y;
   }
   else
   {
    tt -= aa*((y<<1)-3);
    st -= (aa<<1)*(--y);
   }

   if (_y > 0)
   {
    if (_st < 0)
    {
     _st += _bb*((_x<<1)+3);
     _tt += (_bb<<1)*(++_x);
     _pxb[_pxb.length] = _y-1;
    }
    else if (_tt < 0)
    {
     _st += _bb*((_x<<1)+3) - (_aa<<1)*(_y-1);
     _tt += (_bb<<1)*(++_x) - _aa*(((_y--)<<1)-3);
     _pxb[_pxb.length] = _y-1;
    }
    else
    {
     _tt -= _aa*((_y<<1)-3);
     _st -= (_aa<<1)*(--_y);
     _pxb[_pxb.length-1]--;
    }
   }
  }

  var ox = 0, oy = b,
  _oy = _pxb[0],
  l = pxl.length,
  w, h;
  for (var i = 0; i < l; i++)
  {
   if (typeof _pxb[i] != "undefined")
   {
    if (_pxb[i] < _oy || pxt[i] < oy)
    {
     x = pxl[i];
     this.mkOvQds(cx, cy, -x+1, ox+wod, -oy, _oy+hod, x-ox, oy-_oy);
     ox = x;
     oy = pxt[i];
     _oy = _pxb[i];
    }
   }
   else
   {
    x = pxl[i];
    this.mkDiv(cx-x+1, cy-oy, 1, (oy<<1)+hod);
    this.mkDiv(cx+ox+wod, cy-oy, 1, (oy<<1)+hod);
    ox = x;
    oy = pxt[i];
   }
  }
  this.mkDiv(cx-a, cy-oy, 1, (oy<<1)+hod);
  this.mkDiv(cx+ox+wod, cy-oy, 1, (oy<<1)+hod);
 }
}


function mkOvDott(left, top, width, height)
{
 var a = width>>1, b = height>>1,
 wod = width&1, hod = height&1,
 cx = left+a, cy = top+b,
 x = 0, y = b,
 aa2 = (a*a)<<1, aa4 = aa2<<1, bb = (b*b)<<1,
 st = (aa2>>1)*(1-(b<<1)) + bb,
 tt = (bb>>1) - aa2*((b<<1)-1),
 drw = true;
 while (y > 0)
 {
  if (st < 0)
  {
   st += bb*((x<<1)+3);
   tt += (bb<<1)*(++x);
  }
  else if (tt < 0)
  {
   st += bb*((x<<1)+3) - aa4*(y-1);
   tt += (bb<<1)*(++x) - aa2*(((y--)<<1)-3);
  }
  else
  {
   tt -= aa2*((y<<1)-3);
   st -= aa4*(--y);
  }
  if (drw) this.mkOvQds(cx, cy, -x, x+wod, -y, y+hod, 1, 1);
  drw = !drw;
 }
}


function mkRect(x, y, w, h)
{
 var s = this.stroke;
 this.mkDiv(x, y, w, s);
 this.mkDiv(x+w, y, s, h);
 this.mkDiv(x, y+h, w+s, s);
 this.mkDiv(x, y+s, s, h-s);
}


function mkRectDott(x, y, w, h)
{
 this.drawLine(x, y, x+w, y);
 this.drawLine(x+w, y, x+w, y+h);
 this.drawLine(x, y+h, x+w, y+h);
 this.drawLine(x, y, x, y+h);
}


function jsgFont()
{
 this.PLAIN = 'font-weight:normal;';
 this.BOLD = 'font-weight:bold;';
 this.ITALIC = 'font-style:italic;';
 this.ITALIC_BOLD = this.ITALIC + this.BOLD;
 this.BOLD_ITALIC = this.ITALIC_BOLD;
}
var Font = new jsgFont();


function jsgStroke()
{
 this.DOTTED = -1;
}
var Stroke = new jsgStroke();


function jsGraphics(id, wnd)
{
 this.setColor = new Function('arg', 'this.color = arg.toLowerCase();');

 this.setStroke = function(x)
 {
  this.stroke = x;
  if (!(x+1))
  {
   this.drawLine = mkLinDott;
   this.mkOv = mkOvDott;
   this.drawRect = mkRectDott;
  }
  else if (x-1 > 0)
  {
   this.drawLine = mkLin2D;
   this.mkOv = mkOv2D;
   this.drawRect = mkRect;
  }
  else
  {
   this.drawLine = mkLin;
   this.mkOv = mkOv;
   this.drawRect = mkRect;
  }
 };


 this.setPrintable = function(arg)
 {
  this.printable = arg;
  if (jg_fast)
  {
   this.mkDiv = mkDivIe;
   this.htmRpc = arg? htmPrtRpc : htmRpc;
  }
  else this.mkDiv = jg_n4? mkLyr : arg? mkDivPrt : mkDiv;
 };


 this.setFont = function(fam, sz, sty)
 {
  this.ftFam = fam;
  this.ftSz = sz;
  this.ftSty = sty || Font.PLAIN;
 };


 this.drawPolyline = this.drawPolyLine = function(x, y, s)
 {
  for (var i=0 ; i<x.length-1 ; i++ )
   this.drawLine(x[i], y[i], x[i+1], y[i+1]);
 };


 this.fillRect = function(x, y, w, h)
 {
  this.mkDiv(x, y, w, h);
 };


 this.drawPolygon = function(x, y)
 {
  this.drawPolyline(x, y);
  this.drawLine(x[x.length-1], y[x.length-1], x[0], y[0]);
 };


 this.drawEllipse = this.drawOval = function(x, y, w, h)
 {
  this.mkOv(x, y, w, h);
 };


 this.fillEllipse = this.fillOval = function(left, top, w, h)
 {
  var a = (w -= 1)>>1, b = (h -= 1)>>1,
  wod = (w&1)+1, hod = (h&1)+1,
  cx = left+a, cy = top+b,
  x = 0, y = b,
  ox = 0, oy = b,
  aa2 = (a*a)<<1, aa4 = aa2<<1, bb = (b*b)<<1,
  st = (aa2>>1)*(1-(b<<1)) + bb,
  tt = (bb>>1) - aa2*((b<<1)-1),
  pxl, dw, dh;
  if (w+1) while (y > 0)
  {
   if (st < 0)
   {
    st += bb*((x<<1)+3);
    tt += (bb<<1)*(++x);
   }
   else if (tt < 0)
   {
    st += bb*((x<<1)+3) - aa4*(y-1);
    pxl = cx-x;
    dw = (x<<1)+wod;
    tt += (bb<<1)*(++x) - aa2*(((y--)<<1)-3);
    dh = oy-y;
    this.mkDiv(pxl, cy-oy, dw, dh);
    this.mkDiv(pxl, cy+oy-dh+hod, dw, dh);
    ox = x;
    oy = y;
   }
   else
   {
    tt -= aa2*((y<<1)-3);
    st -= aa4*(--y);
   }
  }
  this.mkDiv(cx-a, cy-oy, w+1, (oy<<1)+hod);
 };

 this.fillPolygon = function(array_x, array_y)
 {
  var i;
  var y;
  var miny, maxy;
  var x1, y1;
  var x2, y2;
  var ind1, ind2;
  var ints;

  var n = array_x.length;

  if (!n) return;


  miny = array_y[0];
  maxy = array_y[0];
  for (i = 1; i < n; i++)
  {
   if (array_y[i] < miny)
    miny = array_y[i];

   if (array_y[i] > maxy)
    maxy = array_y[i];
  }
  for (y = miny; y <= maxy; y++)
  {
   var polyInts = new Array();
   ints = 0;
   for (i = 0; i < n; i++)
   {
    if (!i)
    {
     ind1 = n-1;
     ind2 = 0;
    }
    else
    {
     ind1 = i-1;
     ind2 = i;
    }
    y1 = array_y[ind1];
    y2 = array_y[ind2];
    if (y1 < y2)
    {
     x1 = array_x[ind1];
     x2 = array_x[ind2];
    }
    else if (y1 > y2)
    {
     y2 = array_y[ind1];
     y1 = array_y[ind2];
     x2 = array_x[ind1];
     x1 = array_x[ind2];
    }
    else continue;

    if ((y >= y1) && (y < y2))
     polyInts[ints++] = Math.round((y-y1) * (x2-x1) / (y2-y1) + x1);

    else if ((y == maxy) && (y > y1) && (y <= y2))
     polyInts[ints++] = Math.round((y-y1) * (x2-x1) / (y2-y1) + x1);
   }
   polyInts.sort(integer_compare);

   for (i = 0; i < ints; i+=2)
   {
    w = polyInts[i+1]-polyInts[i]
    this.mkDiv(polyInts[i], y, polyInts[i+1]-polyInts[i]+1, 1);
   }
  }
 };


 this.drawString = function(txt, x, y)
 {
  this.htm += '<div style="position:absolute;white-space:nowrap;'+
   'left:' + x + 'px;'+
   'top:' + y + 'px;'+
   'font-family:' +  this.ftFam + ';'+
   'font-size:' + this.ftSz + ';'+
   'color:' + this.color + ';' + this.ftSty + '">'+
   txt +
   '<\/div>';
 }


 this.drawImage = function(imgSrc, x, y, w, h)
 {
  this.htm += '<div style="position:absolute;'+
   'left:' + x + 'px;'+
   'top:' + y + 'px;'+
   'width:' +  w + ';'+
   'height:' + h + ';">'+
   '<img src="' + imgSrc + '" width="' + w + '" height="' + h + '">'+
   '<\/div>';
 }


 this.clear = function()
 {
  this.htm = "";
  if (this.cnv) this.cnv.innerHTML = this.defhtm;
 };


 this.mkOvQds = function(cx, cy, xl, xr, yt, yb, w, h)
 {
  this.mkDiv(xr+cx, yt+cy, w, h);
  this.mkDiv(xr+cx, yb+cy, w, h);
  this.mkDiv(xl+cx, yb+cy, w, h);
  this.mkDiv(xl+cx, yt+cy, w, h);
 };

 this.setStroke(1);
 this.setFont('verdana,geneva,helvetica,sans-serif', String.fromCharCode(0x31, 0x32, 0x70, 0x78), Font.PLAIN);
 this.color = '#000000';
 this.htm = '';
 this.wnd = wnd || window;

 if (!(jg_ie || jg_dom || jg_ihtm)) chkDHTM();
 if (typeof id != 'string' || !id) this.paint = pntDoc;
 else
 {
  this.cnv = document.all? (this.wnd.document.all[id] || null)
   : document.getElementById? (this.wnd.document.getElementById(id) || null)
   : null;
  this.defhtm = (this.cnv && this.cnv.innerHTML)? this.cnv.innerHTML : '';
  this.paint = jg_dom? pntCnvDom : jg_ie? pntCnvIe : jg_ihtm? pntCnvIhtm : pntCnv;
 }

 this.setPrintable(false);
}

 

function integer_compare(x,y)
{
 return (x < y) ? -1 : ((x > y)*1);
}

 

本文地址：http://com.8s8s.com/it/it42990.htm

Copyright © 2004-2013 信息技术中文网 All rights reserved 版权所有

Powered by 信息技术中文网 Ver2.0