@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 16 févr. 2012 à 18:27
je m'etait deja mis en tete de faire cette meme fonction sans l'avoir jamais fait du coup j'ai plus besoin de le faire ++
jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015 16 févr. 2012 à 00:02
re et pour info:
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;
}
jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015 15 févr. 2012 à 23:36
Bonsoir Kazma
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
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 15 févr. 2012 à 22:57
je ne saurait que dire sinon quand j'ai cree l'ensemble j'ai fait en sorte qu'il n'y ai pas de mesures tordu ce qu'il faut eviter c'est mettre le canvas dans un div lui meme imbriqué dans un autre div et qui serait en position absolute ou relative les bordures aussi peuvent créé des problemes et aussi les float left right
jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015 15 févr. 2012 à 22:19
re bonjour, après m’être cassé la tête depuis 2 jours, j'ai fini par trouver la raison, (mais l'explication);
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
jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015 15 févr. 2012 à 21:57
bonjour
----------------
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
tefa24600
Messages postés30Date d'inscriptionsamedi 4 août 2007StatutMembreDernière intervention21 février 2012 13 févr. 2012 à 11:37
@JJDAI : en fait le problème de surbrillance viendrait de la gestion du drag'n'drop en html5. J'utilise Chrome et, entre deux versions (actuellement à la 17)
, 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...
jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015 10 févr. 2012 à 15:47
Je me suis sans doute mal exprimé.
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
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 10 févr. 2012 à 15:00
j'ai du mal a comprendre qui'il y ai selection car de mon coté ca ne le fait pas ?
jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015 10 févr. 2012 à 14:17
pour : tefa24600
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
mattj01
Messages postés10Date d'inscriptionlundi 15 mars 2010StatutMembreDernière intervention 9 mai 2011 10 déc. 2011 à 21:42
Super ! merci ça va servir à beaucoup de personnes (dont moi ^^), on attend la suite ;)
jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015 8 déc. 2011 à 18:28
Bonjour
Tout à fait kazma , mais avant que tout les utilisateurs de IE passent a ie9 ...
JJDai
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 8 déc. 2011 à 13:09
"De toute façon IE ne supporte pas encore la balise canevas que je sache."
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.
++
jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015 7 déc. 2011 à 18:35
Bonjour
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
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 6 déc. 2011 à 17:22
"ça fait plaisir de voir que certaines personnes développent en Canvas HTML5."
et réciproquement sa fait plaisir de voir que la source a de l’intérêt
tefa24600
Messages postés30Date d'inscriptionsamedi 4 août 2007StatutMembreDernière intervention21 février 2012 5 déc. 2011 à 14:28
Sympa comme source, ça fait plaisir de voir que certaines personnes développent en Canvas HTML5.
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");
Evidemment, je ne mets pas la note maximale, peut être y auras-tu droit lorsque ce sera terminé ;)
cs_hornetbzz
Messages postés59Date d'inscriptionlundi 1 décembre 2008StatutMembreDernière intervention 3 janvier 2011 5 déc. 2011 à 11:51
@Kazma : Oui merci pour cette remarque correcte.
@JJDAI : Alors il faudrait juste préciser que le code est à adapter pour les versions antérieures à IE9.
Sinon, dsl, j'avais zappé la note : globalement, c'est un petit code sympa qui permet une bonne prise de contact et facilement évolutif.
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 5 déc. 2011 à 11:20
a partir de ie 9 la gestion des evenements utilise addEventListener et si je me trompe pas on peut toujour utiliser attachEvent avec ie9 mais si on a une vision a long terme il vaut mieux utiliser addEventListener le problème dans tous ca c'est qu'il faut différencié ie9 des versions antérieur (ie 6 7 8) et ce sans utiliser le classic if document.all car ie9 le reconnais aussi
cs_hornetbzz
Messages postés59Date d'inscriptionlundi 1 décembre 2008StatutMembreDernière intervention 3 janvier 2011 5 déc. 2011 à 09:47
Salut,
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
jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015 30 nov. 2011 à 19:19
Bonjour
---------------
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.
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