Riempire figura IRREGOLARE

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

Riempire figura IRREGOLARE

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

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: Riempire figura IRREGOLARE

    12/06/2024 - Occoragin ha scritto:

    Come si fa in JavaScript a riempire di un colore una figura IRREGOLARE (segmenti e curve)?

    Come hai disegnato questa figura? Con l'elemento <canvas>?

    12/06/2024 - Occoragin ha scritto:

    Ho provato con il metodo fill() ma non ottengo nulla.

    Posta il codice.

  • O
    Occoragin
    Pochi posts
    Iscritto da
    mar, 2020
    Messaggi:
    16

    Re: Riempire figura IRREGOLARE

        <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>
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: Riempire figura IRREGOLARE

    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.

  • O
    Occoragin
    Pochi posts
    Iscritto da
    mar, 2020
    Messaggi:
    16

    Re: Riempire figura IRREGOLARE

    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?

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: Riempire figura IRREGOLARE

    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.

  • M
    migliorabile
    Super Famoso
    Iscritto da
    apr, 2013
    Messaggi:
    6072

    Re: Riempire figura IRREGOLARE

    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

  • O
    Occoragin
    Pochi posts
    Iscritto da
    mar, 2020
    Messaggi:
    16

    Re: Riempire figura IRREGOLARE

    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