Il modo più semplice per "disegnare" linee semplici su un'immagine con jQuery e salvare nel DB Rails?

Question

Mi piacerebbe disegnare linee su un'immagine. Consentono in pratica all'utente di tracciare un percorso per i sentieri di montagna che preferiscono.

1) Qualcuno conosce una buona libreria semplice per disegnare le linee di base?

2) Dopo che un utente disegna un mucchio di linee su un'immagine, quale sarebbe il modo migliore per salvare i dati nel database?

Answer 1

Disegno di linee

• Paper.js. Guarda l'esempio Path Simplification.
• Raphaël - Raphael SketchPad

Si può facilmente sovrapporre gli elementi sulla parte superiore di un'immagine in modo che l'utente trae sull'immagine.

Inoltre, solo per divertimento, ma hai visto SVG-edit (demo)?

Protezione dei dati di linea

Lo script SketchPad sopra i dati elaborati forniti in JSON che possono essere salvati come testo normale nel database. La stessa cosa può essere fatta sugli oggetti di PaperJS. Ecco un JSFiddle example with PaperJS (code) e here with an image as a background.

Answer 2

html5 canvas è l'unica cosa che so che ti permetterebbe di fare questo. Ecco un ottimo articolo: http://diveintohtml5.info/canvas.html

Answer 3

Ecco una soluzione rapida che utilizza l'elemento canvas e il js regolare (senza librerie) che dovrebbe aiutarti a iniziare.

Aggiungi un elemento canvas alla tua pagina html.

<canvas id="canvas" width="800" height="600"> 
    Your browser does not support the canvas element. 
</canvas> 

Aggiungi javascript per disegnare l'immagine sulla tela. Quindi ascolta i clic e disegna le linee mentre l'utente fa clic.

<script type="text/javascript"> 
    var canvas = document.getElementById("canvas"); 
    var context = document.getElementById('canvas').getContext('2d'); 

    var points = []; 

    // Determine where the user clicked, I believe I pulled this from elsewhere on StackOverflow a while ago. 
    function getCursorPosition(e) { 
    var mx, my; 
    if (e.pageX || e.pageY) { 
     mx = e.pageX; 
     my = e.pageY; 
    } 
    else { 
     mx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     my = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 
    mx -= canvas.offsetLeft; 
    my -= canvas.offsetTop; 
    return {x: mx, y: my}; 
    } 

    // Once we have at least two points, draw a line between them. 
    function drawPath() { 
    context.beginPath(); 
    for (var i = 0; i < points.length - 1; i++) { 
     context.moveTo(points[i]['x'], points[i]['y']); 
     context.lineTo(points[i+1]['x'], points[i+1]['y']); 
     context.stroke(); 
    } 
    context.closePath(); 
    } 

    // Listen for clicks, and redraw the map when they occur. 
    function initPointCollection() { 
    canvas.onclick = function(e) { 
     var point = getCursorPosition(e); 
     points.push(point); 

     if (points.length > 1) { 
     drawPath(); 
     } 
    } 
    } 

    function init() { 
    // Load up your image. Don't attempt to draw it until we know it's been loaded. 
    var mountain = new Image(); 
    mountain.onload = function() { 
     context.drawImage(this, 0, 0); 
     initPointCollection(); 
    } 
    mountain.src = 'mountain.png'; // Replace with actual image. 
    } 

    // Should check if document has finished loading first, but I'm too lazy, especially without JQuery. 
    init(); 
</script> 

Realizzato Ho dimenticato di rispondere alla seconda metà della questione, per quanto riguarda il salvataggio dell'immagine a un Rails DB. È più difficile rispondere, perché dipende da cosa si vuole fare con i dati risultanti. Se vuoi solo l'immagine finale, ti suggerisco di salvare l'immagine su un filesystem (io uso S3 per memorizzare tutte le mie immagini). C'è una discussione su come farlo già su StackOverflow: Capture HTML Canvas as gif/jpg/png/pdf?

Se è necessario modificare il percorso tracciato, salverei i singoli punti di dati nonché un riferimento all'immagine sottostante. Invia i datapoints al tuo server Rails tramite ajax, insieme all'URL della tua immagine. La vostra tabella di database può quindi essere simile a questa:

create_table :hiking_paths do |t| 
    t.string 'image_url', :null => false 
    t.string 'points', :limit => 1000 #if you want unlimited points, change to text column type 
    t.timestamps 
end