Propagation d'événements

[Sephi-Chan]

Le principe de canvas est assez bête et méchant, c'est vrai. Mais pouvoir dessiner en 2D, intégrer des images, etc. c'est sympa.

SVG est aussi difficile à intégrer à mon goût (un bout de SVG fait moche sur un site). Et puis, quand on veut une jolie carte avec des images tout ce qu'il y a de plus bitmap, peut-on l'intégrer au graphique SVG afin que celui-ci serve juste de plan d'interaction invisible ? Est-ce envisageable ?


Sephi-Chan

[Roworll]

Le SVG supporte un attribut fill qui peut pointer vers une couleur, une définition de gradient ou une définition d'image. De la même manière, on peut intégrer une image et lui appliquer des transformations, des masques, etc.

Un petit exemple à l'arrache pour montrer un effet de survol avec l'affichage d'une image JPG en fond (c'est pas cadré, c'est moche mais c'est juste pour montrer le concept).
Grâce au SVG, la détection des éléments survolés se fait au pixel près, et ce quelle que soit la complexité de ce dernier. Avec Canvas, ce comportement n'existe pas car on ne connait que le X/Y de la souris. De surcroit, les éléments tracés ne supportent pas les évènements.

Quand à la laideur du SVG, c'est tout relatif

[Sephi-Chan]

Effectivement, on peut du coup prendre le meilleur des 2 mondes.

Que suggères-tu pour réaliser une carte avec un fond (en plus des images pour chaque territoire au survol) ? Par exemple la carte jointe à ce message.

J'adore aussi la "maniabilité" de SVG, c'est vraiment sympa d'avoir de vraies formes !

Quand je dis que ça s'intègre mal, c'est qu'en soit une image vectoriel tranche un peu avec du bitmap, en terme d'effets visuels, etc. Ça les rend donc plus difficile à intégrer.


Sephi-Chan

[Roworll]

Bon encore une fois, j'ai fait ça à l'arrache mais l'idée est là.
Tu places un objet image en fond qui contient ta carte.
Tu colles par dessus des paths ayant la forme de tes régions et tu rajoute les évènements qui vont bien. Les miens sont très approximatifs mais un type plus patient et mieux outillé devrait faire ça à la perfection.
L'astuce ici est de définir l'attribut 'fill' puis de définir le 'fill-opacity' à 0 pour rendre l'intérieur de la région transparent mais sensible aux évènements de la souris.

Si tu regardes le code, ne prêtes pas attention aux attributs transform. C'est l'outil que j'utilise pour créer les SVG qui me rajoute ces cochonneries et j'ai du composer avec.

SVG Rocks !

[Sephi-Chan]

Ok, c'est sensiblement ce que j'envisageais de faire, à la différence que je pensais masquer l'élément via CSS.
Merci monsieur !


Sephi-Chan