-
Message publié le mercredi 25 août 2010 - 15h06 par jaouensky. L'argent ne fait pas le bonheur des pauvres!
-
Bonjour,
tout d'abord j'ai mis ce sujet dans javascript car celà relève plus du javascript, même si le titre fait penser le contraire.
Je souhaite développer un module de dessin en web, je me suis donc tourné vers la balise canvas de l'html5.
Mon code fonctionne parfaitement sur un PC avec opéra ou firefox.
Mais sur un pocket, lorsque l'on veut dessiner, le navigateur nous déplace dans la page. J'ai trouvé une option sur opéra 9.5 mobile "sélection du texte ON" qui une fois activée permer de dessiner et non plus de se déplacer, le problème est que cette option n'est pas activée par défaut et qu'elle n'existe pas sous safari ou chrome.
je cherche donc un moyen en javascript de dire que ma balise canvas est en mode selection de texte. J'ai essaye le focus, et le select mais celà ne marche pas.
Si quelqu'un a une idée, merci.
PS : je ne me rappel plus de la balise pour poster du code, afin que celà soit plus parlant
-
Message publié le mercredi 25 août 2010 - 21h25 par nours312. 
nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
-
PS : je ne me rappel plus de la balise pour poster du code, afin que celà soit plus parlant
essaye [ code ] ;)
quand tu parles de "pocketPc" tu veux parler d'un truc dans le style d'un smartphone et/ou iPad ... un tactil koi !? ou est-ce avec un ps "classique" et une utilisation à la souris ?
Si c'est tactile, je suppose que tu dois combiner et/ou utiliser des evnts différents à un navigateur "classiq" ... donc regardes déja de ce coté là si tu peux !..
Sinon, donnes nous déja un bout de code, et l'on tachera de mieux comprendre ;)
@+
-
Message publié le jeudi 26 août 2010 - 09h08 par jaouensky. L'argent ne fait pas le bonheur des pauvres!
-
oui je parle d'un smartphone, voilà le bout de code.
<head>
<style type="text/css">
#canvas {
border: 1px solid #000000;
}
</style>
<script type="application/x-javascript">
var gnx =0;
var gny =0;
var bDessin=false;
function premierePosition(event)
{
bDessin=true;
gnx=event.offsetX?(event.offsetX):event.pageX-document.getElementById("canvas").offsetLeft;
gny=event.offsetY?(event.offsetY):event.pageY-document.getElementById("canvas").offsetTop;
}
function trait(event)
{
if (bDessin==true)
{
var x =event.offsetX?(event.offsetX):event.pageX-document.getElementById("canvas").offsetLeft;
var y =event.offsetY?(event.offsetY):event.pageY-document.getElementById("canvas").offsetTop;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(gnx,gny);
ctx.lineTo(x,y);
ctx.stroke();
gnx=x;
gny=y;
}
}
function fin()
{
bDessin=false;
}
function focus()
{
document.getElementById("canvas").focus();
}
</script>
</head>
<body >
<canvas id="canvas" width="230" height="129" onMouseDown="premierePosition(event);" onMouseUp="fin();" onMouseMove="trait(event);""> </canvas>
</body>
j'ai regardé les évènements possibles en JS, et je ne trouve pas mon bonheur, je continue mes recherches.
-
Message publié le jeudi 26 août 2010 - 10h38 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
-
Bon ... ben c'est bien là le soucy !... tu utilise onmousedown, onmouseup et onmousemove mais ils ne sont pas tous reconnus par les smartphone !... :D
j'ai trouvé 2 pages qui devraient t'intéresser :
l'officielle de OPERA MINI 4 et
une analyse de webkit sur android
pour résumer, tu devrais pouvoir utiliser :mouseover, mouseenter, mouseleave, mousemove, DOMFocusIn, DOMFocusOut
tu peux tester ça sur
iphone.OpenCycleMap.org depuis ton smartphone et/ou ton navigateur "classique" ... et éventuellement analyser leur code source pour mieux comprendre le fonctionnement
@++
-
Message publié le jeudi 26 août 2010 - 10h49 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
-
Ha oui, aussi, j'ai entendu parlé d'une
lib jQuery mobile dédié aux smartphone, je ne sais pas ou ça en est, ni ce que c'est sensé faire, mais tu peux toujours y jeter un oeil, ça te facilitera la vie si elle existe !
@++
-
Message publié le jeudi 26 août 2010 - 11h56 par jaouensky. L'argent ne fait pas le bonheur des pauvres!
-
Merci de ta réponse nours312, mais le onmousedown, onmouseup et onmousemove fonctionne sur mon navigateur de test,
le problème c'est que tant que je suis pas en mode sélection de texte, je peux rien faire dans mon canvas, ce que je veux faire c'est réussir au chargement de ma page, a forcer l'activation du mode sélection de texte.
En revanche si je trouve une solution, les fonctions mouseover, mouseenter, mouseleave, mousemove, DOMFocusIn, DOMFocusOut me seront utile pour que mon code fonctionne sur tout les navigateur.
-
Message publié le jeudi 26 août 2010 - 15h09 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
-
ben je sais pas pour toi, mais sur le liens que je t'ai passé iphone.OpenCycleMap.org je n'ai pas modifié mon navigateur, et il n'y avait pas de déplacement de la page !... et pourtant lorsque tu l'ouvre avec un navigateur "classique" tu vois bien qu'elle est bien plus grande que ce qu'il y a sur ton smartphone, de plus t constate bien que le bandeau Haut (avec zoom) ne ce déplace pas !... e qui prouve bien qu'il n'y a que la map qui bouge !
Si tu arrives à obtenir les event sur une div ou une img pour modifier (onmousemove) sa position dans son "parent", tu dois pouvoir y affecter de la meme manière les fonctions te servant à dessiner, et bloquer le déplacement de la page !
:)
autrechose :: tu as testé en ajoutant en fin de chacune de tes function JS
return false; ??
ou event.stop(); // au début ??
ça peux permettre d'éviter la propagation de l'évent, et ainsi stopper le déplacement de la page => donc donner la main à ton apli !...
-
Message publié le jeudi 26 août 2010 - 16h18 par jaouensky. L'argent ne fait pas le bonheur des pauvres!
-
effectivement sur le lien que tu donnes, il n'y a pas de déplacement sur un mobile, après analyse du code, j'ai l'impression que le code recalcule la position que doit avoir la map pour être centrée dans la page, c'est donc que les onMouseOver... sont actifs dés le début mais je n'arrive pas à voir comment.
Je vais continuer d'analyser le code, mais il n'est pas limpide.
D'autre part j'ai testé return false; et event.stop(); mais cela ne change rien.
-
Message publié le vendredi 27 août 2010 - 10h09 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
-
Bon, j'ai fais un test hier soir, :
http://4code.nours312.com/dragAndro.html ça ne fonctionne que sur smartphone (testé Android 2.1) :D
mon JS est comme ça (avec prototype) ::
var position = [0, 0];
var init = [0, 0];
document.observe('dom:loaded', function(){
$('maDiv').observe('touchstart', function(e){
e.element().innerHTML = 'onStart' ;
event.preventDefault();
init = [e.touches[0].pageX, e.touches[0].pageY];
});
$('maDiv').observe('touchend', function(e){
e.element().innerHTML = 'onFinish' ;
position = $('maDiv').viewportOffset();
});
$('maDiv').observe('touchmove', function(event){
event.preventDefault();
if(event.touches.length == 1){
var e = event.touches[0];
var div = $('maDiv');
var dif = [(e.pageX-init[0]), (e.pageY-init[1])];
var pos = [(dif[0]+position[0]), (dif[1]+position[1])];
$('maDiv').setStyle({top:pos[1]+'px', left:pos[0]+'px'});
}
return false;
});
});
alors, si tu ne veux pas utiliser
prototype il te suffi de modifier $() par document.getElementById() les e.element() par la div, et les fonctions observe par addEventListener
le but de se script n'est que de déplacer une div avec un tactile, il ne fonctionne pas sous un navigateur "classiq" !... il faudrait que je fasse un test sur ton code pour voir si j'arrive à l'adapter !... mis sinon, tu devrais bien y arriver !
les events sont : touchstart, touchend, touchmove.
Pour retrouver les coordonés du point "touché" j'ai utilisé : event.touches[0].pageX et event.touches[0].pageY après les avoir passé par la fonction event.preventDefault();
à mon avis event.touches est un tableau contenant tous les points "tactiles" (pour le muliTouch) ... donc ensuite, tu peux trés bien imaginer un tas de truc ;)
@++
-
Message publié le lundi 30 août 2010 - 17h57 par jaouensky. L'argent ne fait pas le bonheur des pauvres!
-
J'ai enfin pu me remettre sur ce code, j'ai pu lancé ta page sous opéra en WM 6.5, et le div ne se déplace pas dans la fenêtre.
On peu remplacer le div par mon canvas, ça marche toujours, ensuite j'ai commencé de mettre mon code de dessin dans les évènements touchstart... Il faut maintenant que je choppe la position avec event.touches[0].pageX, la suite des aventures demain.
all html : Le portail des webmaster
