|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 DESSINER DES CERCLES/DISQUES/LIGNES EN JAVASCRIPT
 Information sur la source
 Description
Cette source permet de dessiner des cercles, des disques et des lignes en javascript sans utiliser des outils tels que SVG ou Canvas, cela permet d'être utilisable sous la plupart des navigateurs, mais il n'y a pas vraiment de lissage et c'est un peu lent. Astuces : Pour faire un cercle lissé et flou mettez par exemple ceci comme paramètres : - Rayon : 150 - Epaisseur du cercle : 50 - Opacité du cercle : très basse ( entre 1 et 20 ) Pour faire une ligne lissée : - Epaisseur de la ligne : plus grande que 3 de préférence - Opacité de la ligne: faible ( entre 1 et 20 ) D'autres possibilités existent, il suffit de tester. Et n'hésitez pas à me dire si vous avez des bugs ! :)
 Source
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
- <script type="text/javascript">
- <!--
- function drawCircle(a, b, r, w, c, o) {
- if (document.getElementById('full').checked) {
- var h = 1;
- }
- else {
- var h = w;
- }
- var y = 0;
- for (x = 0; x <= Math.round(r / Math.sqrt(2)); x++) {
- y = Math.sqrt(Math.pow(r, 2) - (Math.pow(x, 2)));
- if (!document.getElementById('full').checked) {
- setPx(x + a, y + b, w, h, c, o);
- setPx(a - x, y + b, w, h, c, o);
- setPx(a - x, b - y, w, h, c, o);
- setPx(x + a, b - y, w, h, c, o);
- setPx(y + a, b - x, w, h, c, o);
- setPx(a - y, b - x, w, h, c, o);
- setPx(y + a, x + b, w, h, c, o);
- setPx(a - y, x + b, w, h, c, o);
- }
- else {
- setPx(a - x, y + b, 2 * x, h, c, o);
- setPx(a - x, b - y, 2 * x, h, c, o);
- setPx(a - y, b - x, 2 * y, h, c, o);
- setPx(a - y, x + b, 2 * y, h, c, o);
- }
- }
- }
-
- function drawLine(x1, y1, x2, y2, w, c, o) {
- var y = x = 0;
- var signX = (x1 - x2) / Math.abs(x1 - x2) * -1;
- var signY = (y1 - y2) / Math.abs(y1 - y2) * -1;
- if (x2 == x1) {
- setPx(Math.min(x1, x2), Math.min(y1, y2), w, Math.abs(y2 - y1), c, o);
- } else if (y1 == y2) {
- setPx(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), w, c, o);
- } else {
- if (Math.abs((y2 - y1) / (x2 - x1)) <= 1) {
- while (x <= Math.abs(x2 - x1)) {
- y = (y2 - y1) / Math.abs(x2 - x1) * x;
- setPx(signX * x + x1, y + y1, w, w, c, o);
- x++;
- }
- } else {
- while (y <= Math.abs(y2 - y1)) {
- x = (x2 - x1) / Math.abs(y2 - y1) * y;
- setPx(x + x1, signY * y + y1, w, w, c, o);
- y++;
- }
- }
- }
- }
-
- function setPx(x, y, w, h, c, o) {
- var px = document.createElement('div');
- px.id = 'px';
- px.style.cssText = 'position:absolute; top:' + y + 'px; left:' + x + 'px; background-color:' + c + '; width:' + w + 'px; height:' + h + 'px; opacity:' + o / 100 + '; filter:alpha(opacity=' + o + ');';
- document.body.appendChild(px);
- }
-
- function clearPx() {
- while (document.getElementById('px')) {
- document.body.removeChild(document.getElementById('px'));
- }
- }
- // -->
- </script>
- <style type="text/css">
- body {
- font-family:verdana, arial;
- font-size:11px;
- color:#333333;
- cursor:default;
- margin:0px;
- }
-
- p {
- margin:0px;
- font-weight:normal;
- }
-
- form {
- margin:0px;
- }
-
- #main {
- border:solid 5px #CCCCCC;
- background-color:#F0F0F0;
- text-align:center;
- padding:5px;
- width:500px;
- margin:5px auto 5px auto;
- }
- </style>
- <title>Dessiner en Javascript</title>
- </head>
- <body>
- <div id="main">
- <form method="post" action="javascript:;" style="float:left;">
- <p>
- <span style="font-weight:bold">Cercle</span><br/><br/>
- Abcisse du centre du cercle<br/>
- <input type="text" id="x" value="100"/><br/>
- Ordonnée du centre du cercle<br/>
- <input type="text" id="y" value="100"/><br/>
- Rayon du cercle<br/>
- <input type="text" id="r" value="50"/><br/>
- Epaisseur du cercle<br/>
- <input type="text" id="w" value="1"/><br/>
- Couleur du cercle<br/>
- <input type="text" id="c" value="red"/><br/>
- Opacité du cercle<br/>
- <input type="text" id="o" value="100"/><br/><br/>
- <input type="checkbox" id="full"/><label for="full"> Dessiner plein (disque)</label><br/><br/>
- <input type="submit" value="Afficher"
- onclick="drawCircle(parseInt(document.getElementById('x').value), parseInt(document.getElementById('y').value),
- parseInt(document.getElementById('r').value), parseInt(document.getElementById('w').value),
- document.getElementById('c').value, parseInt(document.getElementById('o').value));"/>
- </p>
- </form>
- <form method="post" action="javascript:;" style="float:right;">
- <p>
- <span style="font-weight:bold">Ligne</span><br/><br/>
- Abcisse du premier point<br/>
- <input type="text" id="x1" value="80"/><br/>
- Ordonnée du premier point<br/>
- <input type="text" id="y1" value="200"/><br/>
- Abcisse du second point<br/>
- <input type="text" id="x2" value="100"/><br/>
- Ordonnée du second point<br/>
- <input type="text" id="y2" value="100"/><br/>
- Epaisseur de la ligne<br/>
- <input type="text" id="w2" value="1"/><br/>
- Couleur de la ligne<br/>
- <input type="text" id="c2" value="red"/><br/>
- Opacité de la ligne<br/>
- <input type="text" id="o2" value="100"/><br/><br/>
- <input type="submit" value="Afficher"
- onclick="drawLine(parseInt(document.getElementById('x1').value), parseInt(document.getElementById('y1').value),
- parseInt(document.getElementById('x2').value), parseInt(document.getElementById('y2').value),
- parseInt(document.getElementById('w2').value), document.getElementById('c2').value, parseInt(document.getElementById('o2').value));"/>
- </p>
- </form>
- <div style="clear:both;"></div>
- <form method="post" action="javascript:;" style="border-top:solid 1px #CCCCCC; margin-top:5px; padding-top:5px;">
- <p>
- <input type="submit" value="Effacer" onclick="clearPx();"/>
- <input type="submit" value="Infos" onclick="alert('Attention, cette application Javascript est très lente sous IE (surtout la version 8).\n' +
- 'Elle a été testée avec succes sous:\n -Firefox 2\n -Firefox 3.0 RC1\n -IE7\n -IE8 Beta 1\n -Opera 9.26\n -Safari 3.1.1')"/>
- </p>
- </form>
- </div>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript">
<!--
function drawCircle(a, b, r, w, c, o) {
if (document.getElementById('full').checked) {
var h = 1;
}
else {
var h = w;
}
var y = 0;
for (x = 0; x <= Math.round(r / Math.sqrt(2)); x++) {
y = Math.sqrt(Math.pow(r, 2) - (Math.pow(x, 2)));
if (!document.getElementById('full').checked) {
setPx(x + a, y + b, w, h, c, o);
setPx(a - x, y + b, w, h, c, o);
setPx(a - x, b - y, w, h, c, o);
setPx(x + a, b - y, w, h, c, o);
setPx(y + a, b - x, w, h, c, o);
setPx(a - y, b - x, w, h, c, o);
setPx(y + a, x + b, w, h, c, o);
setPx(a - y, x + b, w, h, c, o);
}
else {
setPx(a - x, y + b, 2 * x, h, c, o);
setPx(a - x, b - y, 2 * x, h, c, o);
setPx(a - y, b - x, 2 * y, h, c, o);
setPx(a - y, x + b, 2 * y, h, c, o);
}
}
}
function drawLine(x1, y1, x2, y2, w, c, o) {
var y = x = 0;
var signX = (x1 - x2) / Math.abs(x1 - x2) * -1;
var signY = (y1 - y2) / Math.abs(y1 - y2) * -1;
if (x2 == x1) {
setPx(Math.min(x1, x2), Math.min(y1, y2), w, Math.abs(y2 - y1), c, o);
} else if (y1 == y2) {
setPx(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), w, c, o);
} else {
if (Math.abs((y2 - y1) / (x2 - x1)) <= 1) {
while (x <= Math.abs(x2 - x1)) {
y = (y2 - y1) / Math.abs(x2 - x1) * x;
setPx(signX * x + x1, y + y1, w, w, c, o);
x++;
}
} else {
while (y <= Math.abs(y2 - y1)) {
x = (x2 - x1) / Math.abs(y2 - y1) * y;
setPx(x + x1, signY * y + y1, w, w, c, o);
y++;
}
}
}
}
function setPx(x, y, w, h, c, o) {
var px = document.createElement('div');
px.id = 'px';
px.style.cssText = 'position:absolute; top:' + y + 'px; left:' + x + 'px; background-color:' + c + '; width:' + w + 'px; height:' + h + 'px; opacity:' + o / 100 + '; filter:alpha(opacity=' + o + ');';
document.body.appendChild(px);
}
function clearPx() {
while (document.getElementById('px')) {
document.body.removeChild(document.getElementById('px'));
}
}
// -->
</script>
<style type="text/css">
body {
font-family:verdana, arial;
font-size:11px;
color:#333333;
cursor:default;
margin:0px;
}
p {
margin:0px;
font-weight:normal;
}
form {
margin:0px;
}
#main {
border:solid 5px #CCCCCC;
background-color:#F0F0F0;
text-align:center;
padding:5px;
width:500px;
margin:5px auto 5px auto;
}
</style>
<title>Dessiner en Javascript</title>
</head>
<body>
<div id="main">
<form method="post" action="javascript:;" style="float:left;">
<p>
<span style="font-weight:bold">Cercle</span><br/><br/>
Abcisse du centre du cercle<br/>
<input type="text" id="x" value="100"/><br/>
Ordonnée du centre du cercle<br/>
<input type="text" id="y" value="100"/><br/>
Rayon du cercle<br/>
<input type="text" id="r" value="50"/><br/>
Epaisseur du cercle<br/>
<input type="text" id="w" value="1"/><br/>
Couleur du cercle<br/>
<input type="text" id="c" value="red"/><br/>
Opacité du cercle<br/>
<input type="text" id="o" value="100"/><br/><br/>
<input type="checkbox" id="full"/><label for="full"> Dessiner plein (disque)</label><br/><br/>
<input type="submit" value="Afficher"
onclick="drawCircle(parseInt(document.getElementById('x').value), parseInt(document.getElementById('y').value),
parseInt(document.getElementById('r').value), parseInt(document.getElementById('w').value),
document.getElementById('c').value, parseInt(document.getElementById('o').value));"/>
</p>
</form>
<form method="post" action="javascript:;" style="float:right;">
<p>
<span style="font-weight:bold">Ligne</span><br/><br/>
Abcisse du premier point<br/>
<input type="text" id="x1" value="80"/><br/>
Ordonnée du premier point<br/>
<input type="text" id="y1" value="200"/><br/>
Abcisse du second point<br/>
<input type="text" id="x2" value="100"/><br/>
Ordonnée du second point<br/>
<input type="text" id="y2" value="100"/><br/>
Epaisseur de la ligne<br/>
<input type="text" id="w2" value="1"/><br/>
Couleur de la ligne<br/>
<input type="text" id="c2" value="red"/><br/>
Opacité de la ligne<br/>
<input type="text" id="o2" value="100"/><br/><br/>
<input type="submit" value="Afficher"
onclick="drawLine(parseInt(document.getElementById('x1').value), parseInt(document.getElementById('y1').value),
parseInt(document.getElementById('x2').value), parseInt(document.getElementById('y2').value),
parseInt(document.getElementById('w2').value), document.getElementById('c2').value, parseInt(document.getElementById('o2').value));"/>
</p>
</form>
<div style="clear:both;"></div>
<form method="post" action="javascript:;" style="border-top:solid 1px #CCCCCC; margin-top:5px; padding-top:5px;">
<p>
<input type="submit" value="Effacer" onclick="clearPx();"/>
<input type="submit" value="Infos" onclick="alert('Attention, cette application Javascript est très lente sous IE (surtout la version 8).\n' +
'Elle a été testée avec succes sous:\n -Firefox 2\n -Firefox 3.0 RC1\n -IE7\n -IE8 Beta 1\n -Opera 9.26\n -Safari 3.1.1')"/>
</p>
</form>
</div>
</body>
</html>
 Conclusion
