我想在圖像上畫線。基本上允許用戶繪製他們喜歡的山路的路徑。使用jQuery在圖像上「繪製」簡單線條並保存到Rails數據庫的最簡單方法?
1)有誰知道繪製基本路線好簡單庫?
2)用戶後得出一堆線的圖像,這將是將數據保存到數據庫中的最佳方式?
我想在圖像上畫線。基本上允許用戶繪製他們喜歡的山路的路徑。使用jQuery在圖像上「繪製」簡單線條並保存到Rails數據庫的最簡單方法?
1)有誰知道繪製基本路線好簡單庫?
2)用戶後得出一堆線的圖像,這將是將數據保存到數據庫中的最佳方式?
您可以輕鬆地覆蓋在圖像的頂部的元素,以便用戶繪製的圖像。
此外,只是爲了好玩,但你見過 SVG-edit(demo)?
保存畫板腳本上文的JSON提供繪製數據可以保存在數據庫中的純文本行數據。 PaperJS中的對象也可以做同樣的事情。這裏是一個的jsfiddle example with PaperJS(code)和here with an image as a background。
謝謝你..這兩個都是優秀圖書館 – Orlando 2012-02-17 15:04:40
HTML5畫布是我知道這將允許你這樣做的唯一的事情。這裏是一個偉大的文章:http://diveintohtml5.info/canvas.html
下面是使用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
你能給我們一個小提琴嗎? – 2012-02-05 09:16:18
@AlexCoplan - ? – 2012-02-06 22:39:50
http://jsfiddle.net/ – 2012-02-07 07:59:06
雖然不是圖書館;)http://scribblemaps.com/create/ – Matt 2012-01-27 08:07:13
你能使用canvas(html5)嗎? – bang 2012-01-31 15:17:24
是的,使用畫布很好。 – 2012-02-01 07:14:28