Discussion :

[Archimède]

Salut, tout est dans le titre...
Comment gérer la profondeur des dessins sur paper avec snap svg ?

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
maform.attr({
   .......
  'z-index'=1
}); // ne fonctionne pas

C'était pour faire de la 3D, la profondeur est indispensable...

[NoSmoking]

Bonjour,
étourderie !?!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
maform.attr({
   .......
  'z-index': 1
});

l'affectation d'une valeur à une propriété, dans un objet, se fait via un :.

[Archimède]

Salut, oui en effet mais j'avais bien mis un ':' dans mon attr... sur mon code (je n'ai pas fait attention dans le post hier soir) et ça ne fonctionne pas. En fait, j'ai l'impression que le z-index n'existe pas avec SVG ou alors je suis passé à côté. Ceci dit, les layers apparaissent dans l'ordre de progression dans le code et comme je refais un cube 3D dont les faces sont dans un tableau, il suffit de faire un tri de ce tableau en fonction de la profondeur z du centre de chaque face dont je connais la valeur et le problème sera réglé...

Mais bon si z-index sous snap svg était opérationnel, ce serait mieux...

[NoSmoking]

Mais bon si z-index sous snap svg était opérationnel, ce serait mieux...

je n'avais pas percuté sur la propriété

Ce n'est pas seulement « snapSVG » qui ne la supporte pas mais les éléments SVG, les autres bibliothèque, à ma connaissance, ne le gèrent pas non plus.

La méthode de rendu des éléments est décrite dans la spécification : Scalable Vector Graphics (SVG) 2, en gros les premiers arrivés sont dessous, on empile mais pas de z-index pour modifier l'« ordre ».

il suffit de faire un tri de ce tableau en fonction de la profondeur z du centre de chaque face dont je connais la valeur et le problème sera réglé...

C'est effectivement la façon de procéder, on peut utiliser par exemple cette extension pour snapSVG :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Snap.plugin(function(Snap, Element, Paper, global) {
  const elProto = Element.prototype;
 
  elProto.bringToFront = function() {
    const parent = this.node.parentNode;
    parent.appendChild(this.node);
    return this;
  };
 
  elProto.bringToBack = function() {
    const parent = this.node.parentNode;
    parent.insertBefore(this.node, parent.firstElementChild);
    return this;
  };
});

mais plutôt réserver élément par élément.

Tu peux également injecter directement un Snap.set().items dans un SVG.group() après ton tri.

[Archimède]

Salut, en fait après de multiples recherches, j'avais vu que la propriété n'était pas prise en charge en SVG... Apparemment, c'est en projet pour la prochaine version de SVG2 d'après ce que j'ai compris...

Alors, je fais tourner un cube 3D en rotation sur les trois dimensions et donc pour la priorité des faces, je m'en suis sorti comme ça :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
for (let i=0 ; i<=5;i++){
     Face[i].position(); //position des points 3D définissant ma face (parmi les 6)
     zvalues[i]=Face[i].zvalue();//tableau de la profondeur du centre des faces
}
 
triorders=zvalues.sort(tri);//tri des profondeurs par ordre croissant (avec tri : const tri=(a,b)=>a-b; )
 
triorders.forEach( (item,ind) => { //on balaye les valeurs de profondeurs par ordre croissant
                        Face.forEach( (item2,ind2)=>{    // on balaye les faces
                            if (item2.zvalue()===item) { // si la profondeur de la face est égale à la valeur profondeur
                                Face[ind2].Tracer(3,tabcol[ind2]);//on dessine dans le bon ordre la face: paper.polygon(....)
                           }
                       });
 });

Mais, ça m'oblige à faire un paper.clear() à chaque frame au lieu de redéfinir l'attribut des coordonnées de mes point dans polygone() pour mes faces qui sont redessinées (donc redéfinies) dans le bon ordre... Avec z-index, je crée mes faces une fois pour toute et je me débrouille avec attr() pour changer mes coords de points et la profondeur... C'était plus cool.

Et en plus, ça me permettait de faire un paper.g() avec mes faces une fois pour toute et de lui associer une class darken pour faire du soustractif en fonction de la lumière que je vais projeter sur le cube en rotation..

En faisant un paper.g() à chaque fois et en ajoutant ma class 'darken', ça plombe l'animation ...

Je regarde bringToFront() etc.. J'avais déjà remarqué dans la doc raphaël => toFront() toBack() (et non dans snap SVG) sans approfondir. C'est une excellente idée...Il doit y avoir moyen de s'en sortir...

Merci pour tes lumières !

[NoSmoking]

Mais, ça m'oblige à faire un paper.clear() à chaque frame

non tu n'es pas obligé, dès que les éléments sont dans ton SVG il te suffit de les réordonner dans l'arbre de rendu et des les réinjecter dans le paper, tout du moins sous Snap.svg.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// récup. élément SVG
const oSVG = Snap("#zoneSVG");
// création d'un groupe
const paperGroup = oSVG.group({id: "group-element"});
// affichage dans l'ordre où tabElements et un array d'éléments SVG
paperGroup.add(tabElements);
// inversion de l'ordre sans rien faire de plus
paperGroup.add(tabElements.reverse());

Et en plus, ça me permettait de faire un paper.g()

on avait vu dans une précédente discussion que tu gagnai en vitesse donc oui c'est une bonne orientation.

J'avais déjà remarqué dans la doc raphaël => toFront() toBack() (et non dans snap SVG) sans approfondir.

la difficulté est en fait de faire abstraction d'une pour utiliser l'autre en, si possible, ne gardant que le meilleur via le Snap.plugin !

J'ai fait un exemple de modification de l'ordre des éléments dans un groupe SVG, c'est basé sur Snap.svg :

↪ [Snap.svg] z-index sur éléments SVG