jQuery 使用jQuery在图像上“绘制”简单线条并保存到Rails DB的最简单方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9030441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Easiest way to "draw" simple lines over an image with jQuery and save to Rails DB?
提问by Daniel Fischer
I'd like to draw lines on an image. Basically allow the user to draw a path for mountain trails they like.
我想在图像上画线。基本上允许用户为他们喜欢的山路画一条路径。
1) Does anyone know a good simple library for drawing basic lines?
1）有谁知道一个很好的简单的绘制基本线条的库？
2) After a user draws a bunch of lines on an image, what would be the best way to save the data to the database?
2）在用户在图像上绘制一堆线条后，将数据保存到数据库的最佳方法是什么？
采纳答案by sirhc
Drawing lines
画线
- Paper.js. Look at the Path Simplificationexample.
- Rapha?l- Raphael SketchPad
- 纸.js。查看路径简化示例。
- 拉法L·-拉斐尔SketchPad系统
You can easily overlay the elements on top of an image so the user draws on the image.
您可以轻松地将元素叠加在图像之上，以便用户在图像上进行绘制。
Also, just for fun, but have you seen SVG-edit(demo)?
另外，只是为了好玩，但你见过 SVG-edit( demo) 吗？
Saving the line data
保存线数据
The SketchPad script above provided drawn data in JSON that can be saved as plain text in the database. The same thing can be done on the objects from PaperJS. Here is a JSFiddle example with PaperJS(code) and here with an image as a background.
上面的 SketchPad 脚本提供了 JSON 格式的绘制数据，可以在数据库中保存为纯文本。可以对 PaperJS 中的对象执行相同的操作。这是一个带有 PaperJS（代码）的 JSFiddle示例，这里有一个图像作为背景。
回答by Evan Pon
Here's a quick solution using the canvas element and regular js (no libraries) that should help you get started.
这是一个使用 canvas 元素和常规 js（无库）的快速解决方案，可以帮助您入门。
Add a canvas element to your html page.
将画布元素添加到您的 html 页面。
<canvas id="canvas" width="800" height="600">
Your browser does not support the canvas element.
</canvas>
Add javascript to draw your image on the canvas. It will then listen for clicks, and draw the lines as the user clicks.
添加 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>
Realized I forgot to answer the second half of the question, regarding saving the image to a Rails DB. This is harder to answer, because it depends on what you want to do with the resulting data. If you just want the final image, I suggest you save the image to a filesystem (I use S3 to store all my images). There's a discussion on how to do this already on StackOverflow: Capture HTML Canvas as gif/jpg/png/pdf?
意识到我忘了回答问题的后半部分，关于将图像保存到 Rails DB。这很难回答，因为这取决于您想对结果数据做什么。如果您只想要最终图像，我建议您将图像保存到文件系统（我使用 S3 来存储我的所有图像）。StackOverflow 上已有关于如何执行此操作的讨论：Capture HTML Canvas as gif/jpg/png/pdf?
If you need to manipulate the path drawn, I would save the individual data points as well as a reference to the underlying image. Send the datapoints back to your Rails server via ajax, along with the url of your image. Your database table may then look something like this:
如果您需要操作绘制的路径，我会保存单个数据点以及对底层图像的引用。通过 ajax 将数据点连同图像的 url 发送回您的 Rails 服务器。您的数据库表可能如下所示：
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
回答by Trav McKinney
html5 canvas is the only thing I know that would allow you to do this. Here is a great article on it: http://diveintohtml5.info/canvas.html
html5 canvas 是我所知道的唯一可以让你这样做的东西。这是一篇很棒的文章：http: //diveintohtml5.info/canvas.html
