PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
30 nov. 2011 à 19:19
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 - 16 févr. 2012 à 18:27
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 - 16 févr. 2012 à 18:27
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/53802-petit-logiciel-de-dessin-retouche-avec-canvas
https://codes-sources.commentcamarche.net/source/53802-petit-logiciel-de-dessin-retouche-avec-canvas
16 févr. 2012 à 18:27
16 févr. 2012 à 00:02
Avec cette fonction ça fonctionne impeccable, elle permet de retrouver les coordonner un div ou qu'il soit dans l'arborescence du DOM,même si les barre de défilement ont été déplacées.
function getElementCoords(element) {
var coords = {left: 0, top: 0};
while (element) {
coords.left += element.offsetLeft;
coords.top += element.offsetTop;
element = element.offsetParent;
}
return coords;
}
Je l'ai trouvé ici:
http://www.miasmatech.net/scripts/accueil/permalink.php?post_id=33
JJDai
15 févr. 2012 à 23:36
effectivement les div dans les div et les bordures posent des problèmes, mais pas insurmontables.
pour la définition de la taille dans le CSS, a priori c'est un problème connu du à l’unité par défaut du CSS, il suffit de mettre largeur et hauteur directement dans la balise.
JJdai
15 févr. 2012 à 22:57
15 févr. 2012 à 22:19
J'ai défini la taille du canvas dans la feuille de style, et apparemment il aime pas du tout, ou il manque quelque chose dans ma feuille.
Bref j'ai retiré la taille de la feuille de style et l'ai mise dans les attributs de la balise:
<canvas id='paint_canvas' width="640px" height="320px" onmousedown='test_onclick(event);'></canvas>
et tout est renté dans l'ordre, 1 pixel est 1pîxel;
par contre je ne comprends pas pourquoi, je suis preneur de toute explication
JJDai
15 févr. 2012 à 21:57
----------------
J'ai tenté de d'utiliser un canvas en m'inspirant de ce code, et j'ai un problème bizarre;
Il semble que l'unité de mesure ne soit pas la pixel, mais quelque chose comme 2.32 pixel;
pourtant j'ai bien mis ctx.scale(1,1).
En tous cas il y a une distorsion entre l'unite du canvas et de l'objet event.
Y a-t-il moyen de changer ça, ou bien ai-je loupé quelque chose ?
JJDai
13 févr. 2012 à 11:37
, le "problème" avait tout simplement disparu !
Donc mon précédent commentaire est inutile, et pose même problème avec Firefox (v10) puisqu'en effet il désactive carrément le drag'n'drop sur ce navigateur...
10 févr. 2012 à 15:47
Il n'y a plus sélection ça fonctionne très bien sauf que les image qui sont sur l'exemple et qu'on pouvait déplacer via un "drag and drop", ne peuvent plus être déplacées.
Mais bon c'est pas un gros problème, l'ajout d'un événement sur ces images peut peut être régler ce problème.
Il y a d'autre petit bug plus génant, comme la gomme qui en fonctionne pas très bien, du moins chez moi.
JJDai
10 févr. 2012 à 15:00
10 févr. 2012 à 14:17
Le code que tu suggères fonctionne bien même trop bien, du coup on ne peut plus déplacer les images sur la zone de dessin lol.
Comment faire pour évier ça ?
J'envisage de partir de cette source pour l'intégrer dans un module Xoops.
JJDai
10 déc. 2011 à 21:42
8 déc. 2011 à 18:28
Tout à fait kazma , mais avant que tout les utilisateurs de IE passent a ie9 ...
JJDai
8 déc. 2011 à 13:09
ie la supporte que a partir de ie9 tous comme la gestion des evenements par addEventListener c'est pour ca qu'il n'est pas utile de gerer les evenements par l'ancienne methodes quand aux librairies qui simule canvas elle simule le canvas que partielement.
++
7 déc. 2011 à 18:35
Citaton :
Un détail me chiffonne sur les écouteurs d'événement car de mémoire, MS IE n'est que... très ....
De toute façon IE ne supporte pas encore la balise canevas que je sache.
Il faut passer par un librairies qui est plutôt lente.
JJDai
6 déc. 2011 à 17:22
et réciproquement sa fait plaisir de voir que la source a de l’intérêt
5 déc. 2011 à 14:28
Si je peux apporter ma pierre à l'édifice, un peu de css pour contrôler l'affichage de la souris et un petit bout de code pour désactiver la sélection (et éviter la surbrillance) :
function ffalse() {
return false;
}
function ftrue() {
return true;
}
document.onselectstart = new Function ("return false");
if(window.sidebar) {
document.onmousedown = ffalse;
document.onclick = ftrue;
}
Evidemment, je ne mets pas la note maximale, peut être y auras-tu droit lorsque ce sera terminé ;)
5 déc. 2011 à 11:51
@JJDAI : Alors il faudrait juste préciser que le code est à adapter pour les versions antérieures à IE9.
Autre détail: il faudrait virer l'espace dans l'url de l'exemple après "../paink" : http://kiwik.goldzoneweb.info/scriptsite/paink/paink.html
Sinon, dsl, j'avais zappé la note : globalement, c'est un petit code sympa qui permet une bonne prise de contact et facilement évolutif.
5 déc. 2011 à 11:20
5 déc. 2011 à 09:47
Bonne base à mon avis.
Un détail me chiffonne sur les écouteurs d’événement car de mémoire, MS IE n'est que... très moyennement compatible W3C, et en particulier, l'attribution d'écouteurs d'evenement se fait différemment selon le modele utilisé (cad selon le navigateur client) :
// Modèle Microsoft
oText.attachEvent('onclick', ShowEventSource );
// Modèle W3C DOM Event Level 2
oText.addEventListener('click', ShowEventSource, false);
PS: il manque le dernier point virgule de la toute dernière ligne
30 nov. 2011 à 19:19
---------------
Pas mal de choses à améliorer, mais l'idée est sympa, et c'est une bon début.
En tout cas ça va peut être donner des idées.
JJDai