Trascinare e rilasciare nella tela mozilla

Question

Voglio implementare un riquadro di disegno (versione simile ma più piccola a quella che Visio fornisce per i diagrammi di flusso) nella tela mozilla.

C'è qualche supporto per questo?

Ho usato jQuery fino ad ora per creare i rettangoli e spostarli. Mentre questo è facile qui ... creare linee (connessioni tra oggetti) è un vero dolore. Sto usando un modo rozzo per colorare pixel per pixel in javascript e non è né bello né scalabile e ho anche bisogno di creare molte funzioni per fare in modo che le connessioni rimangano su un insieme di oggetti ecc.

Qualcuno sa se la tela e le funzioni disponibili mi renderanno la vita più facile.

Qualsiasi indicazione su quale sia la soluzione migliore in questo caso. (Spero che non sia applet)

Grazie in anticipo.

Answer 1

segui questo link: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

LMK se aiuta!

passaggi seguenti possono aiutare:
1. Creare e aggiungere una tela al DOM:
var myCanvas = document.createElement('canvas'); document.body.appendChild(myCanvas);
2. Impostare la larghezza-altezza della tela:
myCanvas.width=200; myCanvas.height=200;
3. Ottenere il contesto della tela e iniziare a disegnare su di esso:
var gc = myCanvas.getContext('2d');
4. codice per disegnare rettangolo:
gc.strokeRect(50,50,50,50);
5. Dopo questo, aggiungere mousehandlers (mo usedown, mousemove, mouseup)/touchhandlers (touchdown, touchmove, touchup) sulla tela e gestire il movimento di conseguenza.

Answer 2

Sì, è possibile utilizzare la tela per questo. Disegnare forme semplici e ridimensionarle è piuttosto semplice.

Ma se hai bisogno di modificare le forme dopo averle disegnate, dovrai investire ancora un po 'di lavoro. La tela disegna in una cosiddetta "modalità immediata", il che significa che non sa cosa hai dipinto subito dopo averlo dipinto. Non tiene traccia delle forme dipinte. Se necessario, dovrai implementarlo da solo.

Ho eseguito questa operazione utilizzando la funzione isPointInPath() che può essere utilizzata per verificare se un utente fa clic su un punto particolare. Tengo traccia dei miei oggetti dipinti usando il pattern MVC (Model-View-Controller), in modo che possa scoprire su quale Shape è stato cliccato.

Un'altra alternativa potrebbe essere fabrics.js che dovrebbe essere molto vicino a quello che ti serve.

Answer 3

Entrambi questi jQuery plugin sono grandi per vetri disegno:

jCanvas Per trarre delle forme semplici e anche complesse

sketch.js per il disegno in generale.

Sono entrambi reattivi e compatibili.