Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
#1 Wed 10 May 2006 14:43
- Rastafaraï 1.0
- Invité
navigation par glisser-deposer
jai recuperé un code de pilat que jai rebidouillé pour que le systeme de navigation par glisser-deposer prenne
en compte les valeurs du currentscale et de la largeur longueur du viewbox.
lastuce a ete de mettre un <svg> "fille" dans le <svg> "mère" et en fait le systeme de navigation repose
sur le deplacement du <svg> "fille".
pour le moment ca convient a mes besoins mais je ne le trouve pas "elegant" et à terme pas si pratique que ca
Initialement jai fait une premiere tentative de creation d'un systeme de navigation par glisser-deposer reposant
cette fois sur la modif des valeurs du viewbox mais ca me donne un truc hasardeux
Si quelqu un a mieux je suis preneur ?
le code du fichier svg :
Code:
<?xml version='1.0' encoding='iso-8859-1'?>
<svg id="princ" width='200' height='200' viewBox="-10 -10 200 200" onload='init(evt)'>
<script><![CDATA[
var appui=false,cible='',xt1=0,yt1=0,objet='',svgdoc='';
SVGDocument ="";
SVGRoot ="";
function init(evt){
svgdoc=evt.target.ownerDocument;
SVGDocument = evt.target.ownerDocument;
SVGRoot = SVGDocument.getElementById("princ");
obj=svgdoc.getElementById('fille');
contour=obj.getBBox();
trace='M'+contour.x+' '+contour.y+' l'+contour.width+' 0 0 '+contour.height+' -'+contour.width+' 0z';
obj=svgdoc.getElementById('boite1');
obj.setAttribute('d',trace)
}
function bouger(evt){
var matro = SVGRoot.getAttribute("viewBox").split(" ");
var larg = matro[2]/SVGRoot.getAttribute("width");
var long = matro[3]/SVGRoot.getAttribute("height");
var monechelle = SVGRoot.currentScale;
tx=SVGRoot.currentTranslate.x; ty=SVGRoot.currentTranslate.y;
xm=(((evt.clientX)-tx)*larg)/monechelle;
ym=(((evt.clientY)-ty)*long)/monechelle;
if ((cible=='boite1')&&(appui==true)){
objet=svgdoc.getElementById('fille');
var xt2=parseInt(objet.getAttribute('x')),yt2=parseInt(objet.getAttribute('y'));
var depx=((xt2+xm-xt1)),depy=((yt2+ym-yt1));
objet.setAttribute('x',(depx));
objet.setAttribute('y',(depy));
contour=objet.getBBox();
target=svgdoc.getElementById(cible);
trace='M'+contour.x+' '+contour.y+' l'+contour.width+' 0 0 '+contour.height+' -'+contour.width+' 0z';
target.setAttribute('d',trace);
xt1=xm;yt1=ym
}
}
function lacher(evt){
appui=false
}
function cliquer(evt){
cible=evt.getTarget().getAttribute('id');
if (cible=='boite1'){
appui=true;
var matro = SVGRoot.getAttribute("viewBox").split(" ");
var larg = matro[2]/SVGRoot.getAttribute("width");
var long = matro[3]/SVGRoot.getAttribute("height");
var monechelle = SVGRoot.currentScale;
tx=SVGRoot.currentTranslate.x; ty=SVGRoot.currentTranslate.y;
xt1=(parseInt(evt.clientX-tx)*larg)/monechelle ;
yt1=(parseInt(evt.clientY-ty)*long)/monechelle ;
}
}
]]></script>
<g onmouseup='lacher(evt)'>
<g onmousemove='bouger(evt)' onmousedown='cliquer(evt)'>
<svg id='fille' width='600' height='600' viewBox="0 0 1000 900" x="00" y="00" >
<rect opacity="0" x='-1000' y='-30000' width='90000' height='50000' fill='salmon'/>
<g id="Calque_x0020_1" style="fill-rule:nonzero;clip-rule:nonzero;fill:#CCFFCC;stroke:#CC6600;stroke-width:0.25;stroke-miterlimit:4;">
<g style="stroke-miterlimit:1;">
<path style="fill:none;" d="M493.3,464.2c0,0,1-1.1,2.7-2.7c-2-0.4-3.8-0.8-5.6-1.1l0.3,5.4c1.7-1,2.7-1.5,2.7-1.5z"/>
<path d="M186.5,368.7c6.7-11.2,24.7-38.2,24.7-38.2l34.4-9.1c-5.3-18.7-10.3-36.7-10.8-39.3c-1.1-5.6-28.1-53.9-29.2-57.3s-21.3-46.1-21.3-49.4s4.5-60.7,4.5-60.7l-4.5-6.7c0,0,27-22.5,30.3-23.6c1.1-0.4,4.3-5.6,8.1-12.5c-13.6-6.4-30.5-13.4-30.5-13.4
l-29.2,6.7l-64,27l-24.7,1.1L62.9,117c0,0-2.2,41.6-5.6,51.7S34.9,221.5,34.9,226s8.1,58.4,8.1,68.5s35.7,64,43.6,80.9s30.3,64,33.7,73s24.7,46.1,24.7,46.1l18.1,14.3c0.9-11.2,2-22.2,3.3-28.9c3.4-18,13.5-100,20.2-111.2z"/>
<path d="M214.6,84.4c-3.4,1.1-30.3,23.6-30.3,23.6l4.5,6.7c0,0-4.5,57.3-4.5,60.7s20.2,46.1,21.3,49.4s28.1,51.7,29.2,57.3c0.5,2.6,5.5,20.6,10.8,39.3l29.6-7.8l4.5-2.2l97.8,36l23.1,12.5l43.2-72l11.2-19.1c0,0,8.1-12.4,15-21.7l-30.7-23.3
c0,0-67.4-105.6-68.5-111.2c-0.5-2.4,6.5-13.9,14.6-26.3c-2.5-7.2-4.6-13.9-5.6-16.4c-2.2-5.6-6.7-23.6-6.7-23.6S345,0.1,340.5,0.1S260.7,17,260.7,17l-20.2,20.2c0,0-10.1,20.7-17.8,34.7c-3.8,6.9-7,12.1-8.1,12.5z"/>
<path d="M424.7,550.7c3.4-9-4.5-42.7,13.5-53.9c15.1-9.4,43.6-25.9,52.4-31l-0.3-5.4c-4.6-1-8.7-1.9-11.7-2.9c-18-5.6-46.1-32.6-49.4-38.2s-36-47.2-36-47.2l7.3-12.2l-23.1-12.5l-97.8-36l-4.5,2.2l-29.6,7.8l-34.4,9.1c0,0-18,27-24.7,38.2s-16.9,93.3-20.2,111.2
c-1.3,6.8-2.4,17.8-3.3,28.9c-1.5,18.5-2.4,37.3-2.4,37.3s0,39.3-1.1,46.1c-1.1,6.7,50.6,42.7,50.6,55.1c0,12.4,52.8,24.7,64,27c11.2,2.2,73-21.3,84.3-22.5s58.4-84.3,64-87.6c0.5-0.3,1.3-0.8,2.5-1.6c-0.9-5.2-1.2-9.5-0.3-11.9z"/>
<path d="M370.8,112.5c1.1,5.6,68.5,111.2,68.5,111.2l30.7,23.3c3.7-5,7-9,8.6-9.8c4.5-2.2,15.7-10.1,19.1-10.1s30.3-2.2,30.3-2.2s46.1,36,49.4,38.2s66.3-9,77.5-11.2s52.8-13.5,52.8-13.5l5.9,1.6c-8.8-18.9-83.5-171.3-83.5-171.3L627,13.6l-85.4,77.5l-30.3-42.7
l-4.5-21.3L409,51.8c0,0-12.8,17.9-23.6,34.4c-8.1,12.4-15.1,23.9-14.6,26.3z"/>
<path d="M820.3,361.9c0,0-34.8-47.2-34.8-51.7s-6.7-52.8-6.7-52.8l-64.8-17.5l-5.9-1.6c0,0-41.6,11.2-52.8,13.5s-74.2,13.5-77.5,11.2s-49.4-38.2-49.4-38.2s-27,2.2-30.3,2.2s-14.6,7.9-19.1,10.1c-1.6,0.8-4.9,4.8-8.6,9.8c-6.9,9.3-15,21.7-15,21.7l-11.2,19.1
l-43.2,72l-7.3,12.2c0,0,32.6,41.6,36,47.2s31.5,32.6,49.4,38.2c3,0.9,7,1.9,11.7,2.9c1.8,0.4,3.7,0.8,5.6,1.1c6.9-6.8,25.1-24.2,33.3-24.2c10.1,0,52.8,13.5,52.8,13.5s41.6,27,41.6,31.5c0,0.5,0.1,1.8,0.2,3.8c26,5.5,50,10.1,51.5,8.6
c3.4-3.4,75.3,23.6,75.3,23.6s85.1,3.4,88.8,1.1c3.6-2.2,55.1-36,58.4-42.7s11.2-93.3,11.2-93.3l-88.8-21.3z"/>
<path d="M582,450.7c0,0-42.7-13.5-52.8-13.5c-8.1,0-26.4,17.4-33.3,24.2c-1.7,1.7-2.7,2.7-2.7,2.7s-1,0.6-2.7,1.5c-8.8,5.1-37.3,21.6-52.4,31c-18,11.2-10.1,44.9-13.5,53.9c-0.9,2.4-0.6,6.7,0.3,11.9c2.3,13.9,8.6,34.4,5.3,44.3c-4.5,13.5-38.2,70.8-41.6,74.2
l3.4,3.4c0,0,25.8,30.3,28.1,34.8s23.6,7.9,34.8,13.5s67.4,0,88.8-3.4s40.4-20.2,49.4-25.8s37.1-28.1,28.1-50.6s-1.1-52.8,3.4-69.7c4-15.1,0-80.5-1-97.3c-0.1-2-0.2-3.3-0.2-3.8c0-4.5-41.6-31.5-41.6-31.5z"/>
</g>
<path style="fill:none;stroke:#FF0000;stroke-width:40;stroke-miterlimit:1;" d="M21.4,197.9c0,0,910.1,210.1,850.6,507.9"/>
<path style="fill:none;stroke:#FFFF00;stroke-width:25;stroke-miterlimit:1;" d="M20.6,197.9c0,0,910.1,210.1,850.6,507.9"/>
<path style="fill:none;stroke:#0000FF;stroke-width:13;stroke-miterlimit:1;" d="M0,577.7l278.7,1.1c0,0,60.7-30.3,64-30.3s75.3-42.7,75.3-42.7s52.8-31.5,59.6-33.7s62.9-3.4,76.4,1.1s55.1,29.2,55.1,29.2s27,49.4,30.3,52.8s60.7,56.2,64,59.6s42.8,55.1,42.8,55.1
l53.8,70.8"/>
<path style="fill:#FF99CC;stroke:#FF66FF;stroke-width:6;stroke-miterlimit:1;" d="M313.5,408c0,13.7-10.6,24.7-23.6,24.7s-23.6-11.1-23.6-24.7c0-13.7,10.6-24.7,23.6-24.7s23.6,11.1,23.6,24.7z"/>
<path style="fill:#FF6666;stroke:none;" d="M432.3,245.5l-10.6-8.3l-10.6-8.3l-10.3,8.6l-10.3,8.6l6.9-0.1v19.4h27.7v-19.7l7.1-0.1z"/>
<path style="fill:#FF6666;stroke:none;" d="M479.3,264.9l-10.6-8.3l-10.6-8.3l-10.3,8.6l-10.3,8.6l6.9-0.1v19.4h27.7v-19.7l7.1-0.1z"/>
<path style="fill:#FF6666;stroke:none;" d="M340,219.9l-10.6-8.3l-10.6-8.3l-10.3,8.6l-10.3,8.6l6.9-0.1v19.4h27.7V220l7.1-0.1z"/>
<path style="fill:#FF6666;stroke:none;" d="M291.7,318.8l-10.6-8.3l-10.6-8.3l-10.3,8.6l-10.3,8.6l6.9-0.1v19.4h27.7v-19.7l7.1-0.1z"/>
<path style="fill:#FF99CC;stroke:#FF66FF;stroke-width:6;stroke-miterlimit:1;" d="M532.6,551.8c0,13.7-10.6,24.7-23.6,24.7s-23.6-11.1-23.6-24.7c0-13.7,10.6-24.7,23.6-24.7s23.6,11.1,23.6,24.7z"/>
<path style="fill:#66FF33;stroke:#FFFF33;stroke-width:2.8664;stroke-miterlimit:1;" d="M539.4,211.5l9.7,18.6l21.7,3l-15.7,14.5l3.7,20.5l-19.4-9.7l-19.4,9.7l3.7-20.5l-15.7-14.5l21.7-3l9.7-18.6z"/>
</g>
<g transform="translate(250,350)" opacity="1" >
<path style="opacity:0.1;fill:black;stroke:none;" d="M63.2,48.2l11.6-3.1c6.1-1.6,8.4-3.8,5.2-4.9l-10.5-3.4c-3.2-1-10.7-0.6-16.8,1.1L41.1,41c-6.1,1.6-8.4,3.8-5.2,4.9l6.8,2.2l-6.6,7.3L47,49.5c3.5,0.8,10.4,0.3,16.2-1.2z"/>
<path style="fill:#FFFFFF;stroke:#5B5B5B;stroke-width:0.1743;" d="M36.5,25.6V12.7C36.5,6,32.3,0.5,27,0.5H9.6C4.4,0.5,0.1,6,0.1,12.7v12.9c0,6.7,4.3,12.2,9.5,12.2h11.2l15.2,17.5l-8.2-17.6c4.8-0.6,8.6-5.8,8.6-12.1z"/>
<animate attributeName="opacity" attributeType="XML"
begin="0s" dur="0.5s" fill="freeze" from=".0" to="1" repeatCount="indefinite"/>
</g>
<text x="100" y="450" font-family="arial" font-size="25" fill="black" stroke="slategray" stroke-width="0.1" >
<a xlink:href="http://www.w3.org">
le trou normand </a></text>
</svg>
<path id='boite1' d='M0 0' opacity='0'/>
</g>
</g>
</svg>#2 Wed 10 May 2006 18:09
Re: navigation par glisser-deposer
Pour ma part, pour gérer les déplacement de fenêtre ou objet SVG, je ne
rajoute pas d'objet mais utilise l' attribut
transform="translate(x,y)"
1-Avant de bouger un objet, je récupère la valeur du translate de
l'objet à déplacer (position au départ),
2-je mesure ensuite la distance parcourue avec la souris au cours du
déplacement (différence entre position du curseur au départ et à
l'arrivée)
3-J'additione la valeur du déplacement avec les coordonnées de l'objet
au départ afin de créer une nouvelle valeur pour
transform="translate(new_x,new_y)"
Je n'ai donc pas besoin d'avoir des balises pour déplacer un
objet, l'attribut transform s'applique à n'importe quel élément du DOM.
David D.
--------------------------------------------------------------
David DELHORBE
Webmapping & SIG opensource
Département de la Seine-Saint-Denis
ddelhorbe@cg93.fr || 01.43.93.87.43
--------------------------------------------------------------
Hors ligne
#3 Tue 30 May 2006 18:46
- raphaelgeo
- Participant actif
- Date d'inscription: 14 Dec 2005
- Messages: 78
Re: navigation par glisser-deposer
le code de navigation par glisser-deposer que jai envoyé plus haut marche avec IE 6 mais ne marche pas avec firefox
pourquoi ?
davance merci
Hors ligne
#4 Tue 30 May 2006 20:26
- dunjl
- Juste Inscrit !
- Date d'inscription: 5 Sep 2005
- Messages: 6
Re: navigation par glisser-deposer
en général firefox a besoin de l'unité quand il doit positionner un objet .. donc en ajoutant "px" cela devrait fonctionner.
j'ai pas testé, regarde si cela regle ton probleme
a+
Hors ligne
