"mirino" agganciato al mouse nel canvas

[dieguzorro]

Ciao a tutti, ho un problema con il canvas di HTML5. Sto tentando di costruire un mirino tacchettato da muovere con il mouse. Questo mirino consta in una croce che percorre tutto il canvas, incrociandosi nel punto indicato dal puntatore del mouse. su tale mirino vi sono delle tacchette che indicherebbero i millimetri, e ogni 5 tacche vi è un numerino che indica a la distanza di 5, 10, ecc... dall'origine.

Il disegno fatto con le funzioni moveTo e lineTo funziona alla grande. Tento di agganciarlo al mouse e funziona, peccato che il mirino rimanga impresso sul canvas senza poter essere cancellato. L'effetto è quindi una sorta di maxipennello. Questo per le linee. Ho notato che i testi (numeri) non vengono impressi sul canvas ma vengono realmente draggati. vi posto il codice JS:

var zoom_level=0;
var tacche=[]; //definisce per ogni livello, ogni quanti pixel inserire una tacca
var scala_tacche = []; //definisce per ogni livello l'unità di misura delle tacche (cm, mm, inches, ecc...)

// definizione righelli
tacche[0] = 10;
scala_tacche[0] = "mm";
tacche[1] = 20;
scala_tacche[1] = "mm";
tacche[2] = 40;
scala_tacche[2] = "mm";
tacche[3] = 80;
scala_tacche[3] = "mm";
////////////////////////

var WIDTH=1000;
var HEIGHT=500;
var xPos=550;
var yPos=350;
var color='black';


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=1;

ctx.font="10pt courier new";
ctx.fillStyle=color;

ctx.strokeStyle=color;

function clear() {
 //c=document.getElementById("myCanvas");
 //ctx=c.getContext();
 ctx.clearRect(0, 0, WIDTH, HEIGHT);
 ctx.width=WIDTH;
}

function draw_target(xPos,yPos) {
    //ctx.fillRect(255,255,c.width,c.height);
    //ctx.restore();
    clear();
    var length;
    var i;
    
    // testo
    //ctx.fillText("("+(xPos/tacche[zoom_level])+","+(yPos/tacche[zoom_level])+") "+scala_tacche[zoom_level], xPos + 5, yPos-5);
    ctx.fillText(scala_tacche[zoom_level], xPos + 10, yPos - 10);
    
    //horiz. line
    ctx.moveTo(0,yPos);
    ctx.lineTo(WIDTH,yPos);
    //vert. line
    ctx.moveTo(xPos,0);
    ctx.lineTo(xPos,HEIGHT);
    
    var j=0;
    // faccio le tacche sotto il ramo est del mirino
    for (i=xPos;i<WIDTH;i=i+tacche[zoom_level]) {
        //la mia posizione x attuale è i
        length = 5
        if (j%5==0) {
            length=length*2; //ogni 5 faccio una tacchetta + lunga
            if (j>0) {
                ctx.fillText(j, i-5, yPos+length+15);
            }
            
        }
        ctx.moveTo(i, yPos); //vado alla posizione i,yPos... quindi sulla linea del mirino
        ctx.lineTo(i, yPos+length); //traccio una linea di 5/10px verso il basso
        j++;
    }

    j=0;
    // faccio le tacche sotto il ramo ovest del mirino
    for (i=xPos;i>0;i=i-tacche[zoom_level]) {
        length = 5
        if (j%5==0) {
            length=length*2; //ogni 5 faccio una tacchetta + lunga
            if (j>0) {
                ctx.fillText(j*-1, i-10, yPos+length+15);
            }
        }
        //la mia posizione x attuale è i
        ctx.moveTo(i, yPos); //vado alla posizione i,yPos... quindi sulla linea del mirino
        ctx.lineTo(i, yPos+length); //traccio una lineetta di 5px verso il basso
        j++;
    }

    j=0;
    // faccio le tacche sul ramo sud del mirino
    for (i=yPos;i<HEIGHT;i=i+tacche[zoom_level]) {
        length = 5
        if (j%5==0) {
            length=length*2; //ogni 5 faccio una tacchetta + lunga
            if (j>0) {
                ctx.fillText(j*-1, xPos+15, i+5);
            }
        }
        //la mia posizione y attuale è i
        ctx.moveTo(xPos, i); //vado alla posizione xPos, i... quindi sulla linea del mirino
        ctx.lineTo(xPos+length, i); //traccio una lineetta di 5px verso sinistra
        j++;
    }

    j=0;
    // faccio le tacche sul ramo nord del mirino
    for (i=yPos;i>0;i=i-tacche[zoom_level]) {
        length = 5
        if (j%5==0) {
            length=length*2; //ogni 5 faccio una tacchetta + lunga
            if (j>0) {
                ctx.fillText(j, xPos+15, i+5);
            }
        }
        //la mia posizione y attuale è i
        ctx.moveTo(xPos, i); //vado alla posizione xPos, i... quindi sulla linea del mirino
        ctx.lineTo(xPos+length, i); //traccio una lineetta di 5px verso sinistra
        j++;
    }
    ctx.stroke();
}

/***************************************/
function init () {
  // ...
  // Attach the mousemove event handler.
  c.addEventListener('mousemove', ev_mousemove, false);
}

// The mousemove event handler.
var started = false;
function ev_mousemove (ev) {
  var x, y;

  // Get the mouse position relative to the canvas element.
  if (ev.layerX || ev.layerX == 0) { // Firefox
    x = ev.layerX-10;
    y = ev.layerY-10;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }

  // The event handler works like a drawing pencil which tracks the mouse 
  // movements. We start drawing a path made up of lines.
  draw_target(x,y);
}

/***************************************/
init();

mentre l'html contiene questo codice:

<canvas id="myCanvas" width="1000" height="500" style="border:2px solid black;">
Your browser does not support the canvas element.</canvas>
<input type="button" value="Clear" onClick="ctx.clearRect(0, 0, WIDTH, HEIGHT)">

ho aggiunto il bottone per capire se la funzione clearRect facesse il suo dovere. Effettivamente sì, lo fa, pulisce il canvas, ma nonappena muovo il mouse nuovamente, il pasticcio appena apparentemente ripulito, ricompare tale e quale a prima. Come fare? Grazie a tutti...

[Tonenge]

Ciao,
Mancavano soltanto il beginPath(); ed il closePath();

Saluti

//horiz. line
ctx.beginPath();
ctx.moveTo(0,yPos);
ctx.lineTo(WIDTH,yPos);
//vert. line
ctx.moveTo(xPos,0);
ctx.lineTo(xPos,HEIGHT);
ctx.closePath();

[dieguzorro]

GRANDISSIMO! Grazie mille... lo sapevo che era una cavolata... ma essendo la mia prima esperienza col canvas direi che è comprensibile che possa sfuggire qlcosa :-D

grazie ancora!