library - ¿La forma más sencilla de "dibujar" líneas simples sobre una imagen con jQuery y guardar en Rails DB?

jquery rails gem

Question

Me gustaría dibujar líneas en una imagen. Básicamente, permite al usuario dibujar un camino para los senderos de montaña que les gustan.

1) ¿Alguien sabe una buena biblioteca simple para dibujar líneas básicas?

2) Después de que un usuario dibuja un montón de líneas en una imagen, ¿cuál sería la mejor manera de guardar los datos en la base de datos?

Answer 1

Dibujando lineas

• Paper.js . Mira el ejemplo de simplificación de ruta .
• Raphaël - Raphael SketchPad

Puede superponer fácilmente los elementos en la parte superior de una imagen para que el usuario dibuje en la imagen.

Además, solo por diversión, pero ¿has visto SVG-edit ( demo )?

Guardando los datos de línea

La secuencia de comandos de SketchPad anterior proporcionó datos dibujados en JSON que se pueden guardar como texto sin formato en la base de datos. Lo mismo se puede hacer en los objetos de PaperJS. Aquí hay un ejemplo de JSFiddle con PaperJS ( code ) y aquí con una imagen como fondo .

Answer 2

Aquí hay una solución rápida utilizando el elemento de lienzo y js regulares (sin bibliotecas) que deberían ayudarlo a comenzar.

Agrega un elemento de lienzo a tu página html.

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

Agrega javascript para dibujar tu imagen en el lienzo. Luego escuchará los clics y dibujará las líneas a medida que el usuario haga 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 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>

Me di cuenta de que olvidé responder a la segunda mitad de la pregunta, con respecto a guardar la imagen en una base de datos Rails. Esto es más difícil de responder, ya que depende de lo que quiera hacer con los datos resultantes. Si solo desea la imagen final, le sugiero que guarde la imagen en un sistema de archivos (uso S3 para almacenar todas mis imágenes). Hay una discusión sobre cómo hacer esto ya en : ¿ Capturar HTML Canvas como gif / jpg / png / pdf?

Si necesita manipular la ruta dibujada, guardaría los puntos de datos individuales así como una referencia a la imagen subyacente. Envíe los puntos de datos a su servidor Rails a través de ajax, junto con la url de su imagen. La tabla de su base de datos puede verse así:

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

Answer 3

El lienzo de html5 es lo único que sé que te permitiría hacer esto. Aquí hay un gran artículo sobre él: http://diveintohtml5.info/canvas.html