Я хотел бы нарисовать линии на изображении. В принципе, пользователь может нарисовать путь к горным тропам, которые им нравятся.

1) Кто-нибудь знает хорошую простую библиотеку для рисования основных линий?

2) После того, как пользователь нарисовал кучу строк на изображении, что было бы лучшим способом сохранить данные в базе данных?

Ответы

Ответ 1

Линии рисования

Paper.js. Посмотрите пример Path Simplification.
Raphaël - Raphael SketchPad

Вы можете легко наложить элементы поверх изображения, чтобы пользователь рисовал изображение.

Кроме того, просто для удовольствия, но вы видели SVG-edit (демонстрация)?

Сохранение данных линии

SketchPad script выше предоставил данные в JSON, которые могут быть сохранены в виде обычного текста в базе данных. То же самое можно сделать и с объектами из PaperJS. Вот пример JSFiddle с PaperJS (code) и здесь с изображением в качестве фона.

Ответ 2

Здесь быстрое решение, использующее элемент 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 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 DB. Это сложнее ответить, потому что это зависит от того, что вы хотите сделать с полученными данными. Если вы просто хотите окончательное изображение, я предлагаю вам сохранить изображение в файловой системе (я использую S3 для хранения всех моих изображений). Там обсуждается, как это сделать уже в StackOverflow: Захват HTML-холста как gif/jpg/png/pdf?

Если вам нужно манипулировать выделенным контуром, я бы сохранил отдельные точки данных, а также ссылку на основное изображение. Отправьте datapoints обратно на ваш сервер Rails через ajax вместе с 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

Ответ 3