Рубрики
Без рубрики

Как построить Meme-Maker с React: руководство для начинающих

Avanthika Meenakshi Как построить Meme-Maker с React: путеводитель для начинающих вы находитесь в середине учебного реагирования, вы, вероятно, уже проходили много учебных пособий о том, как построить список дел. В какой-то момент вы посмотрите на альтернативные идеи, чтобы попробовать

Автор оригинала: FreeCodeCamp Community Member.

Avanthika Meenakshi

Если вы находитесь в середине учебного реагирования, вы, вероятно, уже проходили много учебных пособий о том, как построить список дел. В какой-то момент вы будете искать альтернативные идеи, чтобы попробовать и учиться, но вы будете следить за разными версиями приведенного вами списка дефолта.

Эта альтернативная идея в этой статье для вас, интересные. Кодовая база можно найти в моем github, и он загружается с Create-React-App Отказ Я собрал шаблоны Meme-шаблонов из Google и других источников. Влияние Шрифт может сделать любое изображение мем, поэтому у нас нет выбора, кроме как добавить его.

Это хороший проект Do-and-Project для начала. Мы будем иметь дело со многими слушателями/пользовательскими взаимодействиями и государственными мутациями.

Создание галереи

Первоначально мы будем создавать галерею изображений, чтобы пользователи выбрали мем-шаблон. Я сохранил изображения, которые я собрал как массив, и я создающую из нее простую галерею.

В следующем коде

  1. Мы рассмотрим через массив фотографий, показать каждый шаблон MEME-шаблон в теге IMG и отобразить галерею.
  2. Мы определяем текущее выбранное изображение через OnClick на теге IMG.
  3. У нас есть инициальный объект с первоначальными настройками подписи и их позиционирование. Положение, содержание и сопротивление верхних и нижних текстов могут быть позже модифицированы путем запуска мутаций состояния.

Как вы можете расшифровать, каждое изображение в галерее получило собственное событие OnClick. Он находит отобранное изображение, преобразует его на Данные URI и открывает Реагнийный модал Отказ Модаль будет рабочей станцией для создания мема.

Рабочая станция Meme-Maker

Мы используем SVG , изображение и текст Теги внутри модала для удержания изображения и мем-заголовок. Мы предпочитаем SVG, потому что вы можете увеличить масштабирование, сколько вам нравится, и он никогда не потеряет ясности. И преобразование SVG в PNG при экспорте мема относительно простая задача.

Каждое изображение в коллекции имеет разную высоту и ширину. Чтобы избежать растяжения и сжимания изображения, я делаю небольшой обходной путь, чтобы исправить соотношение сторон. Я устанавливаю ширину до 600 и вычисляю высоту на основе соотношения высоты ширины. Я снабжу расчетную высоту и ширину в SVG.

Общая структура внутри SVG довольно проста. Он держит изображение и подписи.

        {this.state.toptext}        {this.state.bottomtext}    // And we will have event listeners attached to the  tags to move them around. We'll see it in later part of the article.

Координаты X и Y верхней и снизу <Текст /> Теги поддерживаются в состоянии (см. Инициальный объект в компоненте Memememaker). Как пользователь перетаскивает и позиционирует текстовые теги, изменять координаты X и Y координат.

Примечание: XLinkHref Image Tag будет встроен (Base64) путь. Сырые URL-адреса SRC не могут быть преобразованы в PNG при загрузке.

Вот как выглядит весь код:

Кроме SVG, у нас есть два <ввода /> ; Теги, чтобы позволить пользователю вводить свои верхние и нижние подписи для мем Отказ На Изменение события захватывает верхнюю заголовок и нижнюю заголовок и устанавливает их в состояние, как и когда мы его меняем.

Перетаскивая текст вокруг!

Давайте попробуем повторно расположение верхних и нижних подписи сейчас. Перетаскивание взаимодействия текстовых тегов привязаны к слушателям событий.

  1. Нажмите на мышь – OnMousedown – Находит выбранный текстовый тег, определяет текущие позиции X и Y, и прикрепляет прослушиватель событий «MouseMove».
  2. Mouse Move – OnMouseMove – Находит текущую позицию (X и Y) текстового тега, так как мышь удерживается и перемещается.
  3. Выпуск мыши – onmouseup – Находит положение падения или позицию выпуска. Определяет X и Y, где текст упал. Удаляет слушатель события «MouseMove» из элемента и завершает перетаскивание.

Отслеживать мыши, удерживайте и перетащите. Мы включаем следующие слушатели событий в текстовые теги.

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

Затем мы прикрепляем слушатель события «MouseMove», чтобы отследить движения мыши на «Mousedown». После того, как текстовый тег отброшен, мы удаляем прикрепленную прослушиватель событий Mews Move в «мышев».

Вот как код делает это:

Теперь, когда перетаскивание сделано, вы можете переместить текст и пересмотреть его, где вы хотите.

Загрузка мема

Когда пользователь нажимает кнопку «Загрузить», мы преобразуем SVG на сериализованную строку XML и рисуя его в HTML5 Canvas Отказ Мы используем метод ToDataurl () HTML Canvas (генерирует URI image Base64) для генерации изображения MIME MIME MIME) «Изображение/PNG»!

Как вы узнаете больше, есть гораздо больше, вы можете сделать с этим маленьким проектом.

  1. Вы можете попытаться извлечь изображения из API с открытым исходным кодом и построить галерею.
  2. Вы можете попытаться добавить положения, чтобы поделиться с ними в Facebook, WhatsApp и Twitter.
  3. Вы можете попробовать позволить пользователю загружать свое собственное изображение, масштабировать его и создать мем.
  4. Вы можете попробовать размер шрифта.

Вы можете сделать гораздо больше, чтобы улучшить проект, который в конечном итоге улучшит ваши навыки кодирования. ? Счастливое кодирование! ?

Читайте ещё по теме: