Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2008
    Messaggi
    72

    [canvas] forme irregolari cliccabili

    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

    codice:
    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

    codice:
    <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

  2. #2
    Utente di HTML.it L'avatar di andbin
    Registrato dal
    Jan 2006
    residenza
    Italy
    Messaggi
    18,254
    Quote Originariamente inviata da plexott Visualizza il messaggio
    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!)


    Quote Originariamente inviata da plexott Visualizza il messaggio
    codice:
    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.
    Andrea, andbin.devSenior Java developerSCJP 5 (91%) • SCWCD 5 (94%)
    Java Versions Cheat Sheet

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2008
    Messaggi
    72
    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à...

  4. #4
    Utente di HTML.it L'avatar di andbin
    Registrato dal
    Jan 2006
    residenza
    Italy
    Messaggi
    18,254
    Quote Originariamente inviata da plexott Visualizza il messaggio
    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 ...
    Andrea, andbin.devSenior Java developerSCJP 5 (91%) • SCWCD 5 (94%)
    Java Versions Cheat Sheet

  5. #5
    Utente di HTML.it L'avatar di linoma
    Registrato dal
    Mar 2010
    Messaggi
    1,346
    Non potrebbe essere utile verificare il colore nella posizione del click?
    Per gli Spartani e Sparta usa spartan Il mio github

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 © 2024 vBulletin Solutions, Inc. All rights reserved.