home *** CD-ROM | disk | FTP | other *** search
/ Netscape Plug-Ins Developer's Kit / Netscape_Plug-Ins_Developers_Kit.iso / DOCS / se_javas / 15EXM03.TXT < prev    next >
Encoding:
Text File  |  1996-07-08  |  11.2 KB  |  354 lines
  1. <html>
  2. <!-- JS-Draw  Copyright (C) 1996 Bill Dortch, hIdaho Design -->
  3. <head>
  4. <title>JS-Draw</title>
  5. <script language="JavaScript">
  6. <!-- begin script
  7. var hexchars = "0123456789ABCDEF";
  8.  
  9. function xbmDrawPoint (x,y) {
  10.   if (x < 0 || x >= this.pixelWidth ||
  11.       y < 0 || y >= this.height)
  12.     return;
  13.   this.row[y].col[x>>4] |= 1<<(x&0xF);
  14.   this.row[y].redraw = true;
  15. }
  16. function xbmDrawLine (x1,y1,x2,y2) {
  17.   var x,y,e,temp;
  18.   var dx = Math.abs(x1-x2);
  19.   var dy = Math.abs(y1-y2);
  20.   if ((dx >= dy && x1 > x2) || (dy > dx && y1 > y2)) {
  21.     temp = x2;
  22.     x2 = x1;
  23.     x1 = temp;
  24.     temp = y2;
  25.     y2 = y1;
  26.     y1 = temp;
  27.   }
  28.   if (dx >= dy) {
  29.     e = (y2-y1)/((dx == 0) ? 1 : dx);
  30.     for (x = x1, y = y1; x <= x2; x++, y += e)
  31.       this.drawPoint(x,Math.round(y));
  32.   }
  33.   else {
  34.     e = (x2-x1)/dy;
  35.     for (y = y1, x = x1; y <= y2; y++, x += e)
  36.       this.drawPoint(Math.round(x),y);
  37.   }
  38. }
  39. function xbmDrawRect (x1,y1,x2,y2) {
  40.   this.drawLine (x1,y1,x2,y1);
  41.   this.drawLine (x1,y1,x1,y2);
  42.   this.drawLine (x1,y2,x2,y2);
  43.   this.drawLine (x2,y1,x2,y2);
  44. }
  45. function xbmDrawFilledRect (x1,y1,x2,y2) {
  46.   var x,temp;
  47.   if (x1 > x2) {
  48.     temp = x2;
  49.     x2 = x1;
  50.     x1 = temp;
  51.     temp = y2;
  52.     y2 = y1;
  53.     y1 = temp;
  54.   }
  55.   for (x = x1; x <= x2; x++)
  56.     this.drawLine(x,y1,x,y2);
  57. }
  58. function xbmDrawCircle (x,y,radius) {
  59.   for (var a=0, b=1; a < b; a++) {
  60.     b = Math.round(Math.sqrt(Math.pow(radius,2)-Math.pow(a,2)));
  61.     this.drawPoint(x+a,y+b);
  62.     this.drawPoint(x+a,y-b);
  63.     this.drawPoint(x-a,y+b);
  64.     this.drawPoint(x-a,y-b);
  65.     this.drawPoint(x+b,y+a);
  66.     this.drawPoint(x+b,y-a);
  67.     this.drawPoint(x-b,y+a);
  68.     this.drawPoint(x-b,y-a);
  69.   }
  70. }
  71. function xbmDrawFilledCircle (x,y,radius) {
  72.   for (var a=0, b=1; a < b; a++) {
  73.     b = Math.round(Math.sqrt(Math.pow(radius,2)-Math.pow(a,2)));
  74.     this.drawLine(x+a,y+b,x+a,y-b);
  75.     this.drawLine(x-a,y+b,x-a,y-b);
  76.     this.drawLine(x+b,y+a,x+b,y-a);
  77.     this.drawLine(x-b,y+a,x-b,y-a);
  78.   }
  79. }
  80. function xbmReverse () {
  81.   this.negative = !this.negative;
  82.   for (var i = 0; i < this.height; i++)
  83.     this.row[i].redraw = true;
  84. }
  85. function xbmClear (value) {
  86.   if (value == null)
  87.     value = this.initialValue;
  88.   for (var i = 0; i < this.height; i++) {
  89.     this.row[i].redraw = true;
  90.     for (var j = 0; j < this.width; j++)
  91.       this.row[i].col[j] = value;
  92.   }
  93. }
  94. function xbmRowString () {
  95.   if (this.redraw) {
  96.     this.redraw = false;
  97.     this.text = "";
  98.     for (var i = 0; i < this.parent.width; i++) {
  99.       var pixels = this.col[i];
  100.       if (this.parent.negative)
  101.         pixels ^= 0xFFFF;
  102.       var buf = "0x" + hexchars.charAt((pixels>>4)&0xF) +
  103.         hexchars.charAt(pixels&0xF) + ",0x" +
  104.         hexchars.charAt((pixels>>12)&0xF) +
  105.         hexchars.charAt((pixels>>8)&0xF) + ",";
  106.       this.text += buf;
  107.     }
  108.   }
  109.   return this.text;
  110. }
  111. function xbmPartitionString (left,right) {
  112.   if (left == right) {
  113.     var str = this.row[left].toString();
  114.     if (left == 0)
  115.       str = this.head + str;
  116.     else if (left == this.height - 1)
  117.       str += "};\n";
  118.     return str;
  119.   }
  120.   var mid = (left+right)>>1;
  121.   return this.partition(left,mid) + this.partition(mid+1,right);
  122. }
  123. function xbmString () {
  124.   return this.partition(0,this.height - 1);
  125. }
  126. function xbmRow (parent, columns, initialValue) {
  127.   this.redraw = true;
  128.   this.text = null;
  129.   this.parent = parent;
  130.   this.col = new Object();
  131.   for (var i = 0; i < columns; i++)
  132.     this.col[i] = initialValue;
  133.   this.toString = xbmRowString;
  134.   return this;
  135. }
  136. function xbmImage (width, height, initialValue) {
  137.   this.width = (width+15)>>4;
  138.   this.pixelWidth = this.width<<4;
  139.   this.height = height;
  140.   this.head = "#define xbm_width " + (this.pixelWidth) +
  141.     "\n#define xbm_height " + this.height +
  142.     "\nstatic char xbm_bits[] = {\n";
  143.   this.initialValue = ((initialValue == null) ? 0 : initialValue);
  144.   this.negative = false;
  145.   this.row = new Object();
  146.   for (var i = 0; i < height; i++)
  147.     this.row[i] = new xbmRow(this, this.width, this.initialValue);
  148.   this.drawPoint = xbmDrawPoint;
  149.   this.drawLine = xbmDrawLine;
  150.   this.drawRect = xbmDrawRect;
  151.   this.drawFilledRect = xbmDrawFilledRect;
  152.   this.drawCircle = xbmDrawCircle;
  153.   this.drawFilledCircle = xbmDrawFilledCircle;
  154.   this.reverse = xbmReverse;
  155.   this.clear = xbmClear;
  156.   this.partition = xbmPartitionString;
  157.   this.toString = xbmString;
  158.   return this;
  159. }
  160. var canvas = new xbmImage (224,160);
  161. canvas.reverse();
  162.  
  163. var lineTool = new xbmImage (32,32);
  164. lineTool.drawLine (4,28,28,4);
  165.  
  166. var rectTool = new xbmImage (32,32);
  167. rectTool.drawRect (4,4,28,28);
  168.  
  169. var filledRectTool = new xbmImage (32,32);
  170. filledRectTool.drawFilledRect (4,4,28,28);
  171.  
  172. var circleTool = new xbmImage (32,32);
  173. circleTool.drawCircle (16,16,12);
  174.  
  175. var filledCircleTool = new xbmImage (32,32);
  176. filledCircleTool.drawFilledCircle (16,16,12);
  177.  
  178. var positiveTool = new xbmImage (32,32);
  179. positiveTool.drawRect (4,4,14,14);
  180. positiveTool.drawCircle (23,9,5);
  181. positiveTool.drawLine (4,16,28,16);
  182. positiveTool.drawLine (16,4,16,28);
  183. positiveTool.drawFilledCircle(9,23,5);
  184. positiveTool.drawFilledRect (18,18,28,28);
  185.  
  186. var negativeTool = new xbmImage (32,32);
  187. negativeTool.reverse();
  188. negativeTool.drawRect (4,4,14,14);
  189. negativeTool.drawCircle (23,9,5);
  190. negativeTool.drawLine (4,16,28,16);
  191. negativeTool.drawLine (16,4,16,28);
  192. negativeTool.drawFilledCircle(9,23,5);
  193. negativeTool.drawFilledRect (18,18,28,28);
  194.  
  195. var clearTool = new xbmImage (32,32);
  196.  
  197. var xframes = new Object();
  198. xframes[0] = canvas.toString();
  199. var xcount = 0;
  200. var lastx = -1;
  201. var lasty = -1;
  202. var activeTool = "Line";
  203.  
  204. function select (search) { 
  205.   var i = search.indexOf (",");
  206.   var x = parseFloat (search.substring(1,i));
  207.   var y = parseFloat (search.substring(i+1,search.length));
  208.   if (activeTool == "Line") {
  209.     if (lastx != -1) {
  210.       canvas.drawLine (lastx,lasty,x,y);
  211.       redraw();
  212.     }
  213.     setHint ("Line: Select next point");
  214.     lastx = x;
  215.     lasty = y;
  216.     return;
  217.   }
  218.   if (activeTool == "Rect" || activeTool == "Filled Rect") {
  219.     if (lastx != -1) {
  220.       if (activeTool == "Rect")
  221.         canvas.drawRect (lastx,lasty,x,y);
  222.       else
  223.         canvas.drawFilledRect (lastx,lasty,x,y);
  224.       redraw();
  225.       setHint (activeTool + ": Select start corner");
  226.       lastx = -1;
  227.       lasty = -1;
  228.     }
  229.     else {
  230.       lastx = x;
  231.       lasty = y;
  232.       setHint (activeTool + ": Select end corner");
  233.     }
  234.     return;
  235.   }
  236.   if (activeTool == "Circle" || activeTool == "Filled Circle") {
  237.     if (lastx != -1) {
  238.       var radius = Math.sqrt(Math.pow(x-lastx,2) + Math.pow(y-lasty,2));
  239.       if (activeTool == "Circle")
  240.         canvas.drawCircle (lastx,lasty,radius);
  241.       else
  242.         canvas.drawFilledCircle (lastx,lasty,radius);
  243.       redraw();
  244.       setHint (activeTool + ": Select center point");
  245.       lastx = -1;
  246.       lasty = -1;
  247.     }
  248.     else {
  249.       lastx = x;
  250.       lasty = y;
  251.       setHint (activeTool + ": Select edge point");
  252.     }
  253.     return;  
  254.   }
  255. }
  256. function redraw () {
  257.   xframes[xcount] = "";
  258.   xframes[++xcount] = canvas.toString();
  259.   self.pic.location = "javascript:parent.cframe()";
  260. }
  261. function setHint (hint) {
  262.   self.tool.document.tool.hint.value = hint;
  263. }
  264. function setTool (type) {
  265.   activeTool = type;
  266.   lastx = -1;
  267.   lasty = -1;
  268.   if (type == "Line")
  269.     setHint ("Line: Select first point");
  270.   else if (type == "Rect" || type == "Filled Rect")
  271.     setHint (type + ": Select start corner");
  272.   else if (type == "Circle" || type == "Filled Circle")
  273.     setHint (type + ": Select center point");
  274. }
  275. function setPositive () {
  276.   if (canvas.negative) {
  277.     canvas.reverse();
  278.     redraw();
  279.   }
  280. }
  281. function setNegative () {
  282.   if (!canvas.negative) {
  283.     canvas.reverse();
  284.     redraw();
  285.   }
  286. }
  287. function clear () {
  288.   if (confirm("\nErase the current drawing?")) {
  289.     canvas.clear();
  290.     redraw();
  291.     setTool (activeTool);
  292.   }
  293. }
  294. var empty = '<html></html>';
  295. function headFrame () {
  296.   return '<body bgcolor="#500020" text="#FFFFFF"><div align="center"><font size=7><tt><b>JS-Draw</b></tt></font></div></body>';
  297. }
  298. function toolFrame () {
  299.   return '<html><head><title>Toolset</title></head>' +
  300.     '<body bgcolor="#808080">' +
  301.     '<form name="tool">' +
  302.     '<table border=2 cellpadding=0 cellspacing=4>' +
  303.     '<tr>' +
  304.     '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setTool(\'Line\')"><img src="javascript:parent.lineTool" width=32 height=32 border=0></a></td>' +
  305.     '<td colspan=5><input name="hint" size=40 value="Line: Select first point"></td>' +
  306.     '</tr>' +
  307.     '<tr>' +
  308.     '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setTool(\'Rect\')"><img src="javascript:parent.rectTool" width=32 height=32 border=0></a></td>' +
  309.     '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setTool(\'Circle\')"><img src="javascript:parent.circleTool" width=32 height=32 border=0></a></td>' +
  310.     '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setPositive()"><img src="javascript:parent.positiveTool" width=32 height=32 border=0></a></td>' +
  311.     '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.clear()"><img src="javascript:parent.clearTool" width=32 height=32 border=0></a></td>' +
  312.     '<td width=192></td>' +
  313.     '</tr>' +
  314.     '<tr>' +
  315.     '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setTool(\'Filled Rect\')"><img src="javascript:parent.filledRectTool" width=32 height=32 border=0></a></td>' +
  316.     '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setTool(\'Filled Circle\')"><img src="javascript:parent.filledCircleTool" width=32 height=32 border=0></a></td>' +
  317.     '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setNegative()"><img src="javascript:parent.negativeTool" width=32 height=32 border=0></a></td>' +
  318.     '<td width=32></td>' +
  319.     '<td width=192></td>' +
  320.     '</tr>' +
  321.     '</table>' +  
  322.     '</form></body</html>';
  323. }
  324. function cframe () {
  325.   return '<html><head><title>JS-Draw</title>' + 
  326.     '<body bgcolor="#808080"><table border=0 cellpadding=0 cellspacing=0><tr><td width=224 height=160 bgcolor=#FFFFFF>' + 
  327.     '<a href="javascript:parent.echoSelect()//" target="echo">' +
  328.     '<img ismap src="javascript:parent.xframes[' + xcount + ']" width=224 height=160 border=0></a>' +
  329.     '</td></tr></table></body></html>';
  330. }
  331. function echoSelect () {
  332.   return '<body onload="parent.select(location.search)"></body>';
  333. }
  334. function initialize () {
  335.   self.head.location = "javascript:parent.headFrame()";
  336.   self.tool.location = "javascript:parent.toolFrame()";
  337.   self.pic.location = "javascript:parent.cframe()";
  338. }
  339. // end script -->
  340. </script>
  341. </head>
  342. <frameset rows="60,168,0,*" onLoad="initialize()">
  343.   <frame name="head" src="javascript:parent.emptyFrame" marginwidth=1 marginheight=1 scrolling="no" noresize>
  344.   <frameset cols="232,*">
  345.     <frame name="pic" src="javascript:parent.emptyFrame" marginwidth=1 marginheight=1 scrolling="no" noresize>
  346.     <frame name="tool" src="javascript:parent.emptyFrame" marginwidth=1 marginheight=1 scrolling="no" noresize>
  347.   </frameset>
  348.   <frame name="echo" src="javascript:parent.emptyFrame" marginwidth=1 marginheight=1 scrolling="no" noresize>
  349.   <frame>
  350. </frameset>
  351. <noframes>
  352. <h2 align="center">Netscape 2.0 other JavaScript-enabled browser required</h2>
  353. </noframes>
  354. </html>