Glisser-déposer dans le canvas mozilla

Question

Je veux implémenter un panneau de dessin (version similaire mais plus petite à ce que donne visio pour les organigrammes) dans le canvas mozilla.

Y at-il un support pour cela?

J'ai utilisé jQuery jusqu'à maintenant pour créer les rectangles et les déplacer. Bien que cela soit facile ici ... créer des lignes (connexions entre objets) est une vraie douleur. J'utilise un moyen grossier de colorier pixel par pixel en javascript et il n'est ni beau ni évolutif et j'ai aussi besoin de construire beaucoup de fonctions pour que les connexions se collent à un ensemble d'objets, etc.

Est-ce que quelqu'un sait si la toile et les fonctions disponibles me rendront la vie plus facile.

Des pointeurs vers ce qui est une meilleure solution dans ce cas. (J'espère que ce n'est pas applet)

Merci d'avance.

Answer 1

S'il vous plaît suivre ce lien: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

LMK si ça aide!

Les étapes suivantes peuvent aider: 1.
Créer et ajouter une toile au DOM:
var myCanvas = document.createElement('canvas'); document.body.appendChild(myCanvas);
2. Définissez la largeur de la hauteur de la toile:
myCanvas.width=200; myCanvas.height=200;
3. Obtenez le contexte de la toile et commencer à dessiner dessus:
var gc = myCanvas.getContext('2d');
4. le code pour dessiner un rectangle:
gc.strokeRect(50,50,50,50);
5. Après cela, ajouter mousehandlers (mo usé, mousemove, mouseup)/touchhandlers (touchdown, touchmove, retouche) sur la toile et gérer le mouvement en conséquence.

Answer 2

Oui, vous pouvez utiliser la toile pour cela. Dessiner des formes simples et les mettre à l'échelle est assez simple. Mais si vous devez éditer les formes après les avoir dessinées, vous devrez investir davantage de travail. Toile dessine dans un soi-disant "mode immédiat", ce qui signifie qu'il ne sait pas ce que vous avez peint juste après l'avoir peint. Il ne garde pas trace des formes peintes. Si vous en avez besoin, vous devrez l'appliquer vous-même.

Je l'ai fait en utilisant la fonction isPointInPath() qui peut être utilisée pour tester si un utilisateur clique sur un point particulier. Je garde une trace de mes objets peints en utilisant le MVC-Pattern (Model-View-Controller), de sorte que je puisse savoir sur quelle forme a été cliqué.

Une autre alternative pourrait être fabrics.js qui devrait être très proche de ce dont vous avez besoin.

Answer 3

Chacune de ces plugins jQuery sont parfaits pour les vitres de dessin:

jCanvas Pour tirer des formes simples et complexes, même

sketch.js pour le dessin en général.

Ils sont réactifs et compatibles.