Создаете собственную палитру цветов для веб-сайта?

Я пытаюсь создать собственный набор цветов на основе изображения из брошюры ниже:

База-брошюра

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

Это было бы намного проще с серверной частью базы данных, но существуют ограничения, не позволяющие мне использовать базу данных. Таким образом, я считаю, что застрял, используя HTML/CSS/JavaScript для достижения этой цели.

Это оставляет мне только возможность вручную создавать КАЖДУЮ возможную комбинацию цветовых комбинаций, а затем выполнять некоторую if...then...elseлогику для отображения соответствующей комбинации на основе кликов по горячей ссылке... очень утомительное и далеко не благоприятное решение.

Есть ли у кого-нибудь с большим опытом работы в такого рода проектах лучшее предложение о том, как это сделать?

Спасибо!

В чем ты это делаешь? HTML, CSS и JavaScript?
Это первоначальный план, если нет лучшего предложения? Без серверной части базы данных я не вижу другого пути, основанного на моем собственном опыте.
Вам разрешено писать в файловой системе? Вместо базы данных можно использовать структурированный файл.
С такими сложными формами я бы порекомендовал также SVG.
@PaoloGibellini, я могу сам создавать любые файлы, но у меня нет доступа к веб-хосту для тестирования/обновления напрямую.
@ZachSaucier, можешь уточнить? Я слышал о SVG, но никогда с ним не работал.
Например, вы можете использовать простой парсер xml и протестировать его через интерфейс http. Но решение SVG, вероятно, быстрее разрабатывается.
@PaoloGibellini, спасибо за вклад. Я посмотрю на это, но думаю, что я, вероятно, попробую SVG-решение Зака ​​для этой конкретной проблемы.

Ответы (1)

Поскольку плитки имеют неправильную форму, вы можете создать каждую из них с помощью SVG в Inkscape или Adobe Illustrator и прикрепить событие щелчка для изменения выбранного цвета. Как только вы экспортируете его из Illustrator или Inkscape, он превращается в XML, основанный на модели DOM, поэтому вы можете выбрать каждую часть с помощью CSS и JavaScript.

Затем вы можете сделать то же самое для лодки (и всего остального, что нужно создать, например, сиденья — не уверен, что это ваше намерение) и прикрепить события щелчка к каждой части, чтобы позволить применить текущий выбранный цвет.

Другим вариантом может быть <canvas>, который, возможно, потребует гораздо больше вычислений на стороне JavaScript и, вероятно, будет сложнее сделать его чувствительным к различным размерам экрана. Я предполагаю, что время загрузки версии Canvas будет меньше.

Что касается необходимости в базе данных, единственное, для чего она вам понадобится, — это сохранить ввод пользователя или заказать его после их завершения (и, возможно, разрешить пользователям извлекать ранее сделанные?). Плитки, лодка и все, что есть на странице, может отображаться при начальной загрузке. Убедитесь, что вы оптимизировали все, потому что существует огромный потенциал для длительного времени загрузки.

Спасибо за разработку Зака. В настоящее время основное внимание уделяется различным полосам/корпусу/и т. д., но сиденья могут быть опцией. Прямо сейчас идея состоит в том, чтобы предоставить пользователю достаточное количество конструктора, чтобы дать ему представление о том, как может выглядеть его собственная лодка. Я хотел бы включить способ сохранения/распечатки созданного изображения, если это возможно. Знаете ли вы какие-либо подобные (если базовые) примеры или учебные пособия для этого, которые могли бы помочь мне в этом процессе? Как вы думаете, сколько времени это займет в Adobe Illustrator?
@AnalyticLunatic Вот учебник для чего-то подобного (в нем используется библиотека Raphael, вы можете поискать тот, который не использует библиотеку - для этого это не требуется ), я не знаю чего-то, что поможет вам пройти именно то, что вы делаешь. Что касается времени разработки, то оно полностью зависит от того, насколько хорошо вы разбираетесь в программе. Я предполагаю, что большая часть сценариев для взаимодействия будет выполняться вне Illustrator, а не в том, что вы сейчас делаете в веб-разработке.
Спасибо, Зак. Я возьму Illustrator и попробую несколько примеров, чтобы посмотреть, будет ли он работать. Благодарю вас за подробный вклад, и я сообщу вам, если у меня есть еще вопросы!
Создаете собственную палитру цветов для веб-сайта?
СпросиСетьПолитика конфиденциальности1y, 0v