Disegna una linea con lo strumento Penna su tela con Smashly senza dover ridisegnare tutte le altre righe

Question

C'è un modo per evitare di ridisegnare tutti gli elementi sulla tela (quindi non devo tenere traccia di tutto), pur avendo ancora un Esperienza di disegno scorrevole con la linea attualmente disegnata?

Answer 1

Questo è una domanda molto buona, ma formulata in modo vago. Si prega di essere più attenti domande di parole in futuro.

In genere durante il disegno di linee smussate è necessario ridisegnare la riga dall'inizio.

Non è necessario ridisegnare tutto fin dall'inizio, però, perché si dovrebbe essere seguito di queste operazioni:

1. Salva la tela corrente a una tela in memoria
2. iniziare a disegnare una nuova linea
3. Come si sta disegnando, si è costantemente:
   • Cancellazione della tela
   • disegno da canvas n-memoria sulla tela principale
   • Disegno la linea-so-far
4. Quando la linea termina, si salvano le nuove tela alla tela in memoria e ripetere questo processo

Il solo la linea che devi tenere traccia di (in termini di punti) è quella "corrente". Tutte le vecchie linee vengono salvate nella bitmap tramite la tela in memoria.

Ecco un esempio che ho fatto molto tempo fa, trattando in particolare le linee morbide. L'organizzazione del codice è strano perché ho iniziato con qualcuno codice elses, ma dovrebbe dare l'idea di base:

http://jsfiddle.net/NWBV4/10/

La parte disegno sopra descritta è visto nella MouseMove:

this.mousemove = function(ev) { 
    if (tool.started) { 
     context.clearRect(0, 0, 300, 300); 
     // put back the saved content 
     context.drawImage(memCanvas, 0, 0); 
     tool.points.push({ 
      x: ev._x, 
      y: ev._y 
     }); 
     drawPoints(context, tool.points); 
    } 
};