none
Desenhar em imagem RRS feed

  • Pergunta

  • Caros, preciso desenhar em uma imagem, tipo paint brush e depois salvar as coordenadas deste desenho no banco e é claro, exibir posteriormente.

    Como posso fazer isso?


    Desenvolva!!!

    quarta-feira, 13 de fevereiro de 2013 15:29

Respostas

  • Você pode usar o canvas e gravar as informações no de cada linha desenhada no banco de dados, exemplo:

    var width = 125; // Largura var height = 105; // Altura var padding = 20; // Desenho context.beginPath(); context.moveTo(padding + width/2, padding); // Topo context.lineTo(padding + width, height + padding); // Rodape

    context.lineTo(padding, height + padding); context.closePath(); // Binding context.fillStyle = "#ffc821"; context.fill();


    Exemplo:

    html5-canvas-example


    If the answer was helpful vote


    • Sugerido como Resposta Jean LLopes quarta-feira, 6 de janeiro de 2016 00:06
    • Editado Jean LLopes quarta-feira, 6 de janeiro de 2016 00:07
    • Marcado como Resposta welington jrModerator quinta-feira, 14 de dezembro de 2017 17:00
    quarta-feira, 6 de janeiro de 2016 00:06

Todas as Respostas

  • Eu não sei, mas vou dar um pitaco, vi alguma coisa desse estilo usando HTML 5 e CCS3. Mas não sei se vc consegue guardar as "coordenadas" no bd.

    Paulo Marcelo Dalbosco

    quarta-feira, 13 de fevereiro de 2013 15:34
  • Seria algo desse tipo? http://sketchtoy.com/ (acho que usa WebGL). O mais básico é dar uma procurada sobre canvas + HTML5.


    • Editado rs.developer quinta-feira, 14 de fevereiro de 2013 02:24
    quarta-feira, 13 de fevereiro de 2013 23:05
  • Você pode usar o canvas e gravar as informações no de cada linha desenhada no banco de dados, exemplo:

    var width = 125; // Largura var height = 105; // Altura var padding = 20; // Desenho context.beginPath(); context.moveTo(padding + width/2, padding); // Topo context.lineTo(padding + width, height + padding); // Rodape

    context.lineTo(padding, height + padding); context.closePath(); // Binding context.fillStyle = "#ffc821"; context.fill();


    Exemplo:

    html5-canvas-example


    If the answer was helpful vote


    • Sugerido como Resposta Jean LLopes quarta-feira, 6 de janeiro de 2016 00:06
    • Editado Jean LLopes quarta-feira, 6 de janeiro de 2016 00:07
    • Marcado como Resposta welington jrModerator quinta-feira, 14 de dezembro de 2017 17:00
    quarta-feira, 6 de janeiro de 2016 00:06