Самый простой способ «нарисовать» простые линии на изображении с помощью jQuery и сохранить в Rails DB - PullRequest
Новая
       4

Самый простой способ «нарисовать» простые линии на изображении с помощью jQuery и сохранить в Rails DB

23 голосов
/ 27 января 2012

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

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

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

Ответы [ 3 ]

24 голосов
/ 07 февраля 2012

Рисование линий

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

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

Сохранение данных строки

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

6 голосов
/ 05 февраля 2012

Вот быстрое решение с использованием элемента 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 обсуждается, как это сделать: Захватить HTML-холст в формате gif / jpg / png / pdf?

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

холст html5 - единственное, что я знаю, что позволит вам сделать это.Вот отличная статья об этом: http://diveintohtml5.info/canvas.html

...