Faites glisser des objets dans la toile

Im la recherche d'un outil facile à utiliser la méthode de l'affectation d'faites glisser le comportement de plusieurs objets (images, des formes, etc) en toile. Quelqu'un aurait-il une bonne façon ou connaissez des bibliothèques pour le déplacement d'objets autour de vous? Grâce

source d'informationauteur Rigil

  1. 18

    La création de vos propres événements de la souris prend un peu de travail, - idéalement, vous devez soit créer ou utiliser une sorte de mini-bibliothèque. Je pense à la création de quelque chose comme cela dans un avenir proche. De toute façon, j'ai créé un glisser-déposer de démonstration sur jsFiddle montrant comment faire glisser des images - vous pouvez le voir ici.

    Vous pouvez créer déplaçable images comme ceci:

    var myImage = new DragImage(sourcePath, x, y);

    Laissez-moi savoir si vous avez des questions à ce sujet. Espérons que cela aide.

    MODIFIER

    Il y a eu un bug lors du déplacement de plusieurs images. Voici une nouvelle version.

    Une autre chose que vous pourriez vouloir vérifier est easeljs c'est un peu dans le style de l'AS3... mouseEvents glisser etc...

  2. 13

    Le code HTML de Toile, à la différence de SVG ou HTML utilise un non-retenu (ou immédiate) API graphique. Cela signifie que lorsque vous dessinez quelque chose (comme une image) dans le canevas aucune connaissance de la chose reste. La seule chose qui reste est de pixels sur la toile, mélangé avec tous les précédents pixels. Vous ne pouvez pas vraiment faire glisser un sous-ensemble de pixels; pour une chose, les pixels qui ont été "sous" ont disparu. Ce que vous avez à faire est de:

    1. Suivre le mousedown événement et de voir si il est dans le bon emplacement pour glisser. (Vous aurez à garder une trace de ce que les images/objets sont où et effectuer la détection des clics de souris.)
    2. Que l'utilisateur fait glisser la souris, redessiner l'ensemble de la toile à partir de zéro, du dessin, de l'image dans un nouvel emplacement à chaque fois, basé sur le décalage entre l'actuel emplacement de la souris et de la première mousedown emplacement.

    D'autres solutions que je propose:

    • SVG
    • HTML pur
    • De multiples couches de toiles, et faites glisser l'une toile transparente sur une autre.

    Canevas HTML est bon pour beaucoup de choses. Interaction de l'utilisateur avec des "éléments" qui semblent être distincts (mais ne le sont pas) n'est pas une de ces choses.

    Mise à jour: Voici quelques exemples montrant les faisant glisser sur la toile:

    Aucun de ces ont créé une bibliothèque pour le suivi de vos formes pour vous, cependant.

  3. 4

    KineticJS en est une Bibliothèque Javascript qui u peut l'utiliser exclusivement pour les animations

    Voici le Lien html5canvastutorials

  4. 2

    Toile et jCanvas

    Vous allez vouloir vérifier jCanvas. C'est une super propre wrapper pour la Toile, les coups de pied d'ouvrir beaucoup de portes sans ajouter de la complexité du code. Il fait des choses comme ça un jeu d'enfant.

    Par exemple, voici un petit sandbox de quelque chose de proche de ce que vous êtes après, avec glisser et de le restituer intégré:

    Dessiner une Flèche Entre les Deux Éléments.

    Faites glisser des objets dans la toile

    Je me suis aventuré en bas de la route de tout faire avec des DIVs et jQuery, mais il est toujours tombé à court de l'interactivité et de la qualité.

    Espère que ça aide d'autres personnes, comme moi.

    JP

  5. 1

    Que vous créez de nouveaux objets de savoir s'ils sont des fenêtres, des cartes, des formes ou des images pour être déplaçable, vous pouvez les stocker dans un tableau des "objets non sélectionnés". Lorsque vous cliquez sur eux ou de les sélectionner ou de commencer à faire glisser, vous pouvez les supprimer à partir du tableau des "objets non sélectionnés". De cette façon, vous pouvez contrôler ce qui peut se déplacer dans le cas d'un événement mousedown ou événement mousemove en vérifiant si elle n'est pas sélectionnée. S'il est sélectionné, il ne sera pas dans le "non sélectionné" tableau et vous pouvez déplacer le pointeur de la souris au-dessus d'autres formes tout en faisant glisser des formes sans devenir traîné.

    La création de tableaux d'objets que vous aimeriez faire glisser contribue également à la hiérarchie. Toile, dessine les pixels appartenant au tout dernier objet. Donc, si les objets sont dans un tableau, il vous suffit de passer leur exemple en tant que élément dans le tableau dire de objectArray[20] pour objectArray[4] comme vous parcourir le tableau et dessiner les objets stockés dans le tableau des éléments que vous pouvez modifier si d'autres objets sont visibles sur le dessus ou derrière d'autres objets.