Moveable : déplacez, déformez, redimmensionner les éléments de votre page Web
à l'aide de cette bibliothèque JavaScript
Le 2019-10-17 14:49:47, par vermine, Expert éminent sénior
Moveable est une bibliothèque JavaScript permettant de manipuler les éléments d'une page Web de plusieurs manières.
Voici les actions possibles sur un élément :
En d'autres termes : Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable et Snappable.
De base il supporte le Webkit Safari, les éléments SVG et les transformations 3D.
L'auteur fournit même des composants pour React, Preact, Angular et Vue afin de vous faciliter la tâche.
Voici les actions possibles sur un élément :
- le déplacer ;
- le redimensionner en conservant les proportions ;
- le redimensionner selon un axe uniquement ;
- lui appliquer une rotation ;
- le déformer ;
- le pincer (sur un écran tactile) afin de lui appliquer une action ;
- lui appliquer une action selon une ligne directrice ;
- l'inclure dans un groupe d'éléments pour lequel une des opérations ci-dessus peut être appliquée.
En d'autres termes : Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable et Snappable.
De base il supporte le Webkit Safari, les éléments SVG et les transformations 3D.
L'auteur fournit même des composants pour React, Preact, Angular et Vue afin de vous faciliter la tâche.
-
pbchadeuCandidat au Club
cest super cool mes dure a pratique le 21/10/2019 à 0:17 -
vermineExpert éminent séniorIl faut effectivement découvrir quelle valeur est liée à quelle axe de transformation et comprendre les matrices.
Comme toujours, il faut pratiquer pour se sentir à l'aise. Courage ! le 21/10/2019 à 7:51 -
hclatomicMembre régulierWhaa ! Sympa ! Merci pour ça.
C'est propre et efficace.
Dommage que je n'ai pas le temps de lire la doc, et donc de m'y mettre. Peut-être si l'occasion se présente ...
En général, en matière de SVG j'ai besoin de faire des dessins simples (line, rect, circle, path, polygon, ...), le plus vite possible (sans avoir à me frapper de doc =;o), et en embarquant le minimum de code possible (donc exit d3js). Alors j'ai créé ma propre lib qui répond à tout ça : hclsvg. Il y a cependant une doc, qui indique que l'utilisation en est totalement élémentaire.
Je bookmark ton site néanmoins car tu fais des trucs que ma lib ne fait pas.
Cordialement
Hervéle 22/10/2019 à 17:42 -
vermineExpert éminent séniorAttention que cet outil ne vient pas de moi. L'auteur est Younkue Choi.
Il serait intéressant de regarder le tiens de plus près.le 23/10/2019 à 7:56