JavaScript canvas builder

Navigation
4

I'm having 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 constructor, to streamline my process content, but I have no idea how to do it.

Here is 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 of this "click" detection code inside my button designer, 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 a eventListener to do so.

Thank you!

    
asked by anonymous 04.12.2015 / 18:45

1 answer

3

I do not see how you can create an event handler with button creation because the canvas has no elements like SVG. What you have to do is calculate where it was clicked and have an array of buttons that you can check for a click.

Something like this: 

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: link

Edit:

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

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

jsFiddle link

    
04.12.2015 / 19:43
Data Truncation with Hibernate Best practices when filtering a query with EntityFramework