Ce code permet de faire quelques dessins mais est assez ( voire très ) lent sous IE, préférez donc un navigateur comme Opera, Safari ou Firefox pour le tester. (les plus rapides sont Opera et Safari pour ce code).
 Fichier Zip
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
 Télécharger le zip
 Historique
- 25 mai 2008 08:53:27 :
- Ajout d'un Zip.
- 25 mai 2008 11:34:20 :
- Ajout dune petite astuce dans la description du code...
Ajout d'une capture d'écran.
- 27 mai 2008 11:10:58 :
- Ajout de la fonction de dessin de lignes. Modification de la capture, du titre, de la source et des descriptions.
- 27 mai 2008 11:14:02 :
- Modification du titre, des descriptions, et de la source. Modification de la capture.
Ajout de la fonction de dessin de lignes.
 Sources du même auteur
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
Transformer une chaine en ligne de code [ par AlexP ]
Bonjour,J'ai écris un programme qui me génére des lignes de code. Or javascript ne les execute pas.Ex : var i=5var chaine ="formulaire.checkbox"+i+"ch
annuler le dbclick [ par Stephane ]
salutvoila je fais un genre d'explorateur avec des lignes représentant des fichiers, donc je voudrai que quand je clique sur une ligne ca me sélection
Figer une ligne de tableau ?? [ par mickelo ]
Y a t-il moyen de figer une ligne de tableau pour que lorsqu'on défile la page grace a l'ascenseur cette ligne reste en haut de page, une sorte de rec
Figer une ligne de tableau [ par mickelo ]
Y a t-il moyen de figer une ligne de tableau pour que lorsqu'on défile la page grace a l'ascenseur cette ligne reste en haut de page, une sorte de rec
Figer une ligne de tableau [ par mickelo ]
Y a t-il moyen de figer une ligne de tableau pour que lorsqu'on défile la page grace a l'ascenseur cette ligne reste en haut de page, une sorte de rec
remplacer un retour à la ligne dans une zone de texte [ par nours2001 ]
Bonsoir,Je récupère le contenu d'une zone de texte multiligne et je voudrais l'afficher dans une nouvelle fenêtre. le problème, c'est qu'il faudrait q
Editeur d'équation en ligne [ par Blasteur ]
Salut,je suis à la recherche d'un outil permettant de saisir des équations mathématiques sur une page web et générant ensuite soit tout le code html n
Pb js avec Netscape [ par manueg ]
Bonjour à tous, je ne comprends pas pourquoi ce code fonctionne sans pb sous IE alors qu'avec Netscape il ne trouve pas la page que je veux afficher e
compatible netscape [ par vingran ]
salutje voudrait savoir comment transcrire cet ligne de code utilisée pour IE pour qu'elle marche sur Netscape:document.getElementById("objet1").style
Bug Mozilla ??? [ par stephbb75 ]
Salut tous,J'ai une choses curieuse avec Mozilla (V1.2a).Je fait un sucript, il fonctionne sous IE, NS mais il ne fonctionne mal sous Mozilla ...En ch
|
 Téléchargements
Logiciels à télécharger sur le même thème :
|