Se come me siete cresciuti nei primi anni 2000 allora da piccoli avraete passato sicuramente molto tempo su Microsoft Paint a disegnare e creare le tue prime opere d’arte.
In questo articolo analizzeremo assieme un’applicazione web molto simile la cui idea alla base è quella di avere un “foglio bianco” sul quale è possibile disegnare linee ogni volta che muovi il mouse mentre fai click.
La logica di questo piccolo progetto è basata praticamente solo su JavaScript e da pochi elementi grafici essenziali per creare la classica barra degli strumenti di Paint.
Con una rapida ricerca sul web si possono trovare molti progetti simili ma la particolarità di questo è non aver utilizzato l’elemento HTML chiamato <canvas>.
Che cos’è un canvas?
In sintesi un canvas è uno spazio all’interno di una pagina web nel quale, tramite specifiche API, è possibile tracciare linee, cerchi, rettangoli, immagini ma anche inserire elementi 3D utilizzando per esempio three.js.
Il canvas quindi è la scelta migliore e consigliata per questo tipo di esercizio, ma nel nostro caso percorreremo una via diversa ed utilizzeremo un elemento HTML differente ovvero il <polyline>, questo perché il risultato che cerchiamo non è quello di creare un immagine, come avverrebbe col canvas, ma quello di ottenere dei componenti SVG, che volendo possono essere copiati e non hanno limiti di risoluzione.
Che cos’è un polyline?
Un polyline è un elemento SVG generalmente usato per creare linee rette che collegano diversi punti. Polyline necessita dei punti come attributi che consistono in delle coppie di coordinate assolute X e Y, questi punti vengono poi uniti per formare una linea.
Come usare il polyline per questo scopo?
Ogni elemento polyline permette la creazione di una singola linea, per ottenerne più di una è quindi necessario avere più elementi, questi vengono inizializzati vuoti e poi, ad ogni “tratto” realizzato col mouse ne viene riempito uno.
for(var k=0; k<200; k++){
strokeWidth[k] = document.createAttribute('stroke-width');
strokeWidth[k].value = "1px";
polyLine[k] = document.createElementNS(namespace, 'polyline')
polyLine[k].style.zIndex = "2";
SVG.appendChild(polyLine[k]);
}Questo codice contiene un ciclo che crea 200 elementi polyline (numero arbitrario), assegnandogli dei valori iniziali generici ed aggiungendoli ad un contenitore “SVG” dove verranno visualizzati sulla pagina.
Una volta creati i polyline vuoti si vanno a riempire con degli array di punti ottenuti salvando le posizioni del puntatore mentre si muove sulla pagina. Per iniziare a registrare i punti in questo caso si parte col click del mouse che va a modificare la variabile “isDrawing”, iniziando appunto il disegno per poi terminarlo quando il tasto del mouse viene rilasciato.
Una volta creato l’array di punti si salva in una variabile “pointsValue” che, nella funzione “setPolylinePoints” viene adeguata alla sintassi necessaria per essere letta dall’elemento polyline e viene aggiunta come attributo nella pagina così da essere visualizzata
function onMove(event) {
if(isDrawing %2 == 1){
disegno[count]=pointsValue;
polyLine[count].setAttributeNode(strokeWidth[count]);
var x = event.clientX;
var y = event.clientY;
disegno[count].push(x, y);
}
}
function setPolylinePoints(pointsValue) {
let value = pointsValue.toString().replace(/,/g, " ");
var points = document.createAttribute('points');
points.value = value;
polyLine[count].setAttributeNode(points);
}
Attributi grafici del polyline
Il polyline ha inoltre molti altri attributi per personalizzare il nostro disegno, come per esempio lo “stroke” ovvero lo spessore, il “fill” cioè il colore riempitivo dell’SVG, ed infine ovviamente anche il “color” per scegliere il colore della linea.
Utilizzando dei semplici <input type=”color”> (nativi dell’HTML) si possono creare dei color picker nei quali possiamo scegliere un colore anche tramite formato esadecimale #rrggbb ed associarlo ai vari attributi del nostro polyline.
Disegnare altre forme
In questo progetto abbiamo anche aggiunto la possibilità di creare forme geometriche di base come il rettangolo ed il cerchio tramite delle funzioni JS. Praticamente vengono inseriti dei <div> vuoti la cui posizione è data dal punto in cui si clicca per crearli e la dimensione si ottiene da un calcolo fatto sulle coordinate del puntatore al rilascio del click.
Nel codice seguente vediamo come al “mousedown” salviamo il delle variabili globali la posizione iniziale, mentre al “mouseup” usiamo le coordinate iniziali e quelle finali per calcolare le dimensioni e la posizione di un elemento <div> che viene poi aggiunto alla pagina HTML in posizionamento assoluto, nel caso di questo codice semplicemente come un rettangolo vuoto col bordo nero.
Giocando col css di questo elemento è possibile assegnargli colori, bordi diversi e, tramite il “border-radius” renderlo una circonferenza.
document.getElementById("container").addEventListener("mousedown", ShapeDown)
document.getElementById("container").addEventListener("mouseup", ShapeUp)
function ShapeDown(event){
tempX = event.clientX;
tempY = event.clientY;
}
function ShapeUp(event){
var tempX2 = event.clientX;
var tempY2 = event.clientY;
var startX = 0;
var startY = 0;
var width = Math.abs(tempX - tempX2)
var height = Math.abs(tempY - tempY2)
if(tempX < tempX2){
startX = tempX
}else{startX=tempX2}
if(tempY < tempY2){
startY = tempY
}else{startY=tempY2}
if(document.getElementById("shape-checkbox").checked){
const shape = document.createElement("div");
shape.style.cssText = "position:absolute; top:"+
startY +"px; left:"+
startX +"px; border: 3px solid black; width: "+
width +"px; height: "+
height
+"px; z-index: 0;";
shape.setAttribute("id", "shapeTest");
document.getElementById("container").appendChild(shape);
Risultato finale
Una volta impaginato il tutto abbiamo una barra degli strumenti nella quale scegliere colore, dimensione e forme da realizzare, in alto a destra abbiamo un icona del cestino che per resettare la pagina semplicemente esegue un refresh della stessa, mentre accanto il tasto “torna indietro” va a prendere l’ultimo elemento disegnato e lo elimina.
Ora che abbiamo visto insieme come creare una Web Paint Application tramite polyline come alternativa ai canvas possiamo continuare ad espandere questo esempio con tutte le idee che vogliamo.
