Visualizzazione dei risultati da 1 a 3 su 3

Discussione: p5 js: trasparenza in rgba non viene applicata

  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94

    p5 js: trasparenza in rgba non viene applicata

    Ciao a tutti.

    Stavo provando la libreria p5 js per la creazione di un canvas.

    Ho creato una serie di blocchi dove quando il mouse passa sopra ogni blocco assume un colore diverso e quando il mouse esce dalle coordinate di ogni blocco lo sfondo torna di colore default.

    Esempio

    codice:
    var color1 = 'rgb(34, 34, 34)'; // colore inziale
    
    function draw() {
        fill(color1);
        rect(...)
    }
    
    function mouseMoved() {
        
        if((mouseX > 9 && mouseX < 111) && (mouseY > 9 && mouseY < 111)) {
    
            color1 = squareArray[0].color;
    
        } else {
        
            color1 = "rgb(34, 34, 34)";
    }
    Il codice sopra funziona ma se volessi sostituire il colore con rgba(34,34,34, 0) per farlo trasparente non funziona o meglio:

    1) All'inizio viene rispettato, il blocco non si vede
    2) Quando passo sopra il mouse si colora
    3) Quando esco fuori dal blocco non torna ad essere trasparente (ultimo else statement).

    Qui trovate l'esempio https://codepen.io/anon/pen/xpapdy?editors=1010

    Vedete come al primo blocco ho messo rgba (e non funziona quando tolgo il mouse) mentre gli altri con valore rgb funzionano.

  2. #2
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,029
    ad occhio , visto che il codice non è completo, direi che non ridisegni il canvas col nuovo colore quando il mouse esce fuori.....
    Ciro Marotta - Programmatore PHP - MySql - ZEND FRAMEWORK 2
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94
    Ciao Ciro78.

    Il codice completo l'ho linkato al codepen. Il canvas è ridisegnato in automatico dalla funzione draw (funzione di p5 js). Tra l'altro con i colori specificati in modo rgb funziona tutto mentre se li cambio in rgba non funziona.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.