[canvas] forme irregolari cliccabili

[plexott]

Vorrei realizzare in una pagina un disegno complesso, con forme irregolari cliccabili, che mi lancino ognuna una funzione.
Le forme le realizzo facilmente con canvas

ctx.moveTo(0,0);
ctx.lineTo(50,80);
ctx.lineTo(30,160);
ctx.lineTo(70,360);
ctx.lineTo(20,360);

ctx.lineTo(0,0);
ctx.fillStyle = "#387014";
ctx.stroke();

ma non viene colorata, e da qui non so nemmeno come lanciare una funzione..
l'alternativa sarebbe usare

<img src="http://xxxxxxxxxxx.png" alt="The Map" usemap="#mymap" />
    <map name="mymap" id="mymap">
        <area shape="poly" coords="6, 10, 480, 10, 144,157" onclick="lafunzione();" />
    </map>

ma in questo modo avrei un'immagine fissa e quindi colori fissi, mentre io avrei voluto controllarli tramite javascript

[andbin]

Vorrei realizzare in una pagina un disegno complesso, con forme irregolari cliccabili, che mi lancino ognuna una funzione.
Le forme le realizzo facilmente con canvas

Il canvas è solo una area "raster" di pixel, non mantiene alcuna informazione "logica" sulle forme che disegni. Una volta che nel canvas c'è disegnata una figura, sono solo un mucchio di pixel colorati, non è possibile sapere cosa sia dal canvas stesso. E non è pertanto possibile "agganciare" eventi su singole figure o cose del genere.

Tenere le informazioni "logiche" sulle figure sarebbe tutto a carico tuo. Un conto sarebbero rettangoli, cerchi ... ma figure irregolari diventa complicato gestirle.

Probabilmente sarebbe meglio usare una libreria di più alto livello rispetto all'accesso diretto al canvas. Una libreria che ti esponga una "scene graph" ovvero un modello ad oggetti delle figure, che poi sotto-sotto vengono renderizzate nel canvas.
Tipo ad esempio la Fabric.js (guarda i demo nella home, puoi anche trascinare/ruotare le forme!)

ctx.moveTo(0,0);
ctx.lineTo(50,80);
ctx.lineTo(30,160);
ctx.lineTo(70,360);
ctx.lineTo(20,360);

ctx.lineTo(0,0);
ctx.fillStyle = "#387014";
ctx.stroke();

Di per sé è corretto. Se hai settato il fillStyle, probabilmente volevi fare poi fill(). Lo stroke() disegna solo il bordo.

[plexott]

in effetti bastava il fill() e il colore l'ho sistemato!

le librerie esterne cercavo di evitarle.. ho sempre paura che in pochi anni diano problemi o non siano più supportate correttamente e debba rimettere le mani sul lavoro..non so se è così o è una fissa mia..

Tenere le informazioni "logiche" sulle figure sarebbe tutto a carico tuo. Un conto sarebbero rettangoli, cerchi ... ma figure irregolari diventa complicato gestirle.

in che senso? come posso farlo senza librerei esterne? Se con canvas non posso aggiungere una funzione da lanciare al click in quell'area, potrei almeno aggiungere l'area shape a quello che ho disegnato col canvas? in fondo le coordinate dei punti le ho già...

[andbin]

in che senso? come posso farlo senza librerei esterne?

Intendo dire che senza librerie specifiche, toccherebbe a te tenere in memoria oggetti e strutture dati per "modellare" tutte le forme che poi disegni. E si tratterebbe di scrivere "un tantino" di codice a livello object-oriented. E ciascun oggetto che modella una singola forma (quadrato, cerchio, poligono, ecc...) dovrebbe avere poi un metodo es. containsPoint(x, y) che dice se dato un punto esso è contenuto esattamente nella figura.

E ripeto quello che dicevo prima: finché si tratta di determinare se un punto è in un quadrato o un cerchio, è abbastanza facile e banale. Per figure irregolari, bisogna documentarsi bene perché c'è un po' di matematica dietro ...

[linoma]

Non potrebbe essere utile verificare il colore nella posizione del click?