Forums : Xul, Xbl, JS...

Hello,

après quelques recherches, j'y suis enfin arrivé et avec du pur XUL ! L'astuce consiste à utiliser une stack. En premier, j'y met mon image puis une box à laquelle j'affecte un style CSS et que je prends soin de cacher (visibility=hidden).

Ensuite, j'utilise les fonctions onmousedown et onmouseup au niveau de la stack pour initialiser le dessin dynamique de la box. Sur mousedown, j'affiche la box (visibility=visible), j'affecte sa taille à 0,0 et je place ses attributs top et left en fonction de la position de la souris (event.clientX et event.clientY). Enfin, j'affecte une fonction onmousemove sur la stack. Cette fonction met à jour la taille de la box en fonction de la position de la souris. Enfin, sur mouseup, je récupère ce que je veux (les coordonnées par exemple) et je remet la fonction onmousemove de la stack à null...

Une partie du code XUL:

<stack id="stack_box" onmousedown="start_box (event);"  onmouseup="stop_box (event);">
<image id="test_img" src="test.png" />
<box id="dyna_zoom_box"/>
</stack>

Le Style de base:

#dyna_zoom_box {
  visibility: hidden;
  border: 1px solid red;
}

Le code javascript qui fait bouger tout ça:

function start_box (evt) {
    var r = document.getElementById('dyna_zoom_box');
    r.width = 0;
    r.height = 0;
    r.left = evt.clientX - evt.target.boxObject.x;
    r.top = evt.clientY - evt.target.boxObject.y;
    r.style.visibility = 'visible';
    var z = document.getElementById('stack_box');
    z.onmousemove = moveRubber;
}
function move_box (evt) {
  var r = document.getElementById('dyna_zoom_box');
  r.width = (evt.clientX - evt.target.boxObject.x) - parseInt(r.left);
  r.height = (evt.clientY - evt.target.boxObject.y) - parseInt(r.top);
}
function stop_box (evt) {
 var r = document.getElementById('dyna_zoom_box');
 var x1 = r.left; x1=parseInt(x1.replace(/px/,""));
 var x2 = r.width; x2=parseInt(x2.replace(/px/,"")); x2=x1+x2;
 var y1 = r.top; y1=parseInt(y1.replace(/px/,""));
 var y2 = r.height; y2=parseInt(y2.replace(/px/,"")); y2=y1+y2;
alert ("Coordonnees: X1:"+ x1 + " X2:" + x2 + " Y1:"+y1+" Y2:"+y2);
  var z = document.getElementById('stack_box');
    z.onmousemove = null;
}

Bon, maintenant, il me reste à voir comment je fais pour extrapoler les coordonnées X et Y en coordonnées Lambert 2 étendu sur ma carte...