http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FAjax_Layer%2FDrag_Draw
JavaScript DHTML/Ajax Layer/Drag Draw - История изменений
2026-04-05T11:50:41Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Drag_Draw&diff=1626&oldid=prev
в 09:58, 26 мая 2010
2010-05-26T09:58:48Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:58, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Drag_Draw&diff=1627&oldid=prev
Admin: 1 версия
2010-05-26T07:15:44Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Draw / Fill Shapes: circle, rectangle, Ellipse==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
http://dynapi.sourceforge.net/<br />
GNU LESSER GENERAL PUBLIC LICENSE<br />
Version 2.1, February 1999<br />
<html><br />
<head><br />
<title>DynAPI Examples - Graphics</title><br />
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script><br />
<script language="Javascript"><br />
dynapi.library.setPath("./dynapisrc/");<br />
dynapi.library.include("dynapi.library");<br />
dynapi.library.include("dynapi.api");<br />
dynapi.library.include("dynapi.gui.Graphics");<br />
</script><br />
<script language="JavaScript"><br />
<!--<br />
DynAPI.onLoad(function() {<br />
lyr = new DynLayer();<br />
lyr.setLocation(20,80);<br />
lyr.setSize(400,400);<br />
lyr.setBgColor("#C0C0C0");<br />
DynAPI.document.addChild(lyr);<br />
graphics = new Graphics(lyr);<br />
graphics.useVML = true;<br />
graphics.setStrokeColor("#FF0000");<br />
graphics.setStrokeWeight(2);<br />
graphics.setFillColor("#009900");<br />
});<br />
function getRandomInt(min,max) {<br />
return Math.floor(min+Math.random()*(max-min+1));<br />
}<br />
function randline() {<br />
var x1 = getRandomInt(0,400);<br />
var y1 = getRandomInt(0,400);<br />
var x2 = getRandomInt(0,400);<br />
var y2 = getRandomInt(0,400);<br />
graphics.drawLine(x1,y1,x2,y2);<br />
}<br />
function randcircle() {<br />
var x = getRandomInt(0,200);<br />
var y = getRandomInt(0,200);<br />
var r = getRandomInt(20,175);<br />
graphics.drawCircle(x,y,r);<br />
}<br />
function randrect() {<br />
var x = getRandomInt(0,300);<br />
var y = getRandomInt(0,300);<br />
var w = getRandomInt(0,100);<br />
var h = getRandomInt(0,100);<br />
graphics.drawRect(x,y,w,h);<br />
}<br />
function randellipse() {<br />
var x = getRandomInt(0,150);<br />
var y = getRandomInt(0,150);<br />
var rx = getRandomInt(0,200);<br />
var ry = getRandomInt(0,200);<br />
graphics.drawEllipse(x,y,rx,ry);<br />
}<br />
function fillrandcircle() {<br />
var x = getRandomInt(0,200);<br />
var y = getRandomInt(0,200);<br />
var r = getRandomInt(20,175);<br />
var color = ( arguments.length ) ? arguments[0] : "#009900";<br />
graphics.setFillColor(color);<br />
graphics.fillCircle(x,y,r);<br />
}<br />
function fillrandrect() {<br />
var x = getRandomInt(0,300);<br />
var y = getRandomInt(0,300);<br />
var w = getRandomInt(0,100);<br />
var h = getRandomInt(0,100);<br />
var color = ( arguments.length ) ? arguments[0] : "#990099";<br />
graphics.setFillColor(color);<br />
graphics.fillRect(x,y,w,h);<br />
}<br />
function fillrandellipse() {<br />
var x = getRandomInt(0,150);<br />
var y = getRandomInt(0,150);<br />
var rx = getRandomInt(0,200);<br />
var ry = getRandomInt(0,200);<br />
var color = ( arguments.length ) ? arguments[0] : "#999900";<br />
graphics.setFillColor(color);<br />
graphics.fillEllipse(x,y,rx,ry);<br />
}<br />
function deleteLast() {<br />
alert( "unimplemented" );<br />
}<br />
function deleteAll() {<br />
alert( "unimplemented" );<br />
/*<br />
* DynAPI.document.destroyAllChildren(); // kills everything<br />
* lyr.destroyAllChildren(); // undefined<br />
* DynObject.all.DynObject13.destroyAllChildren(); // undefined<br />
*/<br />
}<br />
//--><br />
</script><br />
</head><br />
<body bgcolor="#999999"><br />
<form><br />
<INPUT TYPE="button" value="draw line" onclick="randline();"><br />
<INPUT TYPE="button" value="draw circle" onclick="randcircle();"><br />
<INPUT TYPE="button" value="draw rect" onclick="randrect();"><br />
<INPUT TYPE="button" value="draw ellipse" onclick="randellipse();"><br />
<BR><br />
<INPUT TYPE="button" value="fill circle" onclick="fillrandcircle("#00FF00");"><br />
<INPUT TYPE="button" value="fill rect" onclick="fillrandrect();"><br />
<INPUT TYPE="button" value="fill ellipse" onclick="fillrandellipse("#FF0000");"><br />
<BR><br />
<INPUT TYPE="button" value="delete last" onclick="deleteLast();"><br />
<INPUT TYPE="button" value="delete all" onclick="deleteAll();"><br />
</form><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a><br />
<br />
<br />
==Pick a color, drag and draw==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
http://dynapi.sourceforge.net/<br />
GNU LESSER GENERAL PUBLIC LICENSE<br />
Version 2.1, February 1999<br />
<html><br />
<head><br />
<title>DynAPI Examples - DynLayer Drag-n-Draw </title><br />
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script><br />
<script language="Javascript"><br />
dynapi.library.setPath("./dynapisrc/");<br />
dynapi.library.include("dynapi.api");<br />
dynapi.library.include("dynapi.api.ext.DragEvent");<br />
</script><br />
<script language="Javascript"><br />
var l1 = new Array();<br />
var counter = 0;<br />
var clicked = false;<br />
var color = "black";<br />
var into = false;<br />
dynapi.document.setTextSelectable(false);<br />
var docMouseUp = {<br />
onmouseup : function(e){<br />
clicked = false;<br />
}<br />
}<br />
var gridMouseListener = {<br />
onmouseover : function(e) {<br />
if(clicked==true) {<br />
var s = e.getSource();<br />
s.setBgColor(color);<br />
}<br />
},<br />
onmouseout : function(e) {<br />
into = false;<br />
},<br />
onmousedown : function(e) {<br />
var source = e.getSource();<br />
source.setBgColor(color);<br />
clicked = true;<br />
},<br />
onclick : function(e) {<br />
var s = e.getSource();<br />
s.setBgColor(color);<br />
},<br />
onmouseup : function(e) {<br />
clicked = false;<br />
}<br />
};<br />
var lines = 0;<br />
var constspace = 80;<br />
for(counter=0; counter < 200;counter++) {<br />
if((counter%20==0) && counter!=0) {<br />
lines++;<br />
}<br />
l1[counter] = new DynLayer();<br />
l1[counter].setBgColor("gray");<br />
l1[counter].setSize(30, 30);<br />
l1[counter].setLocation(50+((counter%20)*30), 30*lines+constspace);<br />
l1[counter].addEventListener(gridMouseListener);<br />
dynapi.document.addChild(l1[counter]);<br />
}<br />
dynapi.document.addEventListener(docMouseUp);<br />
function setColor(col) {<br />
color = col;<br />
}<br />
</script><br />
</head><br />
<body><br />
<script><br />
dynapi.document.insertAllChildren();<br />
</script><br />
<table border="0"><br />
<tr><br />
<td bgcolor="#FFFFFF">&nbsp;</td><br />
<td><br />
<a href="javascript:setColor("white")">white</a><br />
&nbsp;</td><br />
<td bgcolor="#000000">&nbsp;</td><br />
<td><br />
<a href="javascript:setColor("black")">black</a><br />
</td><br />
<td bgcolor="#008000">&nbsp;</td><br />
<td><br />
<a href="javascript:setColor("green")">green</a><br />
&nbsp;</td><br />
<td bgcolor="#FFFF00">&nbsp;</td><br />
<td><br />
<a href="javascript:setColor("yellow")">yellow</a><br />
&nbsp;</td><br />
<td bgcolor="#0000FF">&nbsp;</td><br />
<td><br />
<a href="javascript:setColor("blue")">blue</a><br />
&nbsp;</td><br />
<td bgcolor="#FF0000">&nbsp;</td><br />
<td><br />
<a href="javascript:setColor("red")">red</a><br />
&nbsp;</td><br />
</tr><br />
<tr><br />
<td colspan="12">Select a color then click and draw inside the gray area</td><br />
</tr><br />
</table><br />
<p><br />
&nbsp;&nbsp;&nbsp;&nbsp;<br />
</p><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a></div>
Admin