Reeboks定制鞋设计功能。这个怎么运作？

Question

我是网页设计和新手;发展。我坚持使用设计用户界面来定制像Reebok这样的网站link is here...上的鞋子。

我尝试在网上搜索，但我不知道该搜索什么。  我还有一些东西，（参见上面的链接）

• 实际旋转有20个不同角度的图像，随着（鼠标）光标移动而变化。
• 通过图像映射到Item的不同部分并将颜色应用于该映射来实现颜色定制。

我想实现的功能包括：

• 项目（图像）颜色应该是可自定义的。
• 项目（图像）应参考光标移动进行旋转。
• 项目（图像）映射颜色应该贴在它的区域。

任何帮助将不胜感激..提前感谢。

Answer 1

看起来它是基于图像地图的，似乎是从这里使用名为“Fluid Retail”的公司的产品：

http://www.fluidretail.com/solutions-overview/product-configurators/

<强>更新

如果我从头开始写这篇文章，我现在可能会忽略旋转方面，并专注于首先获得颜色自定义位。

如果你的产品的SVG版本是一个很好的起点。

然后，您可以转换SVG to image maps或者使用Raphel JS执行相同的操作。您可以找到许多JavaScript颜色选择器，并可以将其中一个与您的产品图像自定义工具集成。

一旦您实现了代码来阅读和记住颜色选择，就应该可以实现转换到产品图像的不同显示。

像ImageMapster这样的图像地图JavaScript库也可能对您有用。