Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Responsable Jeux-Concours

    Moveable : déplacez, déformez, redimmensionnez les éléments de votre page Web
    Moveable : déplacez, déformez, redimensionner les éléments de votre page Web
    à l'aide de cette bibliothèque JavaScript

    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 :

    • 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.


    Site officiel avec les démonstrations.
    Documentation.
    Téléchargement.

  2. #2
    Candidat au Club
    cool
    cest super cool mes dure a pratique

  3. #3
    Responsable Jeux-Concours

    Il 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 !

  4. #4
    Membre régulier
    Whaa ! 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é

  5. #5
    Responsable Jeux-Concours

    Attention 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.