JavaScript Canvas Button Builder

Question:

I have a question when creating a button builder for Canvas in JS, I can already detect the click in the button area, but I would like to simplify the code with a builder, to speed up my content creation process, but I have no idea How to do it.

Here an example of my code:

var bt = new Botao(0,0, 100, 50); // cria o botao

//construtor de botoes simples.
// eu utilizo um construtor de canvas por isso o parâmetro "canvas".
function Botao(x,y,w,h, canvas){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.render = function(){
   canvas.context.fillRect(this.x,this.y,this.w,this.h);    
 }  
}

// aqui eu detecto o click do usuário.
function click (evt) {

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

    if(pos.x>bt.x && pos.x<(bt.x+bt.w) && pos.y>bt.y && pos.y<(bt.y+bt.h)) {
    alert("click")};    // verifica se o click foi na area do botao "bt".

};

My question is: how do I put all this "click" detection code inside my button creator, where I can just call the function, for example, bt.click(codigo para ser executado) inside a function that I constantly update without having to create this additional code, and without having to create an eventListener to do so.

Grateful!

Answer:

I don't see how you can create an event handler with the button creation as the canvas doesn't have elements like SVG. What you have to do is calculate where it was clicked and have an array of buttons that you can check when there is a click.

Something like:

 var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); //construtor de botoes simples. // eu utilizo um construtor de canvas por isso o parâmetro "canvas". var botoes = []; function Botao(x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; this.render = function (color) { ctx.fillStyle = this.color = color || '#000'; ctx.fillRect(this.x, this.y, this.w, this.h); } botoes.push(this); // <------------------------ inserir o botão } function onTarget(pos, bt) { return pos.x > bt.x && pos.x < (bt.x + bt.w) && pos.y > bt.y && pos.y < (bt.y + bt.h); } // aqui eu detecto o click do usuário. function click(evt) { var rectNav = canvas.getBoundingClientRect(); //obtêm as coordenadas do mouse na janela do cliente. var pos = { x: evt.clientX - rectNav.left, y: evt.clientY - rectNav.top }; botoes.forEach(function (btn) { // <---------- verificar os botões var clicado = onTarget(pos, btn); if (clicado) btn.render(btn.color == '#000' ? '#ccf' : '#000'); }) }; canvas.addEventListener('click', click); var bt = new Botao(0, 0, 100, 50).render(); // cria o botao var bt = new Botao(30, 30, 100, 50).render(); // cria o botao
 <div>Clica-me!</div> <canvas></canvas>

jsFiddle: http://jsfiddle.net/hd8ermpf/

Edit:

To use different functions in each button you can use callback logic like this:

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

jsFiddle http://jsfiddle.net/hd8ermpf/2/

Post Views: 2
Scroll to Top