Untitled diff
75 Zeilen
// construtor de canvas
// construtor de canvas
function Canvas(cWidth, cHeigth, canvasID, M) {
function Canvas(cWidth, cHeigth, canvasID, M) {
this.canvas = document.createElement('canvas');
this.canvas = document.createElement('canvas');
document.body.appendChild(this.canvas);
// Se uma altura/largura nao forem setados, o tamanho da tela é usado com base para o canvas.
// Se uma altura/largura nao forem setados, o tamanho da tela é usado com base para o canvas.
this.canvas.width = cWidth || window.innerWidth - M;
this.canvas.width = cWidth || window.innerWidth - M;
this.canvas.height = cHeigth || window.innerHeight - M;
this.canvas.height = cHeigth || window.innerHeight - M;
this.context = this.canvas.getContext('2d');
this.context = this.canvas.getContext('2d');
this.canvas.style.border = "1px solid";
this.canvas.style.border = "1px solid";
this.canvas.id = canvasID; // or use name
this.canvas.id = canvasID; // or use name
this.canvas.addEventListener('click', click.bind(this))
document.body.appendChild(this.canvas);
//Limpa o canvas a cada frame.
//Limpa o canvas a cada frame.
this.upC = function() {
this.upC = function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
//cria um retangulo (preguiça de escrever).
//cria um retangulo (preguiça de escrever).
this.rect = function(x, y, w, h) {
this.rect = function(x, y, w, h) {
this.context.fillRect(x, y, w, h);
this.context.fillRect(x, y, w, h);
}
}
this.rectNav = this.canvas.getBoundingClientRect()
this.rectNav = this.canvas.getBoundingClientRect()
}
}
// construtor de botoes
// construtor de botoes
function Botao(x, y, w, h, canvas, callback, color) {
function Botao(x, y, w, h, canvas, callback, color) {
this.x = x;
this.x = x;
this.y = y;
this.y = y;
this.w = w;
this.w = w;
this.h = h;
this.h = h;
this.cb = callback;
this.cb = callback;
this.color = color;
this.color = color;
this.render = function() {
this.render = function() {
canvas.context.fillStyle = color || '#000';
canvas.context.fillStyle = color || '#000';
canvas.rect(this.x, this.y, this.w, this.h);
canvas.rect(this.x, this.y, this.w, this.h);
}
}
this.ontarget = function(pos) {
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)) {
if (pos.x > this.x && pos.x < (this.x + this.w) && pos.y > this.y && pos.y < (this.y + this.h)) {
this.cb();
this.cb();
};
};
}
}
}
var teste = new Canvas(400, 300, teste, 0);
var teste = new Canvas(400, 300, 'minhaID', 0);
var bt1 = new Botao(100, 100, 100, 100, teste, function() {
var bt1 = new Botao(100, 100, 100, 100, teste, function() {
console.log("teste");
console.log("teste");
});
});
function run() {
function run() {
teste.upC();
teste.upC();
bt1.render(); // renderiza o botao.
bt1.render(); // renderiza o botao.
window.requestAnimationFrame(run);
window.requestAnimationFrame(run);
}
}
run();
run();
function click(evt) {
function click(evt) {
var rectNav = teste.rectNav;; //obtêm as coordenadas do mouse na janela do cliente.
var rectNav = this.rectNav;; //obtêm as coordenadas do mouse na janela do cliente.
var pos = {
var pos = {
x: evt.clientX - rectNav.left,
x: evt.clientX - rectNav.left,
y: evt.clientY - rectNav.top
y: evt.clientY - rectNav.top
};
};
bt1.ontarget(pos); //detecta se o click foi no botão
bt1.ontarget(pos); //detecta se o click foi no botão
}
}
cEvent('click', click);
//cEvent('click', click);