Comparing sensitive data, confidential files or internal emails?

Most legal and privacy policies prohibit uploading sensitive data online. Diffchecker Desktop ensures your confidential information never leaves your computer. Work offline and compare documents securely.

Untitled diff

Created Diff never expires
27 removals
75 lines
11 additions
72 lines
// 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);