Riempire figura IRREGOLARE

di il
7 risposte

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

  • 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.

  • 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>
    
  • 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.

  • 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?

  • 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.

  • 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

  • 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