0

Um cliente me perguntou se podia fazer um sistema do tipo. Alguém poderia me indicar uma ideia de como se faz isso sem Flash? Ele tem um copo com um detalhe e os dois objetos receberão cores diferentes selecionáveis numa paleta de cores.

Por onde começar num projeto do gênero?

2 Respostas 2

2

Depende principalmente da complexidade da imagem e da quantidade de cores na paleta.

Se são cores já pré-estabelecidas, e a imagem do produto tem muitos detalhes, acredito ser mais viável utilizar imagens diferentes do produto, uma p/ cada cor.

Mas existem diversas soluções para aplicar cor programaticamente.

Se a imagem for em vetor dá pra fazer facilmente com SVG e jQuery. Podes exportar, por exemplo, uma imagem do Illustrator em SVG e manipular os elementos com jQuery p/ mudar as cores.

Aqui tem um post explicando como fazer isso usando Canvas e JavaScript, com este exemplo relacionado.

Este plugin jQuery parece bem interessante.

Pra fazer a seleção da cor através de uma paleta, existem vários plugins jQuery.

1
1

Uma solução puramente em JavaScript seria o plugin jsColor (http://jscolor.com/).

Exemplo:

<script src="http://freecms.googlecode.com/svn/trunk/project/WebRoot/js/jscolor/jscolor.js"></script>

<input class="color">

3
  • Este sistema me permitiria aplicar qualquer cor a um objeto? Mas como esse objeto receberia esta cor? Em que formato de imagem ele deverá estar? 16/10/2014 às 13:52
  • 1
    @MarcosVinicius Esta interface permite a selecão do valor hexadecimal de uma cor, Marcos - a partir daí você pode aplicar o valor, por exemplo, à propriedade background-color do estilo de um elemento.
    – OnoSendai
    16/10/2014 às 13:55
  • 1
    Obrigado pelo Fiddle, @Cold !
    – OnoSendai
    16/10/2014 às 14:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .