Ответ 1

Я создал приложение Angular, которое делает это более гибким способом.

FIDDLE: http://jsfiddle.net/Pha4V/3/

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

Пример:

var tops =
[
    new Shape("Triangle", "http://i.stack.imgur.com/wkRaA.png", "Blue"),
    new Shape("Triangle", "http://i.stack.imgur.com/lHk5X.png", "Green"),
    new Shape("Triangle", "http://i.stack.imgur.com/LT6Nn.png", "Red"),
    new Shape("Octagonal", "http://i.stack.imgur.com/FjF7S.png", "Red"),
    new Shape("Octagonal", "http://i.stack.imgur.com/0FWGv.png", "Blue"),
    new Shape("Octagonal", "http://i.stack.imgur.com/92kyY.png", "Green")
];

В будущем шрифты можно добавить, добавив четвертый параметр, и новые цвета можно добавить, просто добавив элемент с этим цветом.

Новый пример цвета:

...
    new Shape("Octagonal", "http://...", "Cyan")
...

Новый пример типа формы:

...
    new Shape("Square", "http://...", "Blue")
...

Текущая форма "дома":

Его можно было бы легко сохранить, поскольку существуют переменные, которые определяют все варианты:

$scope.topColor, $scope.topType
$scope.bottomColor, $scope.bottomType
...

Различные методы ввода:

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

Будущие шрифты:

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

var fontBottom =
[
    new Shape("Font", "http://...", "Arial"),
    new Shape("Font", "http://...", "Arial Black")
];

//Then add the methods and the input.

Ответ 2

Только потому, что можно - чистое решение CSS3

Хорошо, для ваших целей, чистое решение css, вероятно, не будет идеальным (и даже ваше название вопроса указано javascript). Однако просто для того, чтобы показать, что это можно сделать исключительно с CSS в браузерах, распознающих CSS3, вот доказательство. Большое внимание следует уделить, поскольку скрипт, html и css все имеют некоторые исходные источники из демонстрационной скрипты Stefan Moraru, в которой использовался код для работы. Протестировано в Firefox 25, Chrome 31, IE10.

Скриншот

HTML

<form>
    <h4>Choose the top type:</h4>

    <input type="radio" id="TopTriangle" name="TopShape" value="Triangle" checked/>Triangle 
    <input type="radio" id="TopOctogon" name="TopShape" value="Octogon"/>Octogon

    <h4>Choose the top color:</h4>

    <input type="radio" id="TopBlue" name="TopColor" value="Blue" checked/>Blue
    <input type="radio" id="TopGreen" name="TopColor" value="Green"/>Green
    <input type="radio" id="TopRed" name="TopColor" value="Red"/>Red

    <h4>Choose the bottom type:</h4>

    <input type="radio" id="BotRect" name="BotShape" value="Rectangle" checked />Rectangle

    <h4>Choose the bottom color:</h4>

    <input type="radio" id="BotBlue" name="BotColor" value="Blue"/>Blue
    <input type="radio" id="BotGreen" name="BotColor" value="Green" checked/>Green
    <input type="radio" id="BotRed" name="BotColor" value="Red"/>Red

    <h4>Choose the entrance color:</h4>

    <input type="radio" id="EntBlue" name="EntColor" value="Blue"/>Blue
    <input type="radio" id="EntGreen" name="EntColor" value="Green"/>Green
    <input type="radio" id="EntRed" name="EntColor" value="Red" checked/>Red

    <div class="house">
        <div class="top">
            <img class="blue triangle" src="http://i.stack.imgur.com/wkRaA.png" />
            <img class="green triangle" src="http://i.stack.imgur.com/lHk5X.png" />
            <img class="red triangle" src="http://i.stack.imgur.com/LT6Nn.png" />
            <img class="blue octogon" src="http://i.stack.imgur.com/0FWGv.png" />
            <img class="green octogon" src="http://i.stack.imgur.com/92kyY.png" />
            <img class="red octogon" src="http://i.stack.imgur.com/FjF7S.png" />
        </div>

        <div class="entrance">
            <img class="blue" src="http://i.stack.imgur.com/jehkB.png" />
            <img class="green" src="http://i.stack.imgur.com/CgYnh.png" />
            <img class="red" src="http://i.stack.imgur.com/lHbKP.png" />
        </div>

        <div class="bottom">
            <img class="blue rect" src="http://i.stack.imgur.com/7P8Ua.png" />
            <img class="green rect" src="http://i.stack.imgur.com/h2Bpc.png" />
            <img class="red rect" src="http://i.stack.imgur.com/jAX1y.png" />
        </div>
    </div>
