JavaScript DHTML/Ajax Layer/Drag Draw
Draw / Fill Shapes: circle, rectangle, Ellipse
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">
<!--
DynAPI.onLoad(function() {
lyr = new DynLayer();
lyr.setLocation(20,80);
lyr.setSize(400,400);
lyr.setBgColor("#C0C0C0");
DynAPI.document.addChild(lyr);
graphics = new Graphics(lyr);
graphics.useVML = true;
graphics.setStrokeColor("#FF0000");
graphics.setStrokeWeight(2);
graphics.setFillColor("#009900");
});
function getRandomInt(min,max) {
return Math.floor(min+Math.random()*(max-min+1));
}
function randline() {
var x1 = getRandomInt(0,400);
var y1 = getRandomInt(0,400);
var x2 = getRandomInt(0,400);
var y2 = getRandomInt(0,400);
graphics.drawLine(x1,y1,x2,y2);
}
function randcircle() {
var x = getRandomInt(0,200);
var y = getRandomInt(0,200);
var r = getRandomInt(20,175);
graphics.drawCircle(x,y,r);
}
function randrect() {
var x = getRandomInt(0,300);
var y = getRandomInt(0,300);
var w = getRandomInt(0,100);
var h = getRandomInt(0,100);
graphics.drawRect(x,y,w,h);
}
function randellipse() {
var x = getRandomInt(0,150);
var y = getRandomInt(0,150);
var rx = getRandomInt(0,200);
var ry = getRandomInt(0,200);
graphics.drawEllipse(x,y,rx,ry);
}
function fillrandcircle() {
var x = getRandomInt(0,200);
var y = getRandomInt(0,200);
var r = getRandomInt(20,175);
var color = ( arguments.length ) ? arguments[0] : "#009900";
graphics.setFillColor(color);
graphics.fillCircle(x,y,r);
}
function fillrandrect() {
var x = getRandomInt(0,300);
var y = getRandomInt(0,300);
var w = getRandomInt(0,100);
var h = getRandomInt(0,100);
var color = ( arguments.length ) ? arguments[0] : "#990099";
graphics.setFillColor(color);
graphics.fillRect(x,y,w,h);
}
function fillrandellipse() {
var x = getRandomInt(0,150);
var y = getRandomInt(0,150);
var rx = getRandomInt(0,200);
var ry = getRandomInt(0,200);
var color = ( arguments.length ) ? arguments[0] : "#999900";
graphics.setFillColor(color);
graphics.fillEllipse(x,y,rx,ry);
}
function deleteLast() {
alert( "unimplemented" );
}
function deleteAll() {
alert( "unimplemented" );
/*
* DynAPI.document.destroyAllChildren(); // kills everything
* lyr.destroyAllChildren(); // undefined
* DynObject.all.DynObject13.destroyAllChildren(); // undefined
*/
}
//-->
</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();">
<BR>
<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");">
<BR>
<INPUT TYPE="button" value="delete last" onclick="deleteLast();">
<INPUT TYPE="button" value="delete all" onclick="deleteAll();">
</form>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Pick a color, drag and draw
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>
<table border="0">
<tr>
<td bgcolor="#FFFFFF"> </td>
<td>
<a href="javascript:setColor("white")">white</a>
</td>
<td bgcolor="#000000"> </td>
<td>
<a href="javascript:setColor("black")">black</a>
</td>
<td bgcolor="#008000"> </td>
<td>
<a href="javascript:setColor("green")">green</a>
</td>
<td bgcolor="#FFFF00"> </td>
<td>
<a href="javascript:setColor("yellow")">yellow</a>
</td>
<td bgcolor="#0000FF"> </td>
<td>
<a href="javascript:setColor("blue")">blue</a>
</td>
<td bgcolor="#FF0000"> </td>
<td>
<a href="javascript:setColor("red")">red</a>
</td>
</tr>
<tr>
<td colspan="12">Select a color then click and draw inside the gray area</td>
</tr>
</table>
<p>
</p>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
