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
fonte
2012-02-05 00:58:25
Non una libreria però;) http://scribblemaps.com/create/ – Matt
Sarai in grado di utilizzare canvas (html5)? – bang
Sì, l'uso della tela è corretto. –