A maneira mais fácil de “desenhar” linhas simples sobre uma imagem com jQuery e salvar em Rails DB?

Eu gostaria de desenhar linhas em uma imagem. Basicamente, permite ao usuário traçar um caminho para as trilhas nas montanhas que eles gostam.

1) Alguém conhece uma boa biblioteca simples para desenhar linhas básicas?

2) Depois que um usuário desenha um monte de linhas em uma imagem, qual seria a melhor maneira de salvar os dados no database?

Linhas de desenho

  • Paper.js . Veja o exemplo de simplificação de caminho .
  • Raphaël – Raphael SketchPad

Você pode facilmente sobrepor os elementos na parte superior de uma imagem para que o usuário desenhe a imagem.

Além disso, apenas por diversão, mas você viu o SVG-edit ( demo )?

Salvando os dados da linha

O script do SketchPad acima forneceu dados desenhados em JSON que podem ser salvos como texto simples no database. A mesma coisa pode ser feita nos objects do PaperJS. Aqui está um exemplo de JSFiddle com PaperJS ( código ) e aqui com uma imagem como plano de fundo .

Aqui está uma solução rápida usando o elemento canvas e js regulares (sem bibliotecas) que devem ajudá-lo a começar.

Adicione um elemento de canvas à sua página html.

 Your browser does not support the canvas element.  

Adicione javascript para desenhar sua imagem na canvas. Ele então escutará cliques e desenhará as linhas conforme o usuário clica.

  

Realizado eu esqueci de responder a segunda metade da questão, sobre salvar a imagem em um database do Rails. Isso é mais difícil de responder, porque depende do que você deseja fazer com os dados resultantes. Se você quer apenas a imagem final, sugiro que salve a imagem em um sistema de arquivos (eu uso o S3 para armazenar todas as minhas imagens). Há uma discussão sobre como fazer isso já no StackOverflow: Capture o HTML Canvas como gif / jpg / png / pdf?

Se você precisar manipular o caminho desenhado, eu salvaria os pontos de dados individuais, bem como uma referência à imagem subjacente. Envie os pontos de dados de volta para o seu servidor Rails via ajax, junto com a URL da sua imagem. Sua tabela de database pode ser algo como isto:

 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 

html5 canvas é a única coisa que sei que permitiria que você fizesse isso. Aqui está um ótimo artigo sobre isso: http://diveintohtml5.info/canvas.html

    Intereting Posts