Como construir um meme-maker com React: um guia para iniciantes

Avanthika Meenakshi Blocked Unblock Seguir Seguindo 23 de dezembro de 2018

Se você está no meio do aprendizado do React, provavelmente já passou por muitos tutoriais sobre como criar uma lista de tarefas. Em algum momento, você procurará idéias alternativas para tentar aprender, mas continuará batendo em diferentes versões do exemplo de lista de tarefas padrão.

Esta ideia alternativa neste artigo é para você, os curiosos. A base de código pode ser encontrada no meu GitHub e é bootstrapped from create-react-app . Eu colecionei memes-templates do google e de outras fontes. A fonte Impact pode tornar qualquer imagem um meme, então não temos escolha a não ser adicioná-la.

Este é um bom projeto de aprendizagem e aprendizado para começar. Nós estaremos lidando com muitos ouvintes de eventos / interações de usuários e mutações de estado.

Construindo a galeria

Inicialmente, estaremos construindo uma galeria de imagens para permitir que os usuários selecionem um modelo de meme. Eu armazenei as imagens que colecionei como uma matriz e estou criando uma galeria simples.

No código a seguir,

  1. Mapeamos através da matriz de fotos, mostramos cada modelo de meme em uma tag img e exibimos uma galeria.
  2. Determinamos a imagem atual selecionada por meio de um onClick na tag img.
  3. Temos um objeto initialState com configurações iniciais das legendas e seu posicionamento. A posição, o conteúdo e o status de arrastamento dos textos superior e inferior podem ser modificados posteriormente pelo acionamento de mutações de estado.

Construindo uma galeria a partir de modelos de memes coletados.

Como você pode decifrar, cada imagem na galeria tem seu próprio evento onClick. Ele localiza a imagem selecionada no momento, converte-a em URI de dados e abre um modal de reatividade . O modal será a estação de trabalho para criar o meme.

Galeria de modelos de meme e estação de trabalho modal.

A estação de trabalho do Criador de Memes

Usamos tags svg , image e text dentro do modal para armazenar a imagem e a legenda do meme. Nós preferimos o SVG porque você pode ampliar e reduzir o quanto quiser, e ele nunca perderá clareza. E converter SVG em PNG enquanto exporta o meme é uma tarefa relativamente simples.

Calcular largura, altura e ajusta a imagem no modal.

Cada imagem na coleção tem altura e largura diferentes. Para evitar esticar e compactar a imagem, estou fazendo uma pequena solução para corrigir a proporção. Estou fixando a largura para 600 e calculando a altura com base na proporção largura-altura. Estou fornecendo a altura e a largura calculadas para o SVG.

A estrutura geral dentro do SVG é bastante direta. Ela contém a imagem e as legendas.

 <svg width = {newWidth} height = {newHeight} ... outrosAtributos> 
<image xlinkHref = "caminho da imagem" />
<text x = "top-x-position" y = "top-y-position">
{this.state.toptext}
</ text>
<texto x = "posição x inferior" y = "posição inferior y">
{this.state.bottomtext}
</ text>
// E teremos ouvintes de eventos anexados às tags <text /> para movê-los. Vamos ver isso mais tarde no artigo. </ svg>

As coordenadas xey das tags <text /> superiores e inferiores são mantidas no estado (consulte o objeto initialState no componente MemeMaker). Conforme o usuário arrasta e posiciona as tags de texto, as coordenadas X e Y mudam.

Nota: O xlinkHref da tag de imagem será incorporado ao caminho (base64). URLs raw src não podem ser convertidas em PNGs durante o download.

Veja como o código inteiro se parece:

O código inteiro por trás do modal de criação de memes.

Além do SVG, temos dois <input /> Tag para permitir que o usuário insira suas legendas superior e inferior para o meme. O evento onChange captura a legenda e a legenda de fundo e as define no estado como e quando a alteramos.

Capturamos a legenda do meme do usuário aqui e alteramos o estado.? Temos a modificação do texto funcionando!

Arrastando o texto ao redor!

Vamos tentar reposicionar as legendas superior e inferior agora. As interações arrastar e soltar das tags de texto estão vinculadas aos ouvintes de eventos.

  1. Mouse press – onMouseDown – Localiza a tag de texto selecionada, determina as posições X e Y atuais e anexa o ouvinte de evento “mousemove” a ela.
  2. Mover o mouse – onMouseMove – Localiza a posição atual (xey) da marca de texto à medida que o mouse é mantido e movido.
  3. Liberação do mouse – onMouseUp – Localiza a posição de descida ou a posição de liberação. Determina o X e Y onde o texto é eliminado. Remove o ouvinte de evento "mousemove" do elemento e finaliza o arrastar e soltar.

Para rastrear o mouse, pressione e segure. Nós incluímos os seguintes ouvintes de eventos nas tags de texto.

 onMouseDown = {event => this.handleMouseDown (evento, 'top')} 
onMouseUp = {event => this.handleMouseUp (evento, 'top')}

Em seguida, anexamos o ouvinte de evento "mousemove" para acompanhar os movimentos do mouse em "mousedown". Quando a tag de texto é removida, removemos o ouvinte de evento de movimento do mouse anexado em "mouseup".

Veja como o código faz isso:

Arrastar e soltar dinâmica.

Agora que o arrastar e soltar está pronto, você pode mover seu texto e reposicioná-lo onde quiser.

Ouvintes de eventos para o resgate! ?

Baixando o meme

Quando um usuário clica no botão de download, estamos convertendo o SVG em uma sequência serializada de XML e desenhando-o em uma tela HTML5 . Usamos o método toDataUrl () do canvas html (gera um URI de imagem base64) para gerar uma imagem do tipo mime “image / png”!

O código para baixar o meme! Yaayyyy!

Como você aprende mais, há muito mais que você pode fazer para este pequeno projeto.

  1. Você pode tentar buscar imagens de APIs de código aberto e criar uma galeria.
  2. Você pode tentar adicionar disposições para compartilhá-los no facebook, whatsapp e twitter.
  3. Você pode tentar permitir que o usuário faça o upload de sua própria imagem, dimensione-a e crie um meme.
  4. Você pode tentar redimensionar a fonte.

Há muito mais que você pode fazer para melhorar o projeto que, no final das contas, melhorará suas habilidades de codificação. ? Feliz codificação! ?