web-dev-qa-db-ja.com

jQueryを使用して画像上に単純な線を「描画」し、Rails DB？

画像に線を引きたいのですが。基本的に、ユーザーが好きな登山道のパスを描画できるようにします。

1）誰かが基本的な線を引くための良いシンプルなライブラリを知っていますか？

2）ユーザーが画像上に一連の線を描いた後、データベースにデータを保存するための最良の方法は何ですか？

jqueryruby-on-railsdrawinglines
25
Daniel Fischer

線を引く

ユーザーが画像上に描画できるように、画像の上に要素を簡単にオーバーレイできます。

また、楽しみのためだけに、 SVG-edit （ demo ）を見たことはありますか？

ラインデータを保存する

上記のSketchPadスクリプトは、データベースにプレーンテキストとして保存できるJSONで描画されたデータを提供しました。同じことをPaperJSのオブジェクトでも実行できます。 JSFiddle PaperJSを使用した例 （ code ）および ここに背景として画像を使用 です。

23
sirhc

これは、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 DBに保存することに関して、質問の後半に答えるのを忘れていました。これは結果のデータで何をしたいかによりますので、これは答えるのが難しいです。最終的な画像だけが必要な場合は、画像をファイルシステムに保存することをお勧めします（私はS3を使用してすべての画像を保存しています）。これを行う方法については、StackOverflowで既に説明されています： Capture HTML Canvas as gif/jpg/png/pdf？

描画されたパスを操作する必要がある場合は、個々のデータポイントと基になる画像への参照を保存します。画像のURLとともに、データポイントをajax経由で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
6
Evan Pon

html5キャンバスは、これを可能にする唯一の方法です。ここにそれについての素晴らしい記事があります： http://diveintohtml5.info/canvas.html

3
Trav McKinney