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