</form>

CSS

.house {
    width: 100px;
    height: 80px;    
    position: relative;
}

.house .top {
    position: absolute;
    top: 0px;    
    z-index: 2;
}

.house .entrance {
    position: absolute;
    bottom: 0px;        
    z-index: 3;
}

.house .bottom {
    position: absolute;
    bottom: 0px;   
    z-index: 1;
}

img {
    width: 80px;
    height: 80px;
}

.house img {
    display: none; /* default hide all */
}

#TopTriangle:checked ~ #TopBlue:checked ~ .house > .top > .blue.triangle { display: block;}
#TopTriangle:checked ~ #TopGreen:checked ~ .house > .top > .green.triangle { display: block;}
#TopTriangle:checked ~ #TopRed:checked ~ .house > .top > .red.triangle { display: block;}
#TopOctogon:checked ~ #TopBlue:checked ~ .house > .top > .blue.octogon { display: block;}
#TopOctogon:checked ~ #TopGreen:checked ~ .house > .top > .green.octogon { display: block;}
#TopOctogon:checked ~ #TopRed:checked ~ .house > .top > .red.octogon { display: block;}

#BotRect:checked ~ #BotBlue:checked ~ .house > .bottom > .blue.rect { display: block;}
#BotRect:checked ~ #BotGreen:checked ~ .house > .bottom > .green.rect { display: block;}
#BotRect:checked ~ #BotRed:checked ~ .house > .bottom > .red.rect { display: block;}

#EntBlue:checked ~ .house > .entrance > .blue { display: block;}
#EntGreen:checked ~ .house > .entrance > .green { display: block;}
#EntRed:checked ~ .house > .entrance > .red { display: block;}

Ответ 3

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

С помощью этого метода вам не нужно создавать новое изображение для каждого цвета и каждой настраиваемой части.

Пример: 20 элементов с четырьмя настраиваемыми разделами и 20 цветами:

Работа с изображениями требует: 20 x 4 x 20 = 1600 изображений

Работа с масками из этого решения: 20 x 4 = 80 изображений

Мы собираемся создать маску для каждого раздела. Откройте изображение в Photoshop и вырежьте каждый настраиваемый раздел изображения. Поэтому каждая часть, которую вы хотите настроить в другом цвете. Сделайте эту часть черной и все вокруг прозрачной. В принципе, если вы складываете все эти "слои", у вас есть обувь с сплошным черным на каждой части, которую вы хотите настроить.

Сохраните эти слои в отдельных изображениях. Теперь вы можете загружать каждый слой на холст и заменять черный цвет цветом или рисунком по вашему выбору. Используйте эти слои для создания обуви.

Наконец, добавьте слой тени, который придает обуви эффект 3d.

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

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

Ответ 4

Я не могу вложить много времени в это прямо сейчас, но у меня есть ответ, который может оказаться полезным для вас...

Это можно сделать исключительно в jQuery. Если вы укладываете прозрачные png-изображения, вы можете обернуть каждое изображение в свой собственный div и поместить каждый div в абсолютную позицию 0 и 0 внутри родительского контейнера-обертки.

