JavaScript DHTML/Ajax Layer/Drag Draw
Draw / Fill Shapes: circle, rectangle, Ellipse
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - Graphics</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.library"); dynapi.library.include("dynapi.api"); dynapi.library.include("dynapi.gui.Graphics"); </script> <script language="JavaScript">
</script> </head> <body bgcolor="#999999"> <form>
<INPUT TYPE="button" value="draw line" onclick="randline();"> <INPUT TYPE="button" value="draw circle" onclick="randcircle();"> <INPUT TYPE="button" value="draw rect" onclick="randrect();"> <INPUT TYPE="button" value="draw ellipse" onclick="randellipse();">
<INPUT TYPE="button" value="fill circle" onclick="fillrandcircle("#00FF00");"> <INPUT TYPE="button" value="fill rect" onclick="fillrandrect();"> <INPUT TYPE="button" value="fill ellipse" onclick="fillrandellipse("#FF0000");">
<INPUT TYPE="button" value="delete last" onclick="deleteLast();"> <INPUT TYPE="button" value="delete all" onclick="deleteAll();">
</form> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Pick a color, drag and draw
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - DynLayer Drag-n-Draw </title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("dynapi.api.ext.DragEvent");
</script> <script language="Javascript">
var l1 = new Array();
var counter = 0;
var clicked = false;
var color = "black";
var into = false;
dynapi.document.setTextSelectable(false);
var docMouseUp = {
onmouseup : function(e){
clicked = false;
}
}
var gridMouseListener = {
onmouseover : function(e) {
if(clicked==true) {
var s = e.getSource();
s.setBgColor(color);
}
},
onmouseout : function(e) {
into = false;
},
onmousedown : function(e) {
var source = e.getSource();
source.setBgColor(color);
clicked = true;
},
onclick : function(e) {
var s = e.getSource();
s.setBgColor(color);
},
onmouseup : function(e) {
clicked = false;
}
};
var lines = 0;
var constspace = 80;
for(counter=0; counter < 200;counter++) {
if((counter%20==0) && counter!=0) {
lines++;
}
l1[counter] = new DynLayer();
l1[counter].setBgColor("gray");
l1[counter].setSize(30, 30);
l1[counter].setLocation(50+((counter%20)*30), 30*lines+constspace);
l1[counter].addEventListener(gridMouseListener);
dynapi.document.addChild(l1[counter]);
}
dynapi.document.addEventListener(docMouseUp);
function setColor(col) {
color = col;
}
</script> </head> <body> <script>
dynapi.document.insertAllChildren();
</script>
|
<a href="javascript:setColor("white")">white</a> |
<a href="javascript:setColor("black")">black</a> |
<a href="javascript:setColor("green")">green</a> |
<a href="javascript:setColor("yellow")">yellow</a> |
<a href="javascript:setColor("blue")">blue</a> |
<a href="javascript:setColor("red")">red</a> |
||||||
| Select a color then click and draw inside the gray area | |||||||||||
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
