Il linguaggio JavaScript
 

Lavagna virtuale

trubak@interfree.it 11 Ott 2014 15:03
Buongiorno.
Eccomi di nuovo qui.

Chiedo una cosa.

Guardate questo sito:

http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

Si descrive come costruire una lavagna virtuale, avente alcune funzioni, tra cui
"clear".
Soffermiamoci solo su CLEAR.

Nel primo step, dove c'è solo la funzione "clear", potete disegnare nella parte
bianca e poi, premendo "clear", tutto scompare.
Ma se io volessi fare una funzione come quella scritta qualche riga piu' sopra
(clearRect) NON FUNZIONA!!

Com'è possibile una cosa del genere?????

Io vorrei una funzione che al click del "clear" cio' che viene disegnato
scompaia, perche' il mio div in cui disegno ha uno sfondo "transparent", cosa
che clearRect non accetta!

Non e' che la funzione clearRect in realta' COLORA il div di bianco???
Io vorrei che cio' che disegno SCOMPAIA dalla faccia della terra, e non che
venga sovrascritto da altri pixel bianchi.

E' inammissibile.
Grazie
Alessandro Pellizzari 11 Ott 2014 16:52
Il Sat, 11 Oct 2014 06:03:24 -0700, trubak ha scritto:

> Non e' che la funzione clearRect in realta' COLORA il div di bianco???
> Io vorrei che cio' che disegno SCOMPAIA dalla faccia della terra, e non
> che venga sovrascritto da altri pixel bianchi.
>
> E' inammissibile.

Non credo di aver capito la tua domanda, ma il canvas funziona così: per
cancellare semplicemente sovrascrivi i pixel con il colore bianco.

Non ho mai provato a usare un colore rgba con la trasparenza al massimo,
magari vedi se funziona così.

Bye.
trubak@interfree.it 12 Ott 2014 09:01
Il giorno sabato 11 ottobre 2014 16:52:56 UTC+2, Alessandro Pellizzari ha
scritto:

> Non credo di aver capito la tua domanda, ma il canvas funziona così: per
> cancellare semplicemente sovrascrivi i pixel con il colore bianco.
> Non ho mai provato a usare un colore rgba con la trasparenza al massimo,
> magari vedi se funziona così.
> Bye.

La domanda l'hai capita benissimo.
Ma e' come pensavo.
La trasparenza massima l'ho gia' provata sul canvas, e NON VA.
Il problema di quella lavagna è questo. Vediamo se riesco a farmi capire.

Io voglio fare una lavagna virtuale. Per fare questo, basandomi su quel sito,
faccio una cosa cosi':

1) <div> sotto (con z-index=1) che rappresenta un campo di basket. Attenzione:
questo div è un normalissimo rettangolo riempito con colore "fill" arancione e
alcune righe bianche a formare i limiti del campo (aree, lunette ecc. ecc.).
Le righe bianche, anch'esse dei *****coli <div>, DEVONO SEMPRE ESSERE VISIBILI
ma INTOCCABILI. Per capirci, faccio una cosa del tipo:

<div id="CAMPO" style="z-index:1;">
<div id="RIGA1">...</div>
<div id="RIGA2">...</div>
....
</div>

2) <div> sopra (con z-index=10) che è il canvas che rappresenta la lavagna.
Questo canvas (sempre di forma rettangolare ed esattamente in corrispondenza del
<div> sotto) secondo il sito in questione puo' essere scarabocchiato con
pennarelli di vario colore e vario spessore, che poi a me sta benissimo.


Ho fatto come scritto nel sito e la lavagna virtuale funziona perfettamente,
tranne la funzione CLEAR.
Questa funzione, che mi serve moltissimo, nel sito SOVRASCRIVE con pixel dello
stesso colore dello sfondo. Ma io ho impostato lo sfondo del canvas su
"transparent" per ovvi motivi.
Il risultato è che:

- il canvas "lavagna" sta sopra il <div> "CAMPO" ed è trasparente
- sul canvas "lavagna" riesco tranquillamente a scarabocchiare con i pennarelli
- la funzione clear non va perche' (credo) i pixel dei miei scarabocchi non so
che origine abbiano, sono fatti sul momento, non riesco a dar loro la proprieta'
"transparent".
Se io dessi a "clear" il colore arancione tutto si cancellerebbe (in modo
furfantesco) nel senso che ci sovrascriverei in arancione, ma ovviamente
NASCONDEREI anche le righe bianche!! E' questo che non concepisco.

Ecco cio' che voglio dire.
ZER0 12 Ott 2014 12:20
On 11/10/14 15:03 , trubak@interfree.it wrote:

> Nel primo step, dove c'è solo la funzione "clear", potete disegnare nella
parte bianca e poi, premendo "clear", tutto scompare.
> Ma se io volessi fare una funzione come quella scritta qualche riga piu' sopra
(clearRect) NON FUNZIONA!!