Динамический динамический индекс z можно присвоить каждому контейнеру.. и используйте этот z-index для управления тем, какой div находится перед или перед предыдущим div. каждый раз, когда вы выбираете элемент на панели выбора, вы должны установить соответствующий z-индекс соответствующего элемента на наибольшее число и уменьшить индекс z предыдущего верхнего позиционного элемента на 1.

Это будет довольно функционально функционировать как "довести до" функциональность.

Вы можете попробовать создать динамическую версию этого с 3 или 4 изображениями.

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

В вашей логике есть что-то вроде этого...

Предварительная загрузка изображений. Оберните их в динамически расположенных divs.. Создайте динамически именованные классы в элементах div, чтобы иметь возможность обобщать ваш код Динамически присваивать значения z-index div. При щелчке соответствующего элемента панели приведите соответствующий div с изображением вперед и нажмите предыдущий верхний элемент на один z-индекс вниз.

Надеюсь, что это поможет с логикой, если ваш путь jQuery

Ответ 5

Мне кажется, что обувь любого цвета - это просто объект, который имеет форму и текстуру с некоторым цветом на нем.

• Форма предоставляется холстами.
• Текстура обеспечивается прозрачностью градиента, которую может дать png. Вы можете создать один из изображения оттенков серого в вашей обуви.
• а цвет - значениями rgb и альфа-кодами.

Вы "вырезаете" (создаете и загружаете) фигуры и текстуры, чтобы они соответствовали вашему изображению обуви. Это одно изображение для каждого раздела. У вас есть X (4) раздела
Вы определяете, какие цвета может сделать factory. Это Y (500?) Цветов.

Это 2 * X * Y... может быть, 4000 комбинаций? И здесь мы загрузили всего 4 изображения.

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

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

Очень простая скрипка

var alpha = 0.4

    function createCanvas(id, color, alpha) {
        var canvas = document.getElementById(id);
        var context;
        context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height); // clear canvas first
        context.globalAlpha = alpha || 0.4; // transparency could be dynamic
        context.beginPath();

        switch (id) { // add a case for each piece
            case 'left':
                context.moveTo(0, 0);
                context.lineTo(0, 200);
                context.lineTo(400, 200);
                context.arc(200, 100, 75, 50, 50);
                break;
            case 'right':
                context.moveTo(0, 0);
                context.lineTo(200, 200);
                context.arc(200, 100, 75, 50, 50);
                break;
        }
        context.closePath();
        context.lineWidth = 0;
        context.fillStyle = color || '#8ED6FF'; // dynamic color from provided list
        context.fill();

    };

createCanvas('left', alpha);
createCanvas('right', alpha);
// add a couple more peices here


var counter = 0;

// have some kind of color selector
$('body').on('click', 'canvas', function () {
    console.log(this, counter);
    var newShapeColor = $('div.colors:eq(' + counter + ')').css('background-color');
    createCanvas($(this).attr('id'), newShapeColor, alpha);
    counter = (counter < 3) ? counter + 1 : 0;
});

Ответ 6

Учитывая, что ваш план заключается в создании генератора знаков, вам могут понадобиться только формы и простой цвет, поэтому изображения SVG будут идеально подходят для вас. Это уже хорошо поддерживается.

Даже если когда-нибудь вам захочется использовать некоторые градиенты до тех пор, пока вы не сможете достичь с помощью svg. Действительно, вы можете рисовать довольно сложные вещи в SVG (см. http://raphaeljs.com/tiger.html).

Вы можете сгенерировать тему с помощью онлайн-генератора, например svg-edit или просто Adobe Illustrator и даже по коду, я рекомендую вам raphael.js.

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

http://codepen.io/svassr/pen/myepF

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

Чтобы нарисовать SVG на холсте, а затем сохранить в качестве изображения с помощью canvas.toDataURL("image/png"), вам нужно будет использовать canvg.

canvg(document.getElementById('canvas'), svg);

Если бы ваш проект был бы похож на пользовательский генератор обуви Vans, я бы порекомендовал вам решение @gillyspy, которое мне кажется лучшим, но, возможно, используя CSS маскировки.