Pagina 1 di 2

creazione area di disegno con jquery

MessaggioInviato: 18 ott 2010, 11:59
da Daniele78
Dovrei inserire all' interno di una pagina web un' area di disegno.
Si disegna tenendo premuto il pulsante sx del mouse.
Si tratta quindi di prelevare le coordinate del mouse quando il cursore è sul div e il pulsante è premuto.
Il codice che ho scritto non funziona se mentre sono sul div rilascio e premo nuovamente il pulsante.

Re: creazione area di disegno con jquery

MessaggioInviato: 18 ott 2010, 12:07
da Daniele78
Ho dimenticato l' allegato

Re: creazione area di disegno con jquery

MessaggioInviato: 18 ott 2010, 13:05
da phylum
usando jquery 1.4.3 quel codice funziona

per disegnare
Codice: Seleziona tutto
px= $('<span>').css({
'position':'absolute',
'background-color':'#000000',
'width':'10px',
'height':'10px',
top: y+offset.top ,
left: x+offset.left 
});
$(document.body).append(px);


+$(document).mouseup

Re: creazione area di disegno con jquery

MessaggioInviato: 18 ott 2010, 15:38
da Daniele78
Grazie!
Ho aggiunto il tuo codice e funziona.
L' unica di cui mi sono reso conto solo adesso è che è necessario eseguire un' interpolazione dei punti prima di stampare a video.
Adesso provo a cercare in giro o realizzarne una io.

Il problema a cui mi riferivo prima è un altro.
In pratica se mentre disegno lascio il pulsante e poi lo ripremo il cursore appare a forma di mano e non disegna più.
Per risolvere devo portare il puntatore fuori dal div e poi di nuovo dentro.

Re: creazione area di disegno con jquery

MessaggioInviato: 18 ott 2010, 15:52
da phylum
beh si devi tenere conto anche dell'accelerazione del ratto :)

Re: creazione area di disegno con jquery

MessaggioInviato: 18 ott 2010, 16:41
da Daniele78
phylum ha scritto:beh si devi tenere conto anche dell'accelerazione del ratto :)

Si infatti.
Se funzionasse bene magari anche a bassa velocità sarebbe già un passo avanti.

Re: creazione area di disegno con jquery

MessaggioInviato: 19 ott 2010, 11:46
da Daniele78
Cercando un po' in giro ho trovato funzioni JS che permettono di disegnare segmenti di retta passando come parametri le coordinate degli estremi.
Esiste anche un plugin jquery per far ciò.

L' esperimento non è però riuscito in quanto si riduceva notevolmente il numero di punti ottenuti al passaggio del mouse.

Quello che penso di fare è di usare jquery per prelevare i punti al passaggio del mouse per poi darli in pasto a php il quale creerà l' immagine usando le funzioni di disegno delle prorie librerie.

Comunque lo farò poi con calma.
Non mi serve urgentemente.

Re: creazione area di disegno con jquery

MessaggioInviato: 19 ott 2010, 11:58
da angus
questo e gli articoli relativi li hai per caso visti?
http://www.motyar.info/2010/01/draw-with-jquery.html

Re: creazione area di disegno con jquery

MessaggioInviato: 19 ott 2010, 16:43
da Daniele78
angus ha scritto:questo e gli articoli relativi li hai per caso visti?
http://www.motyar.info/2010/01/draw-with-jquery.html


Ho inserito questo codice al posto del mio trai tag <script></script> così come è

Da però lo stesso problema.
Facendo debug ho scoperto che se mi muovo sul div e premo e rilascio il pulsante sx mentre il mouse è in movimento la variabile draw rimane true.

Ciò non accade se il mouse è fermo o si trova al di fuori del div.

Grazie.

Re: creazione area di disegno con jquery

MessaggioInviato: 19 ott 2010, 17:13
da angus
A questo punto credo di non aver capito quello che ti serve. #-o
...vuoi disegnare delle linee o "a mano libera" ?
inoltre, del risultato cosa ne devi fare? solo visualizzarlo o salvarlo da qualche parte? se si, in un formato "bitmap" o vettoriale?