2010-10-20 10 views
6

Supposons que j'ai une application html5/canvas dans laquelle je peux placer des objets sur une toile de dessin. Une sorte d'éditeur de diagramme, quelque chose comme Visio (mais beaucoup plus simple)Découvrez quel objet a été cliqué sur un canevas html5

Y at-il un cadre qui m'aide à trouver quel objet est cliqué/dragé?

Une option est de capturer le clic-événement et parcourir tous mes objets (d'une manière semi-intelligent) et vérifier si elle est cliqué/draged, mais je déteste de réinventer la roue :)

Répondre

0

Malheureusement, il n'y a pas de modèle d'objet pour les choses que vous rendez dans une toile. Vous devez garder une trace de tout ce que vous avez dessiné et déclencher des événements séparés lorsque vous détectez des clics, des mouseup, des mousedown, des drags. Cela signifierait créer un wrapper pour toutes les méthodes de contexte, en stockant les lignes/images et leurs attributs dans un COM (Canvas Object Model :) et des événements de tir pour chacune des lignes/images

Je n'ai rien vu là ça fait ça. lot de travail, j'ai recouru à l'écriture de code personnalisé chaque fois que j'ai besoin d'ajouter de l'interactivité à un canevas

1

Pour une application de style Visio, ou quoi que ce soit où l'interactivité avec les objets dessinés est important, vous ' mieux vaut SVG. Il y a déjà some open source projects que vous pouvez utiliser comme point de départ. Le problème avec SVG est, comme avec n'importe quel DOM lourd, les performances peuvent se dégrader fortement une fois que vous avez un grand nombre d'objets à manipuler.

+0

Quel est 'un grand nombre'? 100? 10.000? – Dribbel

+0

J'ai des performances médiocres en traçant plus de 10.000 points en utilisant excanvas –

+0

@Dribbel Cela va varier en fonction du navigateur et des spécifications de la machine, si votre cible est des ordinateurs de bureau avec des navigateurs modernes alors plus de 10.000, si vous êtes sur des téléphones alors peut-être plus 1000, si vous essayez d'obtenir des choses à travailler dans IE avec VML, peut-être quelques centaines. – robertc

Questions connexes