Ir para conteúdo
Fórum Script Brasil

Paulo Dantas

Membros
 Perfil  Explorar Conteúdo

  • Total de itens

    2

  • Registro em

  • Última visita

Sobre Paulo Dantas

Paulo Dantas's Achievements

0

Reputação

  1. Paulo Dantas
    Já fiz isto mas não entendi o resultado, sou novo com js, mas mesmo assim muito obrigado já resolvi de outra maneira.
  2. Paulo Dantas
    Olá pessoal, não sei se estou postando no lugar certo mas é o seguinte, estava precisando de uma juda em um codigo com canvas, não sei o que fiz de errado no script, sou novo com js, alguém pode me ajudar? O codigo é este: <!DOCTYPE html> <html> <head> <title>Canvas</title> <script type="text/javascript"> $(document).ready(function() { var Canvas; var CanvasContexto; var NovoCanvas; var NovoCanvasContexto; var Formato; var FormatoOriginal = "LinhaLivre"; var Cor = "#000000"; function Init() { Canvas = document.getElementById("Canvas"); CanvasContexto = Canvas.getContext("2d"); var NovoCanvasContainer = Canvas.parentNode; NovoCanvas = document.createElement("canvas"); NovoCanvas.id = "NovoCanvas"; NovoCanvas.width = Canvas.width; NovoCanvas.height = Canvas.height; NovoCanvasContainer.appendChild(NovoCanvas); NovoCanvasContexto = NovoCanvas.getContext('2d'); NovoCanvasContexto.strokeStyle = "#DDDDDD"; NovoCanvasContexto.lineWidth = 5.0; if (Formatos[FormatoOriginal]) { Formato = new Formatos[FormatoOriginal](); } $("#NovoCanvas").bind("mousedown mousemove mouseup", function(evento) { if (evento.layerX || evento.layerX == 0) { evento._x = evento.layerX; evento._y = evento.layerY; } else if (evento.offsetX || evento.offsetX == 0) { evento._x = evento.offsetX; evento._y = evento.offsetY; } var func = Formato[evento.type]; if (func) { func(evento); } }); } Init(); }); var Formatos = {}; Formatos.LinhaLivre = function() { var Formato = this; this.comecou = false; this.mousedown = function(evento) { NovoCanvasContexto.beginPath(); NovoCanvasContexto.moveTo(evento._x, evento._y); Formato.comecou = true; }; this.mousemove = function(evento) { if (Formato.comecou) { NovoCanvasContexto.strokeStyle = Cor; // Cor da linha NovoCanvasContexto.lineTo(evento._x, evento._y); NovoCanvasContexto.stroke(); } }; this.mouseup = function(evento) { if (Formato.comecou) { Formato.mousemove(evento); Formato.comecou = false; Desenhar(); } }; }; // O visitante quer desenhar um rectângulo Formatos.Rectangulo = function(evento) { var Formato = this; this.comecou = false; this.mousedown = function(evento) { Formato.comecou = true; Formato.x0 = evento._x; Formato.y0 = evento._y; }; this.mousemove = function(evento) { if (!Formato.comecou) { return; } // Calcular matematicamente var x = Math.min(evento._x, Formato.x0), y = Math.min(evento._y, Formato.y0), w = Math.abs(evento._x - Formato.x0), h = Math.abs(evento._y - Formato.y0); NovoCanvasContexto.clearRect(0, 0, NovoCanvas.width, NovoCanvas.height); if (!w || !h) { return; } NovoCanvasContexto.strokeStyle = Cor; NovoCanvasContexto.strokeRect(x, y, w, h); }; // Desenha o rectângulo no canvas original this.mouseup = function(evento) { if (Formato.comecou) { Formato.mousemove(evento); Formato.comecou = false; Desenhar(); } }; }; //Um circulo Formatos.Circulo = function(evento) { var Formato = this; this.comecou = false; this.mousedown = function(evento) { Formato.comecou = true; Formato.x0 = evento._x; Formato.y0 = evento._y; }; this.mousemove = function(evento) { if (!Formato.comecou) { return; } NovoCanvasContexto.beginPath(); NovoCanvasContexto.clearRect(0, 0, NovoCanvas.width, NovoCanvas.height); var Radius = Math.abs(Formato.x0 - evento._x) NovoCanvasContexto.arc(Formato.x0, Formato.y0, Radius, 0, Math.PI * 2, false) NovoCanvasContexto.strokeStyle = Cor; // Cor da linha NovoCanvasContexto.stroke(); }; this.mouseup = function(evento) { Formato.mousemove(evento); Formato.comecou = false; Desenhar(); }; }; // Uma linha Formatos.Linha = function(evento) { var Formato = this; this.comecou = false; this.mousedown = function(evento) { Formato.comecou = true; Formato.x0 = evento._x; Formato.y0 = evento._y; }; this.mousemove = function(evento) { if (!Formato.comecou) { return; } NovoCanvasContexto.clearRect(0, 0, NovoCanvas.width, NovoCanvas.height); NovoCanvasContexto.beginPath(); NovoCanvasContexto.moveTo(Formato.x0, Formato.y0); NovoCanvasContexto.lineTo(evento._x, evento._y); NovoCanvasContexto.strokeStyle = Cor; // Cor da linha NovoCanvasContexto.stroke(); NovoCanvasContexto.closePath(); }; this.mouseup = function(evento) { if (Formato.comecou) { Formato.mousemove(evento); Formato.comecou = false; Desenhar(); } }; }; function Desenhar() { CanvasContexto.drawImage(NovoCanvas, 0, 0); NovoCanvasContexto.clearRect(0, 0, NovoCanvas.width, NovoCanvas.height); }; // O usuário escolheu o circulo $("#forCirculo").click(function() { if (Formatos["Circulo"]) { Formato = new Formatos["Circulo"](); } }); // O usuário escolheu o rectângulo $("#forRectangulo").click(function() { if (Formatos["Rectangulo"]) { Formato = new Formatos["Rectangulo"](); } }); // O usuário escolheu a linha $("#forLinha").click(function() { if (Formatos["Linha"]) { Formato = new Formatos["Linha"](); } }); // O usuário escolheu a linha livre/lápis $("#forLapis").click(function() { if (Formatos["LinhaLivre"]) { Formato = new Formatos["LinhaLivre"](); } }); // Cores $("#cor000000").click(function() { Cor = "#000000"; }); $("#corFFFFFF").click(function() { Cor = "#FFFFFF"; }); $("#cor7c0608").click(function() { Cor = "#7c0608"; }); $("#corf3c421").click(function() { Cor = "#f3c421"; }); $("#opcSalvar").click(function() { var dataURL = Canvas.toDataURL("image/png"); document.location.href = dataURL; }); </script> <style type="text/css"> #Container { position: relative; cursor: crosshair; } #Canvas { position: absolute; overflow: hidden; background-color: transparent; border: 1px solid #DDD; } #NovoCanvas { position: absolute; overflow: hidden; height: 600px; width: 800px; } </style> </head> <body> <div id="menu" style="left: 0px; top: 0px"> <strong>Formatos</strong><br> <a href="#" id="forCirculo">Circulo</a><br /> <a href="#" id="forRectangulo">Rectângulo</a><br /> <a href="#" id="forLinha">Linha</a><br /> <a href="#" id="forLapis">Lapis</a><br /> <strong>Cores</strong><br> <a href="#" id="corFFFFFF">Branco</a><br /> <a href="#" id="cor000000">Preto</a><br /> <a href="#" id="cor7c0608">Vermelho</a><br /> <a href="#" id="corf3c421">Amarelo</a><br /> <strong>Opções</strong><br> <a href="#" id="opcSalvar">Salvar</a> </div> <div id="Container" style="left: 93px; top: -242px; width: 1361px"> <canvas id="Canvas" width="800" height="600"> <p>O teu navegador não suporta canvas</p> </canvas> <canvas id="NovoCanvas" width="800" height="600"> </canvas> </div> </body> </html> fonte: http://www.pttutoriais.com/352/canvas-apli...desenho-parte-1 http://www.pttutoriais.com/448/canvas-apli...rte-2#undefined Já tentei entrar em contato com o autor mas não consegui resposta. alguém pode me ajudar por favor !:(
×
×
  • Criar Novo...