0

Estou tentando usar um parâmetro callback (não sei se é o termo correto aqui) dentro do meu construtor, que chama uma função q eu defini, mas toda vez q eu tento executar o código ele me apresenta um erro no console.

Aqui esta o código do construtor do botão:

function Botao(x, y, w, h, canvas, callback,color) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.cb = callback;
this.color = color;   

//render do botão.
this.render = function () {
 canvas.context.fillStyle = color || '#000'; // cor
 canvas.rect(this.x,this.y,this.w,this.h); // cria o retangulo(botão)
}

// verifica se o click foi na área do botao.
this.ontarget = function (pos) {      
 if (pos.x > this.x && pos.x < (this.x + this.w) && pos.y > this.y && pos.y <   (this.y + this.h)){
  this.cb(); // <-- meu problema/duvida!
  };  
}

e aqui o codigo onde eu utilizo ele:

var teste = new Canvas(400,300,teste, 0); // cria o canvas


var bt1 = new Botao(100,100,100,100, teste, function()  {console.log("teste");}); //cria o botao



function run() {
teste.upC();//renderiza o botão

bt1.render();// renderiza o botao.
window.requestAnimationFrame(run);
}
run();


function click(evt) {
 var rectNav = teste.rectNav; ; //obtêm as coordenadas do mouse na janela do   cliente.
 var pos = {
  x: evt.clientX - rectNav.left,
  y: evt.clientY - rectNav.top
 }; 

 bt1.ontarget(pos); //detecta se o click foi no botão 
}  


cEvent('click', click);

como deu para ver, se trata de um botão, onde ao clicar nele ele deve retornar a função que atribui ao callback na hora em que o criei, mas não consigo fazê-lo funcionar, estou usando o parâmetro de forma incorreta? A função não vai funcionar neste caso do construtor?

1

2 Respostas 2

2

Vou juntar algumas correções. Podes ver o diff aqui.

No teu código no jsFiddle tens um erro de sintaxe, falta um }, depois usei

this.canvas.addEventListener('click', click.bind(this))

para procurar cliques. Usei .bid(this) para poderes usar o this dentro de function click(evt) {.

Passei uma string aqui var teste = new Canvas(400, 300, 'minhaID', 0); que no exemplo estava como variável não declarada.

E por fim comentei //cEvent('click', click); que no jsFiddle não estava defenido e estava a dar erro.

Espero ter ajudado!

1

Um botão é um componente UI de sua aplicação, seu estilo (Visual) no que se refere posição, dimensões, etc... Não deve estar na camada de comportamento, no caso Javascript.

Quer desenhar um botão use CSS, "quer poupar linha de código" use classe para componentizar e gerar quantas instâncias for preciso para gerar outros, se for o caso use o bootstrap. ("como você enfatizou poupar tempo!!").

Dica: use Canvas (HTML5) para desenhar elementos que sejam dinâmicos e não botões componentes fixo de sua interface!!

Qual seria sua dúvida:

Callback e funções?
Desenhar elementos usando canvas com o js?
Sobre eventos no javascript?

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .