Riempire figura IRREGOLARE

di Occoragin il
7 risposte
Pochi posts
Iscritto da
mar, 2020
Messaggi
16

Come si fa in JavaScript a riempire di un colore una figura IRREGOLARE (segmenti e curve)?
Ho provato con il metodo fill() ma non ottengo nulla.

7 Risposte

  • Pochi posts
    Iscritto da
    mar, 2020
    Messaggi
    16
        <canvas id="canvas" width="500" height="400" style="background-color: yellow"></canvas>
<script>

    Canvas=document.getElementById("canvas");
    Ctx=Canvas.getContext("2d");
    rettangoloConCurve(Ctx,"red",50,50,100,200);

function rettangoloConCurve(contesto,colore,x1,y1,x2,y2)
{
let spessoreLarghezza=x2-x1;
let spessoreAltezza=y2-y1;
let raggio=20;
    
    contesto.beginPath();
    contesto.strokeStyle="black";
    contesto.arc(x1,y1,raggio,Math.PI,Math.PI*3/2,false); contesto.stroke();
    linea(contesto,"black",x1,y1-raggio,x1+spessoreLarghezza-raggio,y1-raggio);
    contesto.arc(x1+spessoreLarghezza,y1,raggio,Math.PI*3/2,Math.PI*2,false); contesto.stroke();
    linea(contesto,"black",x1+spessoreLarghezza+raggio,y1,x1+spessoreLarghezza+raggio,y1+spessoreAltezza);
    contesto.arc(x1+spessoreLarghezza,y2,raggio,Math.PI*2,Math.PI/2,false); contesto.stroke();
    linea(contesto,"black",x1+spessoreLarghezza,y2+raggio,x1,y2+raggio);
    contesto.arc(x1,y2,raggio,Math.PI/2,Math.PI,false);  contesto.stroke();
    linea(contesto,"black",x1-raggio,y2,x1-raggio,y1);
    contesto.closePath();

    contesto.fillStyle=colore;
    contesto.fill(); // <<---------- non succede nulla
}  

function linea(contesto,colore,x1,y1,x2,y2)
{
    contesto.beginPath();
    contesto.moveTo(x1,y1);
    contesto.lineTo(x2,y2);
    contesto.strokeStyle=colore;
    contesto.lineWidth=1;
    contesto.lineCap="butt";
    contesto.stroke();
}
</script>
  • Avatar di Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi
    3504

    Prova a commentare l'istruzione contesto.stroke();.

    Ad ogni modo, non mi pare che tu stia costruendo un poligono da riempire con fill(): stai creando tanti “archi” e tracciandoli come linee separate piuttosto che definire un percorso che rappresenti unicamente una figura chiusa da riempire.

  • Pochi posts
    Iscritto da
    mar, 2020
    Messaggi
    16

    12/06/2024 - Alka ha scritto:

    Ad ogni modo, non mi pare che tu stia costruendo un poligono da riempire con fill(): stai creando tanti “archi” e tracciandoli come linee separate piuttosto che definire un percorso che rappresenti unicamente una figura chiusa da riempire.

    Non è un poligono, ma è comunque una figura chiusa, come faccio a riempirla?

  • Avatar di Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi
    3504

    13/06/2024 - Occoragin ha scritto:

    Non è un poligono, ma è comunque una figura chiusa, come faccio a riempirla?

    Devi creare la figura come “percorso” definito tramite un oggetto, e poi tracciarlo/riempirlo interamente in un colpo solo.

    Vedi anche gli esempi che si trovano nella documentazione MDN.

  • Super Famoso
    Iscritto da
    apr, 2013
    Messaggi
    6256

    Devi ragionare cosi: la funzione di riempimento di poligoni (arbitrari) DEVE AVERE il poligono da analizzare, cioe' l'elenco dei vertici (e si possono disegnare anche i buchi)

    tu stai tracciando righe e curve sul canvas, a TE, VISUALMENTE sembra un poligono, ma per il canva sono SOLO pixel colorati.

    NON FARE l'errore di pensare al floodfil della grafica RASTER. Qui la grafica e' VETTORIALE, l'algo usato e' TOTALMENTE diverso

  • Pochi posts
    Iscritto da
    mar, 2020
    Messaggi
    16

    RISOLTO, posto il codice.

        <canvas id="canvas" width="500" height="400" style="background-color: yellow"></canvas>
<script>

    Canvas=document.getElementById("canvas");
    Ctx=Canvas.getContext("2d");
    rettangoloConCurve(Ctx,"red",50,30,300,200);

function rettangoloConCurve(contesto,colore,x1,y1,larg,alt)
{
let raggio=20;
    
    contesto.beginPath();
    contesto.strokeStyle="black";

    contesto.arc(x1+raggio,y1+raggio,raggio,Math.PI,Math.PI*3/2,false); //contesto.closePath();
    lineaRett(contesto,"black",x1+raggio,y1,x1+larg-raggio,y1);
    contesto.arc(x1+larg-raggio,y1+raggio,raggio,Math.PI*3/2,Math.PI*2,false); //contesto.closePath();
    lineaRett(contesto,"black",x1+larg,y1+raggio,x1+larg,y1+alt-raggio);
    contesto.arc(x1+larg-raggio,y1+alt-raggio,raggio,Math.PI*2,Math.PI/2,false); //contesto.closePath();
    lineaRett(contesto,"black",x1+larg-raggio,y1+alt,x1+raggio,y1+alt);
    contesto.arc(x1+raggio,y1+alt-raggio,raggio,Math.PI/2,Math.PI,false);  //contesto.closePath();
    lineaRett(contesto,"black",x1,y1+alt-raggio,x1,y1+raggio);

    contesto.closePath();
    contesto.stroke();
    contesto.fillStyle=colore;
    contesto.fill();

    contesto.beginPath();
    contesto.moveTo(x1,y1+raggio);
    contesto.lineTo(x1+raggio,y1);
    contesto.lineTo(x1+larg,y1+raggio);
    contesto.lineTo(x1+larg-raggio,y1+alt);
    contesto.lineTo(x1,y1+alt-raggio);
    contesto.closePath();
    contesto.fill();
}  

function lineaRett(contesto,colore,x1,y1,x2,y2)
{
    contesto.moveTo(x1,y1);
    contesto.lineTo(x2,y2);
    contesto.strokeStyle=colore;
    contesto.lineWidth=1;
    contesto.lineCap="butt";
}
</script>
Devi accedere o registrarti per scrivere nel forum
7 risposte