- 231
- 8
- CPU
- i5-6500
- Scheda Madre
- ASRock H170 Pro4S
- HDD
- Samsung 870QVO 1TB, Samsung 850EVO 250GB, HD Toshiba 2TB
- RAM
- Corsair DD4 2133 C13 2x4GB
- GPU
- Sapphire R9 380 4GB NITRO
- Audio
- Integrata + DAC Audioengine D1
- Monitor
- LG 24MB56HQ-B IPS
- PSU
- XFX 550 Black
- Case
- Corsair Spec-03
- Periferiche
- Casse Edifier R1800TIII
- OS
- Windows 10
Sto creando un programma per disegnare mappe ad esagoni (tipo questa).
In particolare si tratta di una applicazione per siti (quindi sarà on-line) e il sito è scritto in python/django + javascript/jQuery (e ovviamente HTML/CSS).
Gli esagoni ce li ho già e sono immagini in formato .png, ora devo solo combinarle tra loro.
Le funzionalità da implementare sono:
1) caricare una mappa esistente (vedi l'edit)
2) farmi selezionare un esagono esterno alla mappa (da una lista esagoni disponibili) e farmelo posizionare sulal mappa (drag and drop col mouse). In alternativa la lista degli esagoni potrebbe essere in una parte riservata dello stesso canvas
3) cancellare un esagono dalla mappa
4) spostare un esagono da un punto all'altro della mappa
5) salvare la mappa
6) traslare la mappa per vederne parti diverse (sarà troppo grande per apparire tutta insieme sul video)
7) calcolare le distanze sulla mappa tra due esagoni (e visto che certi esagoni hanno 'costi' diversi si tratta di sommare un attributo degli esagoni attraversati dal percorso. Meglio ancora se la funzione mi calcola e disegna il percorso più veloce dati i due esagoni estremi)
8) avere differenti layer sulla mappa in modo da poter visualizzare informazioni differenti (per esempio decidere se mostrare o meno i confini, le città, il numero degli esagoni, etc)
La prima scelta è decidere se usare i HTML Canvas o i SVG. Con i canvas è facile importare e disegnare le immagini .png ma è difficile muoverle e cancellarle. SVG invece usa grafica vettoriale, cosa che a me non serve visto che devo solo combinare oggetti .png ma in compenso essi restano singoli ed è possibile abbinarvi eventi DOM e quindi spostarli, cancellarli, etc. Probabilmente anche il calcolo del percorso è più semplice. Non mi rendo conto quanto sia un problema usare SVG per gestire oggetti immagine già pronti.
Poi per entrambe le cose esistono app/plug-in o non so come chiamarli che potrebbero facilitarmi, avete qualcosa da suggerirmi?
Edit: altra cosa: questi esagoni li devo anche memorizzare con tutti i loro attributi quindi ogni volta che vado a riaprire la mappa posso semplicemente farmela ridisegnare da zero da una funzione visto che ho le coordinate e tutto dei singoli esagoni. Insomma non andrò a salvare solo un jpg della mappa. Questo dovrebbe rendere possibile l'uso dei canvas ma non so se conveniente visto che ogni volta modifico qualcosa devo ridisegnare la mappa.
In particolare si tratta di una applicazione per siti (quindi sarà on-line) e il sito è scritto in python/django + javascript/jQuery (e ovviamente HTML/CSS).
Gli esagoni ce li ho già e sono immagini in formato .png, ora devo solo combinarle tra loro.
Le funzionalità da implementare sono:
1) caricare una mappa esistente (vedi l'edit)
2) farmi selezionare un esagono esterno alla mappa (da una lista esagoni disponibili) e farmelo posizionare sulal mappa (drag and drop col mouse). In alternativa la lista degli esagoni potrebbe essere in una parte riservata dello stesso canvas
3) cancellare un esagono dalla mappa
4) spostare un esagono da un punto all'altro della mappa
5) salvare la mappa
6) traslare la mappa per vederne parti diverse (sarà troppo grande per apparire tutta insieme sul video)
7) calcolare le distanze sulla mappa tra due esagoni (e visto che certi esagoni hanno 'costi' diversi si tratta di sommare un attributo degli esagoni attraversati dal percorso. Meglio ancora se la funzione mi calcola e disegna il percorso più veloce dati i due esagoni estremi)
8) avere differenti layer sulla mappa in modo da poter visualizzare informazioni differenti (per esempio decidere se mostrare o meno i confini, le città, il numero degli esagoni, etc)
La prima scelta è decidere se usare i HTML Canvas o i SVG. Con i canvas è facile importare e disegnare le immagini .png ma è difficile muoverle e cancellarle. SVG invece usa grafica vettoriale, cosa che a me non serve visto che devo solo combinare oggetti .png ma in compenso essi restano singoli ed è possibile abbinarvi eventi DOM e quindi spostarli, cancellarli, etc. Probabilmente anche il calcolo del percorso è più semplice. Non mi rendo conto quanto sia un problema usare SVG per gestire oggetti immagine già pronti.
Poi per entrambe le cose esistono app/plug-in o non so come chiamarli che potrebbero facilitarmi, avete qualcosa da suggerirmi?
Edit: altra cosa: questi esagoni li devo anche memorizzare con tutti i loro attributi quindi ogni volta che vado a riaprire la mappa posso semplicemente farmela ridisegnare da zero da una funzione visto che ho le coordinate e tutto dei singoli esagoni. Insomma non andrò a salvare solo un jpg della mappa. Questo dovrebbe rendere possibile l'uso dei canvas ma non so se conveniente visto che ogni volta modifico qualcosa devo ridisegnare la mappa.
Ultima modifica: