
Personalize sua arte
42
#ffffff
0°
Você também pode arrastar o texto
diretamente sobre a imagem.
(function() {
/* * Espera o DOM estar pronto. */
function iniciar() {
const input = document.getElementById('mca-input');
const texto = document.getElementById('mca-texto');
const tamanho = document.getElementById('mca-tamanho');
const tamanhoValor = document.getElementById('mca-tamanho-valor');
const cor = document.getElementById('mca-cor');
const corValor = document.getElementById('mca-cor-valor');
const rotacao = document.getElementById('mca-rotacao');
const rotacaoValor = document.getElementById('mca-rotacao-valor');
const preview = document.querySelector('.mca-preview');
const imagem = document.getElementById('mca-imagem');
const download = document.getElementById('mca-download');
if (!input || !texto || !preview) { return; }
/* * Posição inicial. */
let x = 50; let y = 15;
/* * Arrastar. */
let arrastando = false;
let inicioMouseX = 0; let inicioMouseY = 0;
let inicioX = 0; let inicioY = 0;
/* * Atualiza posição. */
function atualizar() {
texto.style.left = x + '%';
texto.style.top = y + '%';
texto.style.transform = 'translate(-50%, -50%) rotate(' + rotacao.value + 'deg)';
}
/* * Texto. */
input.addEventListener( 'input', function() {
texto.textContent = input.value;
} );
/* * Tamanho. */
tamanho.addEventListener( 'input', function() {
texto.style.fontSize = tamanho.value + 'px';
tamanhoValor.textContent = tamanho.value;
} );
/* * Cor. */
cor.addEventListener( 'input', function() {
texto.style.color = cor.value;
corValor.textContent = cor.value;
} );
/* * Rotação. */
rotacao.addEventListener( 'input', function() {
rotacaoValor.textContent = rotacao.value + '°';
atualizar();
} );
/* * ========================== * MOUSE * ========================== */
texto.addEventListener( 'mousedown', function(e) {
e.preventDefault();
arrastando = true;
inicioMouseX = e.clientX;
inicioMouseY = e.clientY;
inicioX = x;
inicioY = y;
texto.classList.add( 'selecionado' );
} );
document.addEventListener( 'mousemove', function(e) {
if (!arrastando) { return; }
const rect = preview.getBoundingClientRect();
const dx = e.clientX - inicioMouseX;
const dy = e.clientY - inicioMouseY;
x = inicioX + (dx / rect.width) * 100;
y = inicioY + (dy / rect.height) * 100;
x = Math.max( 2, Math.min(98, x) );
y = Math.max( 2, Math.min(98, y) );
atualizar();
} );
document.addEventListener( 'mouseup', function() {
arrastando = false;
texto.classList.remove( 'selecionado' );
} );
/* * ========================== * TOUCH * ========================== */
texto.addEventListener( 'touchstart', function(e) {
e.preventDefault();
const toque = e.touches[0];
arrastando = true;
inicioMouseX = toque.clientX;
inicioMouseY = toque.clientY;
inicioX = x;
inicioY = y;
texto.classList.add( 'selecionado' );
}, { passive: false } );
document.addEventListener( 'touchmove', function(e) {
if (!arrastando) { return; }
e.preventDefault();
const toque = e.touches[0];
const rect = preview.getBoundingClientRect();
const dx = toque.clientX - inicioMouseX;
const dy = toque.clientY - inicioMouseY;
x = inicioX + (dx / rect.width) * 100;
y = inicioY + (dy / rect.height) * 100;
x = Math.max( 2, Math.min(98, x) );
y = Math.max( 2, Math.min(98, y) );
atualizar();
}, { passive: false } );
document.addEventListener( 'touchend', function() {
arrastando = false;
texto.classList.remove( 'selecionado' );
} );
/* * ========================== * DOWNLOAD * ========================== */
download.addEventListener( 'click', function() {
if (!imagem.complete) { alert( 'Aguarde a imagem carregar.' ); return; }
const canvas = document.createElement( 'canvas' );
const ctx = canvas.getContext( '2d' );
const largura = imagem.naturalWidth;
const altura = imagem.naturalHeight;
canvas.width = largura;
canvas.height = altura;
/* * Imagem. */
ctx.drawImage( imagem, 0, 0, largura, altura );
/* * Escala. */
const previewWidth = preview.getBoundingClientRect().width;
const escala = largura / previewWidth;
/* * Posição. */
const posX = largura * (x / 100);
const posY = altura * (y / 100);
/* * Tamanho. */
const tamanhoFinal = Number( tamanho.value ) * escala;
/* * Texto. */
ctx.save();
ctx.translate( posX, posY );
ctx.rotate( Number( rotacao.value ) * Math.PI / 180 );
ctx.font = 'bold ' + tamanhoFinal + 'px Arial';
ctx.fillStyle = cor.value;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
/* * Sombra. */
ctx.shadowColor = 'rgba(0,0,0,.6)';
ctx.shadowBlur = 4;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.fillText( input.value, 0, 0 );
ctx.restore();
/* * Baixar. */
const link = document.createElement( 'a' );
link.download = 'minha-arte.png';
link.href = canvas.toDataURL( 'image/png' );
link.click();
} );
/* * Estado inicial. */
atualizar();
}
/* * Se o DOM já estiver carregado. */
if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', iniciar );
} else {
iniciar();
}
})();
