g.js

YahooUI,搞WEB开发的朋友值得看一看

  _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);
 };

/* fillPolygon method, implemented by Matthieu Haller.
This javascript function is an adaptation of the gdImageFilledPolygon for Walter Zorn lib.
C source of GD 1.8.4 found at http://www.boutell.com/gd/
THANKS to Kirsten Schulz for the polygon fixes!
The intersection finding technique of this code could be improved
by remembering the previous intertersection, and by using the slope.
That could help to adjust intersections to produce a nice
interior_extrema. */
 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;
     // modified 11. 2. 2004 Walter Zorn
    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);
}

-->
</SCRIPT>

<DIV id=myCanvas style="WIDTH: 100%; POSITION: absolute; TOP: 200px; HEIGHT: 250px"></DIV>
<DIV id=anotherCanvas style="WIDTH: 300px; POSITION: absolute; TOP: 100px; HEIGHT: 100px"></DIV>
<SCRIPT type=text/javascript>
<!--
function myDrawFunction()
{
  jg_doc.setColor("#00ff00"); // 选择绿色
  jg_doc.fillEllipse(100, 200, 100, 180); // 坐标点相对于文档(document) 
  jg_doc.setColor("maroon");
  jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
  jg_doc.paint(); // 注意：直接在文档上绘制，而不与某个div关联,
  jg.setColor("#ff0000"); // 选择红色
  jg.drawLine(10, 113, 220, 55); // 坐标点相对于div元素 "myCanvas" 
  jg.setColor("#0000ff"); // 选择蓝色
  jg.fillRect(350, 30, 30, 60);
  jg.paint();
  jg2.setColor("#0000ff"); // 选择蓝色
  jg2.drawEllipse(10, 50, 30, 100);
  jg2.drawRect(400, 10, 100, 50);
  jg2.paint();
}
var jg_doc = new jsGraphics(); // 直接在文档上绘制 
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");
myDrawFunction();
function ZOOM()
{
    if (document.body && document.body.style && typeof document.body.style.zoom != "undefined")
    {
        if (document.body.style.zoom=="400%")
            document.body.style.zoom = "100%";
        else
        {
            document.body.style.zoom = "400%";
            alert('You\'ve doubleclicked on the document.\nDoubleclick again to unzoom.');
        }
    }
}
document.ondblclick=ZOOM;
//-->
</SCRIPT>

/////////////// Pixel stairs demo ///////////////
var jg = new jsGraphics();
jg.htm += '<table align="left" width="354" cellpadding="0"><tr><td height="150" valign="top"><div id="stairsdemo" style="position:relative;width:350px;height:150px;">';
jg.setFont("verdana,geneva,sans-serif", "10px", Font.PLAIN);
jg.setColor("#ee8800");
jg.drawString("Image dynamically drawn with the Draw Shapes Library", 0, 2);
jg.setFont("verdana,geneva,sans-serif", "11px", Font.PLAIN);
jg.setColor("#ff0099");
jg.drawString("unfavourable", 10, 129);
jg.drawRect(0, 25, 10, 10);
jg.drawRect(10, 25, 10, 10);
jg.drawRect(20, 25, 10, 10);
jg.drawRect(20, 35, 10, 10);
jg.drawRect(30, 35, 10, 10);
jg.drawRect(40, 35, 10, 10);
jg.drawRect(40, 45, 10, 10);
jg.drawRect(50, 45, 10, 10);
jg.drawRect(60, 45, 10, 10);
jg.drawRect(60, 55, 10, 10);
jg.drawRect(60, 65, 10, 10);
jg.drawRect(70, 65, 10, 10);
jg.drawRect(70, 75, 10, 10);
jg.drawRect(70, 85, 10, 10);
jg.drawRect(80, 85, 10, 10);
jg.drawRect(80, 95, 10, 10);
jg.drawRect(80, 105, 10, 10);
jg.setColor("#008800");
jg.drawString("better", 130, 129);
drwPxOv(jg, 30, 25, 16, 16, 10, true);
jg.setColor("#0000cc");
jg.drawString("optimal", 260, 129);
drwPxOv(jg, 150, 25, 16, 16, 10);
jg.htm += '<\/div><\/td><\/tr><\/table>';
jg.paint();
//-->

</SCRIPT>