289 lines
9.9 KiB
JavaScript
Executable File
289 lines
9.9 KiB
JavaScript
Executable File
//
|
||
// 1 - Crie um outro script js e coloque -> "var js_el_um = document.getElementById('el_um');" para selecionar um canvas com id igual a "el_um". Você pode configurar a tag canvas da maneira que quiser no html.
|
||
// 2 - Crie uma nova instância do objeto pintarTela, passando o elemento guardado na variável "js_el_um". Exemplo -> "var programa_um_criado = new pintarTela(js_el_um);"
|
||
//
|
||
// Opcionalmente, você pode colocar uma image a ser pintada dentro do programa. Para isso, você precisará da url da imagem e passar como segundo parâmetro do objeto pintarTela. Como exemplo, vamos criar uma segunda instância do programa:
|
||
//
|
||
// var js_el_dois = document.getElementById('el_dois');
|
||
// var img2_url ="img/img2.svg";
|
||
// var programa_dois_criado = new pintarTela(js_el_dois, img2_url);
|
||
//
|
||
// Se você quiser redimensionar uma imagem em um mesmo canvas, use a função retornada ao rodar o objeto canvas (programa). Exemplo:
|
||
//
|
||
// Vamos supor que o tamanho do canvas em programa_dois_criado foi alterado. Como pintarTela() retorna a função desenharImagem, com o primeiro parâmetro a ser passado é a nova largura e o segundo, a nova altura, podemos colocar programa_dois_criado(NovaLargura, NovaAltura)
|
||
|
||
|
||
function pintarTela(el, img_url){
|
||
|
||
var canvas, ctx, flag = false,
|
||
prevX = 0,
|
||
currX = 0,
|
||
prevY = 0,
|
||
currY = 0,
|
||
dot_flag = false;
|
||
|
||
var cor = "rgba(0,0,0,0.3)";
|
||
var espessura = 2;
|
||
|
||
|
||
canvas = el;
|
||
ctx = canvas.getContext("2d");
|
||
w = canvas.width;
|
||
h = canvas.height;
|
||
|
||
//movimento do mouse
|
||
canvas.addEventListener("mousemove", function (e) {
|
||
findxy('move', e)
|
||
}, false);
|
||
canvas.addEventListener("mousedown", function (e) {
|
||
findxy('down', e)
|
||
}, false);
|
||
canvas.addEventListener("mouseup", function (e) {
|
||
findxy('up', e)
|
||
}, false);
|
||
canvas.addEventListener("mouseout", function (e) {
|
||
findxy('out', e)
|
||
}, false);
|
||
|
||
|
||
|
||
|
||
//movimento do dedo em dispositivos touchscreen
|
||
canvas.addEventListener("touchmove", function (e) {
|
||
findFingerXY('arrastando', e)
|
||
}, false);
|
||
canvas.addEventListener("touchstart", function (e) {
|
||
findFingerXY('inicio', e)
|
||
}, false);
|
||
canvas.addEventListener("touchend", function (e) {
|
||
findFingerXY('fim', e)
|
||
}, false);
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
function desenharImagem(ImgL, ImgA){
|
||
|
||
|
||
|
||
var base_image = new Image();
|
||
base_image.src = img_url
|
||
|
||
base_image.onload = function(){
|
||
|
||
if(ImgL && ImgA){
|
||
|
||
ctx.clearRect(0, 0, w, h); //apaga o canvas anterior
|
||
ctx.drawImage(base_image, 0, 0, ImgL, ImgA);
|
||
|
||
} else {
|
||
|
||
ctx.drawImage(base_image, 0, 0);
|
||
}
|
||
|
||
}//fechar base_image.onload
|
||
|
||
} //Fecha desenharImagem
|
||
|
||
|
||
|
||
if(img_url){ desenharImagem();}
|
||
|
||
|
||
|
||
|
||
//criar os controladores
|
||
var controles = document.createElement("div");
|
||
var seletor_de_cor = document.createElement("input");
|
||
var seletor_de_espessura = document.createElement("input");
|
||
|
||
|
||
|
||
seletor_de_cor.type = "color";
|
||
seletor_de_cor.value = "#000";
|
||
seletor_de_espessura.type = "range";
|
||
seletor_de_espessura.value = "2";
|
||
seletor_de_espessura.min = "1";
|
||
seletor_de_espessura.max = "20";
|
||
|
||
controles.appendChild(seletor_de_cor);
|
||
controles.appendChild(seletor_de_espessura);
|
||
|
||
//aparência do programa Pintar Tela
|
||
el.style = "border: solid 1px; cursor: url('scripts/pincelCursor.svg'), auto; display: block; margin: auto;";//Imagem do usuário OpenClipart-Vectors do Pixabay
|
||
var posXel = el.offsetLeft;
|
||
|
||
var controlesESTILO = "margin: 5px auto 30px auto; padding: 10px; box-sizing: border-box; background-color: #dbdbdb; border-radius: 3px; display: flex; flex-direction: row; align-items: center; justify-content: center; width: "+w+"px; text-align: center;";
|
||
|
||
|
||
controles.style = controlesESTILO;
|
||
seletor_de_cor.style = "width: 40px; height: 40px; margin-left: 10px; cursor: pointer;";
|
||
seletor_de_espessura.style = "width: 100px; height: 40px; margin-left: 10px; cursor: pointer;";
|
||
|
||
//adicionando os controles no documento após o canvas
|
||
el.parentNode.insertBefore(controles, el.nextSibling);
|
||
|
||
|
||
|
||
function hexToRgbA(hex){
|
||
var c;
|
||
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
|
||
c= hex.substring(1).split('');
|
||
if(c.length== 3){
|
||
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||
}
|
||
c= '0x'+c.join('');
|
||
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',0.4)';
|
||
}
|
||
throw new Error('Bad Hex');
|
||
}
|
||
|
||
|
||
|
||
|
||
function mudarCor() {
|
||
|
||
var nova_cor = hexToRgbA(seletor_de_cor.value);
|
||
|
||
cor = nova_cor;
|
||
|
||
}
|
||
|
||
function mudarEspessura() {
|
||
|
||
espessura = seletor_de_espessura.value;
|
||
|
||
}
|
||
|
||
|
||
//Escutar quando a cor muda
|
||
seletor_de_cor.addEventListener('change', function(){
|
||
|
||
mudarCor(seletor_de_cor);
|
||
|
||
});
|
||
|
||
//Escutar quando a espessura muda
|
||
seletor_de_espessura.addEventListener('input', function(){
|
||
|
||
mudarEspessura();
|
||
|
||
});
|
||
|
||
function draw() {
|
||
ctx.beginPath();
|
||
ctx.moveTo(prevX, prevY);
|
||
ctx.lineTo(currX, currY);
|
||
ctx.strokeStyle = cor;
|
||
ctx.lineWidth = espessura;
|
||
ctx.stroke();
|
||
ctx.closePath();
|
||
}
|
||
|
||
|
||
//Função para pegar posição do mouse
|
||
function findxy(estado, e) {
|
||
if (estado == 'down') {
|
||
prevX = currX;
|
||
prevY = currY;
|
||
currX = e.clientX - canvas.getBoundingClientRect().left;
|
||
currY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
||
flag = true;
|
||
dot_flag = true;
|
||
if (dot_flag) {
|
||
ctx.beginPath();
|
||
ctx.fillStyle = cor;
|
||
ctx.fillRect(currX, currY, 2, 2);
|
||
ctx.closePath();
|
||
dot_flag = false;
|
||
}
|
||
}//fecha if estado == down
|
||
if (estado == 'up' || estado == "out") {
|
||
flag = false;
|
||
}
|
||
if(estado == 'move') {
|
||
if (flag) {
|
||
prevX = currX;
|
||
prevY = currY;
|
||
currX = e.clientX - canvas.getBoundingClientRect().left;
|
||
currY = e.clientY - canvas.getBoundingClientRect().top;
|
||
draw();
|
||
}
|
||
|
||
}//if estado == move
|
||
|
||
}//fecha função findxy
|
||
|
||
|
||
//função para pegar a posição do dedo em tela touchscreen
|
||
|
||
var X_ant = 0, Y_ant = 0, X_atual = 0, Y_atual = 0, estaDesenhando = false;
|
||
|
||
function drawDedo() {
|
||
ctx.beginPath();
|
||
ctx.moveTo(X_ant, Y_ant);
|
||
ctx.lineTo(X_atual, Y_atual);
|
||
ctx.strokeStyle = cor;
|
||
ctx.lineWidth = espessura;
|
||
ctx.stroke();
|
||
ctx.closePath();
|
||
}
|
||
|
||
function findFingerXY(estado, e){
|
||
|
||
if(estado == 'inicio') {console.log("INICIO");
|
||
|
||
X_ant = X_atual;
|
||
Y_ant = Y_atual;
|
||
|
||
X_atual = e.touches[0].clientX - canvas.getBoundingClientRect().left;
|
||
Y_atual = e.touches[0].clientY - canvas.getBoundingClientRect().top;
|
||
|
||
ctx.beginPath();
|
||
ctx.fillStyle = cor;
|
||
ctx.fillRect(X_atual, Y_atual, 2, 2);
|
||
ctx.closePath();
|
||
|
||
estaDesenhando = true;
|
||
|
||
}
|
||
|
||
if(estado == 'fim'){
|
||
|
||
console.log('PAROU');
|
||
estaDesenhando = false;
|
||
|
||
}
|
||
|
||
if (estado == 'arrastando'){console.log("ARRASTANDO");
|
||
|
||
e.preventDefault();
|
||
|
||
if(estaDesenhando){
|
||
|
||
X_ant = X_atual;
|
||
Y_ant = Y_atual;
|
||
|
||
X_atual = e.touches[0].clientX - canvas.getBoundingClientRect().left;
|
||
Y_atual = e.touches[0].clientY - canvas.getBoundingClientRect().top;
|
||
|
||
drawDedo();
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
}//fecha a função dindFingerXY
|
||
|
||
|
||
return desenharImagem;
|
||
|
||
}//Fecha a função pintarTela
|