Ir ao conteúdo
  • Cadastre-se

Ajuda com Canvas


Posts recomendados

Boa noite galera, eu estou desenvolvendo uma aplicacao em canvas que desenha algumas formas geometrica, porém estou trancado em alguns problemas, acredito que seja mais na formula para desenha do que no codigo em si, se alguem tiver alguma luz de como resolver isso ou algum link para me ajudar, agradeco, segue as formas que estou trancado:

 

Minha Borracha:

	tools.rubber = function () {    var tool = this;    this.started = false;		    // This is called when you start holding down the mouse button.    // This starts the pencil drawing.    this.mousedown = function (ev) {        context.beginPath();        context.moveTo(ev._x, ev._y);        tool.started = true;    };    // This function is called every time you move the mouse. Obviously, it only     // draws if the tool.started state is set to true (when you are holding down     // the mouse button).    this.mousemove = function (ev) {      if (tool.started) {        context.lineTo(ev._x, ev._y);		context.strokeStyle = 'white';		 context.lineWidth = 15;        context.stroke();      }    };    // This is called when you release the mouse button.    this.mouseup = function (ev) {      if (tool.started) {        tool.mousemove(ev);        tool.started = false;        img_update();      }    };  };

Ela apaga normal, mas nao acredito que a logica esteja certa, pois ao invés de apagar eu pinto com branco, o problema é que quando eu vou adicionar uma imagem, ela fica por baixo do branco, segue o codigo para adicionar uma imagem:

 tools.camera = function () {    var tool = this;    this.started = false;    this.mousedown = function (ev) {      tool.started = false;        img_update();      tool.x0 = ev._x;      tool.y0 = ev._y;	  context.clearRect(0, 0, canvas.width, canvas.height);	var img=document.getElementById("scream");	context.drawImage(img,ev._x,ev._y);	context.stroke();    };          };

O meu triangulo:

 tools.tri = function () {    var tool = this;    this.started = false;$('#area_criacao').css( 'cursor', 'crosshair' );    this.mousedown = function (ev) {      tool.started = true;      tool.x0 = ev._x;      tool.y0 = ev._y;    };    this.mousemove = function (ev) {      if (!tool.started) {        return;      }      var x = Math.min(ev._x,  tool.x0),          y = Math.min(ev._y,  tool.y0),		   w = Math.abs(ev._x - tool.x0),          h = Math.abs(ev._y - tool.y0);           if (!w || !h) {        return;      }context.clearRect(0, 0, canvas.width, canvas.height);      context.beginPath();     context.moveTo(x,y);	  context.lineTo(x+h, y+h);    context.lineTo(x-h,   y+h);	context.lineTo(x,   y);	context.lineWidth = 1;	context.strokeStyle = 'black';	context.stroke();		context.closePath();    };    this.mouseup = function (ev) {      if (tool.started) {        tool.mousemove(ev);        tool.started = false;        img_update();      }    };  };

Ele so desenha triangulo equilatero e numa posicao.

 

O circulo maldito:


 // The circle tool.  tools.cir = function () {    var tool = this;    this.started = false;$('#area_criacao').css( 'cursor', 'crosshair' );    this.mousedown = function (ev) {      tool.started = true;      tool.x0 = ev._x;      tool.y0 = ev._y;    };    this.mousemove = function (ev) {      if (!tool.started) {        return;      }      var x = Math.min(ev._x,  tool.x0),          y = Math.min(ev._y,  tool.y0),  w = Math.abs(ev._x - tool.x0),          h = Math.abs(ev._y - tool.y0);           if (!w || !h) {        return;      }context.clearRect(0, 0, canvas.width, canvas.height);           context.beginPath();context.arc(x,y,w,0,2*Math.PI);context.lineWidth = 1;context.strokeStyle = 'black';context.stroke();context.closePath();    };    this.mouseup = function (ev) {      if (tool.started) {        tool.mousemove(ev);        tool.started = false;        img_update();      }    };  };


Ele so desenha circulos, sem a possibilidade de forma elipses.

Como eu disse, só preciso de alguma ajuda pra saber por onde comecar a arrumar qualquer um desses problemas, estou praticamente trancado nisso ha dias, no desespero ja :(

Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...