Jquery/Java Script: настройка изображения / аватара с помощью параметров цепочки (например, Shape, Color)

Question

Многие веб-сайты позволяют настраивать изображение путем изменения параметров.

Например, этот сайт Барби позволяет вам создать свою собственную куклу Барби. Вы можете нажимать на различные прически и одежду, а также обновлять изображение, пока вы нажимаете.

Другие сайты по одежде делают подобные вещи.

Есть ли учебники, которые показывают, как это сделать с помощью Java Script или Jquery?

В идеале я ищу шаблоны, которые позволят вам повторно использовать код в различных ситуациях.

Я нашел пару учебных пособий, но все они используют PHP: Bokehman - на этом веб-сайте написано, что он использует Javascript, но на самом деле он использует PHP Code Canyon - этот скрипт предназначен для простой замены элементов, но снова использует PHP.

Я знаю, что Javascript действительно не поддерживает написание файлов, поэтому вам придется использовать решение PHP для сохранения изображения. Однако я просто ищу что-то для создания образа. На данном этапе я не беспокоюсь о сохранении.

Answer 1

Вот как я это сделал в конце.

1) Создайте отдельные классы CSS для каждого актива.

Объедините классы для активов, которые состоят из нескольких переменных. Создать .input родительский класс для отображения активов изображения для формы выбора. Создать .preview дочерний класс для отображения активов изображения на готовом аватаре

например

.skin-brown .preview .preview-body {
background-image(<<image-asset>>);
}

.input .input-skin-brown {
background-image(<<image-asset>>);
}

.input .input-hair-style-1 {
background-image(<<image-asset>>);
}


.hair-style-1.hair-colour-black .preview .preview-hair {
background-image(<<image-asset>>);
}

2) Создать HTML. Назначьте параметры ресурса по умолчанию для элемента оболочки.

например

<div id="wrapper" class="hair-style-1 hair-colour-black skin-brown">

<div class="inputs">
Put your input FORM here. Use a HTML form element.
</div>


<div class="preview">
The finished avatar goes here.
<div class="preview-hair"></div>
<div class="preview-eyes"></div>
<div class="preview-body"></div>
</div>

</div>

3) Используйте Jquery для манипулирования классами в оболочке, когда были выбраны параметры в форме ввода.

например, если пользователь нажимает на hair-style-2, класс hair-style-1 в оболочке изменится на hair-style-2

У меня есть отдельный вопрос по этому поводу: jQuery: поменять классы на основе позиции класса

Это, по сути, все, что нужно сделать. Когда у вас есть написанные классы css и код Jquery для переключения классов, это на самом деле очень просто. Поскольку вы сохраняете все входные данные в виде формы, вы можете отправлять значения другому процессу, когда пользователь нажимает кнопку Отправить.

Подсказки:

1) Используйте SASS/SCSS, чтобы написать CSS. Вы можете создать массив и перебрать его в sass, что упрощает поддержку CSS. У меня есть вопрос по этому поводу здесь: Sass: использование двух списков @each в SCSS CSS - SASS: использование микшинов на основе @each для создания нескольких фонов

2) Избегайте использования спрайта CSS. Хотя спрайты очень помогают со временем загрузки, я думаю, что вы сойдете с ума, пытаясь сохранить его (в зависимости от задействованных ресурсов). Есть инструменты, чтобы поддерживать это для вас, но, поскольку это крайний случай, я не думаю, что инструменты работают так хорошо.

3) Скорость загрузки является проблемой Когда пользователь нажимает на элемент аватара, происходит короткая задержка, пока загружается CSS. Это проблема, так как пользователь считает, что его клик не зарегистрирован. Чтобы обойти это, создайте скрытый div, который использует display:none, Затем используйте CSS3-свойство background background, чтобы присоединить каждый актив к этому DIV (в качестве фона). Таким образом, все ваши ресурсы будут загружаться с самого начала, поэтому пользователь не будет задерживаться при нажатии. Опять же, используйте для этого циклы и массивы SASS, так как массив автоматически добавит все ваши активы в скрытый DIV.

4) Тщательно продумайте имена классов и активов. Первоначально я выбрал дружественные имена (например, haircolourblack, hairstylebob), так как думал, что будет проще разобраться в коде. Однако, оглядываясь назад, мне бы хотелось, чтобы я использовал нумерованные имена (haircolour1, hairstyle1), так как все может стать сложнее, если ваши активы меняются (плюс использование чисел упрощает поддержку кода для нескольких аватаров). Снова, используйте массивы SASS, чтобы сократить обслуживание этого.

5) Используйте префиксы класса (например, .preview .preview-eye вместо .preview .eye или же .preview .preview-hair-style вместо .preview .hair). Причина этого заключается в том, что многие имена являются очень общими и, вероятно, будут использоваться в нескольких местах на странице (например, для разделов.preview и.input). Если вы используете префиксы, проще ориентироваться на определенные классы. Плюс вы можете использовать [class*="preview-"] или же [class*="input-"] нацеливаться на всех членов префикса, без необходимости засорять ваш код множеством общих классов (например, [class*="-hair-"] получит все элементы волос без необходимости применения отдельного класса волос для каждого элемента волос.

6) Рассмотрите SVG. Если вы используете SVG для своих графических ресурсов, вы можете оставить файлы небольшими, и они будут масштабироваться до любого размера. Обязательно обратите внимание на совместимость браузера SVG ( http://caniuse.com/svg)

7) Учитывайте размер фона CSS. Вы также можете использовать background-size: contain масштабировать ресурсы изображения, что может облегчить повторное использование одного и того же изображения для экземпляров.preview и.input. Тем не менее, он также имеет проблемы с совместимостью.

Это действительно грандиозный проект, в основном потому, что нет никаких ресурсов о том, как его построить. Но если вы сломаете это, на самом деле это довольно легко. В основном проблема заключается в обслуживании кода, поэтому обязательно планируйте!