使用jQuery在图像上“绘制”简单线条并保存到Rails数据库的最简单方法？

Question

我想在图像上画线。基本上允许用户绘制他们喜欢的山路的路径。

1）有谁知道绘制基本路线好简单库？

2）用户后得出一堆线的图像，这将是将数据保存到数据库中的最佳方式？

Answer 1

画线

• Paper.js。看看Path Simplification的例子。
• Raphaël - Raphael SketchPad

您可以轻松地覆盖在图像的顶部的元素，以便用户绘制的图像。

此外，只是为了好玩，但你见过 SVG-edit（demo）？

保存

画板脚本上文的JSON提供绘制数据可以保存在数据库中的纯文本行数据。 PaperJS中的对象也可以做同样的事情。这里是一个的jsfiddle example with PaperJS（code）和here with an image as a background。

Answer 2

HTML5画布是我知道这将允许你这样做的唯一的事情。这里是一个伟大的文章：http://diveintohtml5.info/canvas.html

Answer 3

下面是使用canvas元素和定期JS（无库），应可帮助您开始一个快速的解决方案。

添加canvas元素到你的HTML页面。

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

添加javascript以在画布上绘制图像。然后，它会监听点击，并在用户点击时绘制线条。

<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> 

实现我忘了回答问题的后半部分，关于将图像保存到Rails数据库。这很难回答，因为这取决于你想要对结果数据做什么。如果你只是想要最终的图像，我建议你将图像保存到文件系统（我使用S3来存储我的所有图像）。有关如何在StackOverflow上执行此操作的讨论：Capture HTML Canvas as gif/jpg/png/pdf?

如果您需要操作绘制的路径，我将保存单个数据点以及对基础图像的引用。通过ajax将数据点发送回Rails服务器以及图像的URL。然后，您的数据库表可能是这个样子：

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