Visibilità di linee disegnate nel Canvas

**giustavalla** · 21-02-2012, 16:45

Il codice seguente disegna alcune linee su una immagine. Successivamente l'utente dovrebbe essere in grado di nascondere o visualizzare queste linee, cliccando su uno dei 2 link.
Non riesco proprio a completare questo programmino forse perchè le linee non hanno ID o, più probabilmente, per la mia incapacità. Qualcuno puoi aiutarmi ?
Grazie anticipatamente

codice:

<HTML>
<head>
<script type='text/javascript'>
function nascondi() {
document.getElementById('myCanvas').style.visibility = 'hidden';
}
function vedi()  {
document.getElementById('myCanvas').style.visibility = 'visible';
}
</script>
<script>
window.onload = function(){
var Canvas = document.getElementById('myCanvas');
var context = Canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.moveTo(411,0);
context.lineTo(411,181);
context.moveTo(397,0);
context.lineTo(397,186);
context.moveTo(354,0);
context.lineTo(354,205);
context.strokeStyle = '#000000';
context.stroke();
}
imageObj.src = 'Immagine.jpg';
};
</script>
</head>
<BODY topmargin=0 leftmargin=0>
<Canvas id='myCanvas' width='497' height='600' >
</Canvas>


nascondi le linee


vedi le linee
</BODY>
</HTML>

**leaderboard** · 22-02-2012, 18:10

Dal codice che leggo potresti risolvere creando 2 livelli uno per il canvas, che nasconderai o visualizzerari, e l'altro per l'immagine. Anche xche credo difficilmente sia possibile tramite canvas assegnare un id ad ogni linea o poligono. Cosa credo succeda cn svg.
Mi considero alle prime armi, quindi...

**giustavalla** · 22-02-2012, 18:22

Io probabilmente sono più alle prime armi di te, riguardo l'HTML5.
E' per questo che chiedevo aiuto a chi è più esperto di me.
Non credo proprio che le linee e le etichette possano avere un proprio ID. In ogni caso, essendo molte le linee e le relative etichette, la vedrei difficile nel dire (nel codice) nascondi tutti le linee (e le etichette) che hanno questi ID.
Indagherò se esistono i layer. L'immagine la disegnerei su uno e le linee (con le etichette) su un altro. Cosi' sembrerebbe più praticabile e facile.
P.S.: Nel codice non è indicato ma ad ogni linea è associata un'etichetta (una scritta in parole povere. Queste coppie sono 40 o 50.

**Caiodark** · 12-03-2012, 11:39

Prima di tutto un sito che ho trovato molto utile sull'argomento:
http://www.html5canvastutorials.com/

Un consiglio è, una volta capite grosso modo le basi, impiegare delle librerie che incapsulino la programmazione a basso livello. Il sito che ti ho consigliato, dopo aver insegnato le basi, ti consiglia due librerie rispettivamente per il 2d e il 3d.

Venendo al tuo codice c'é un errore concettuale, una volta che si disegna il canvas per effettuare modifiche occorre pulirlo (con context.clearRect()) e ridisegnare.
L'approccio che seguirei (giusto per fare la prova è questo):

- funzione disegno con parametro disegnoLinee che effettui prima la pulitura del canvas (context.clearRect()) e poi disegna, testi il parametro se disegnare le linee o meno;
- windows.onload faccio andare la procedura con parametro disegnoLinee true;
- le funzioni nascondi e mostra chiamano la funzione disegno con l'opportuno valore nel parametro.

Migliore approccio sarebbe incapsulare la logica in un oggetto, cosa che ti verrà naturale impiegando le librerie.

**giustavalla** · 12-03-2012, 12:32

Grazie delle info.
Tuttavia ho abbandonato l'idea di visualizzare queste etichette con il canvas e HTML5 in quanto troppo pesanti sul piano grafico. Sto infatti sviluppando un app per Android ed ho visto che disegnare su un paio di immagini di 10.000x600 pixel su uno smartphone è probabilmente improponibile.
Uso un altro sistema (usare delle view, label e panel; sviluppo nel linguaggio B4A) e funziona perfettamente.

Discussione: Visibilità di linee disegnate nel Canvas

Strumenti discussione

Ricerca discussione

Visualizza

Visibilità di linee disegnate nel Canvas

Permessi di invio