分享
 
 
 

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

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

◆页面(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);

}

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有