Definisci "Non funziona".
Di solito si ottiene sempre un risultato, solo che non è quello
desiderato. Magari nel tuo caso "Non funziona" vuol dire che, eseguendo
la funzione, il contenuto non sembra succedere nulla: è pro*****ile che,
invece, qualcosa succeda – tu abbia un errore javascript nella web
console, che impedisce il corretto funzionamento del metodo `clearRect`.

Nel mio caso, ad esempio, `clearRect` "funziona" tranquillamente – fa
ciò che mi aspetto faccia:

<http://codepen.io/anon/pen/nxglG>

> perche' il mio div in cui disegno ha uno sfondo "transparent"

Non "disegni" su un div, ma su una canvas.

>, cosa che clearRect non accetta!

Il clearRect serve, appunto, per cancellare ciò che è stato disegnato in
un certa area del canvas: non ha bisogno di colori da passare, giacché,
appunto, cancella. Non sovrascrive.

> Non e' che la funzione clearRect in realta' COLORA il div di bianco???

No.

> Io vorrei che cio' che disegno SCOMPAIA dalla faccia della terra, e non che
venga sovrascritto da altri pixel bianchi.

È esattamente quello che fa la `clearRect`.

> E' inammissibile.

Esagerato.
Alessandro Pellizzari 12 Ott 2014 13:05
Il Sun, 12 Oct 2014 00:01:14 -0700, trubak ha scritto:

> <div id="CAMPO" style="z-index:1;">
> <div id="RIGA1">...</div>
> <div id="RIGA2">...</div>
> ....
> </div>

Non ti conviene mettere semplicemente un div con un'immagine del campo
come background-image?

> - il canvas "lavagna" sta sopra il <div> "CAMPO" ed è trasparente - sul
> canvas "lavagna" riesco tranquillamente a scarabocchiare con i
> pennarelli - la funzione clear non va perche' (credo) i pixel dei miei
> scarabocchi non so che origine abbiano, sono fatti sul momento, non
> riesco a dar loro la proprieta' "transparent".

OK, ora ho capito cosa stai facendo.

Invece di usare clean, prova a usare fillRect per riempire tutto il
canvas, impostando prima.

context.fillStyle = "rgba(0, 0, 0, 0)";

Questo riempie la canvas di pixel neri ma completamente trasparenti.

Bye.
trubak@interfree.it 12 Ott 2014 13:28
Il giorno domenica 12 ottobre 2014 12:20:19 UTC+2, ZER0 ha scritto:
> On 11/10/14 15:03 , trubak@interfree.it wrote:
>
>
>
>> Nel primo step, dove c'� solo la funzione "clear", potete disegnare
nella parte bianca e poi, premendo "clear", tutto scompare.
>
>> Ma se io volessi fare una funzione come quella scritta qualche riga piu'
sopra (clearRect) NON FUNZIONA!!
>
>
>
> Definisci "Non funziona".
>
> Di solito si ottiene sempre un risultato, solo che non � quello
>
> desiderato. Magari nel tuo caso "Non funziona" vuol dire che, eseguendo
>
> la funzione, il contenuto non sembra succedere nulla: � pro*****ile che,
>
> invece, qualcosa succeda � tu abbia un errore javascript nella web
>
> console, che impedisce il corretto funzionamento del metodo `clearRect`.
>
>
>
> Nel mio caso, ad esempio, `clearRect` "funziona" tranquillamente � fa
>
> ci� che mi aspetto faccia:
>
>
>
> <http://codepen.io/anon/pen/nxglG>
>
>
>
>> perche' il mio div in cui disegno ha uno sfondo "transparent"
>
>
>
> Non "disegni" su un div, ma su una canvas.
>
>
>
>>, cosa che clearRect non accetta!
>
>
>
> Il clearRect serve, appunto, per cancellare ci� che � stato
disegnato in
>
> un certa area del canvas: non ha bisogno di colori da passare, giacch�,
>
> appunto, cancella. Non sovrascrive.
>
>
>
>> Non e' che la funzione clearRect in realta' COLORA il div di bianco???
>
>
>
> No.
>
>
>
>> Io vorrei che cio' che disegno SCOMPAIA dalla faccia della terra, e non che
venga sovrascritto da altri pixel bianchi.
>
>
>
> � esattamente quello che fa la `clearRect`.
>
>
>
>> E' inammissibile.
>
>
>
> Esagerato.

FUNZIONA PERFETTAMENTE.
SPETTACOLO.

Mi ero perso in un bicchier d'acqua!
Grazie sia a te che ad Alessandro Pellizzari.

Alla prossima per ulteriori nuove entusiasmanti av*****e!!!

Links
Giochi online
Dizionario sinonimi
Leggi e codici
Ricette
Testi
Webmatica
Hosting gratis
   
 

Il linguaggio JavaScript | Tutti i gruppi | it.comp.lang.javascript | Notizie e discussioni javascript | Javascript Mobile | Servizio di consultazione news.