Быстрый/легкий субботний дневной проект
Первоначальная идея:
Некоторое время назад я прочитал эту статью от Aral Tasher, в которой был представлен очень простой способ создания великолепных пиксельных изображений с помощью чистого CSS.
Чистый CSS — это здорово, и я определенно вижу в нем привлекательность; это довольно простой способ сделать это, и то, как объясняет Эйрал, в основном означает, что вам просто нужно знать, какие цвета вы собираетесь использовать.
Однако я немного знаю код, и у меня возникла идея создать генератор.
Преимущество, которое я вижу, заключается в том, что вы можете получить набор (массив) цветов из другого источника (например, из базы данных) и передать их в этот генератор — а об остальном позаботятся вы.
Чтобы проникнуть в некоторые легкие концептуальные вопросы, в любом языке разработки программного обеспечения и объектно-ориентированном языке вы можете разбить вещи на общие и специфические. .
В этом случае общее:
- каждая «художественная доска» состоит из единиц («пикселей»)
- артборд имеет родительский элемент HTML
- каждый пиксель окрашен.
Все они являются общими для каждого экземпляра.
Тогда специфический будет спецификацией этих элементов:
- размер устройства
- родительский элемент
- и цвета.
Давайте посмотрим на код:
Код:
Чтобы просмотреть весь исходный код, посетите эту страницу на моем Github.
Эта часть является объектом pixelArt.
Функция «chunk» (строка 9) — это функция, которая в основном берет массив и разбивает его на массив или более мелкие массивы (более подробное объяснение позже).
Затем мне нужно было создать функцию generate, которая использует каждое из свойств и выдает пиксельную графику:
Я добавил некоторую начальную проверку, чтобы убедиться, что передано правильное количество цветов. Например, если вы укажете 4 столбца и 4 строки, код будет ожидать 16 цветов.
Я постарался сделать генерацию максимально простой.
Строка 2–3: во-первых, мне нужно было добавить несколько полей к элементу «pixelWrapper», чтобы убедиться, что каждый пиксель будет содержаться. Без этого весь элемент может перетекать на другие элементы, и для исправления потребуется дополнительный CSS (не идеальный вариант).
Строка 6–15: пиксели генерируются с помощью CSS-атрибутов box-shadow, исходящих из одного элемента rootPixel. Я указал размер rootPixel из размера юнитов — тени также будут иметь этот размер.
Строки 17–27. Здесь я перебираю каждую строку в наборе цветов, а затем просматриваю каждый столбец. Таким образом, я мог указать положение каждого и правильно расположить каждую тень.
Нравится:
array = ['red', 'yellow', 'green', 'blue'] chunked_array = [ ['red', 'yellow'], ['green', 'blue'] ] output: red: row 1, column 1 yellow: row 1, column 2 green: row 2, column 1 blue: row 2, column 2
(на самом деле индексация массива начинается с 0 — так что на самом деле это будет (0, 0) (0, 1) — и т. д. Но неважно, давайте продолжим.)
Строки 29–34. Затем я устанавливаю «rootPixelStyle» в качестве стиля для элемента «rootPixel». «rootPixel» устанавливается в качестве дочернего элемента «pixelWrapper», а «pixelWrapper» устанавливается в качестве дочернего элемента для указанного элемента.
Вывод:
Так что теперь все, что мне нужно сделать, это указать несколько вещей, а скрипт сделает все остальное за меня.
И -
Оно работает. Величественный.
Я понимаю, что определенно может быть лучший способ закодировать все это, особенно некоторые особенности функции «генерировать». Это ни в коем случае не идеальное решение, и я предполагаю, что пользователь будет правильно использовать скрипт, что никогда не является хорошей идеей (т.е. я был слишком ленив, чтобы добавить дополнительную проверку).
Однако это было написано всего за пару часов в субботу, так что — да.
Я надеюсь, что эта статья была интересной для чтения, и я надеюсь, что вы возьмете те концепции, которые я здесь использовал, и реализуете еще что-нибудь интересное.
Пожалуйста, свяжитесь, если вы видите что-то, что можно улучшить, или если у вас есть какие-либо отзывы или предложения.
Чтобы просмотреть исходный код, ознакомьтесь с репозиторием здесь. Я также включил HTML-страницу, показанную на снимке экрана, в качестве примера того, как ее использовать. Скачивайте, редактируйте, ломайте, улучшайте, используйте.
Также ознакомьтесь со статьей Арала Ташера, чтобы узнать обо всем, что связано с CSS.
(Он также сделал часть 2, в которой используется Sass — хороший материал)
Спасибо за чтение.
Джо Бойлсон | https://joeboylson.herokuapp.com