1

我是网页设计和开发的新手。我坚持设计 UI 来定制鞋,就像 Reebok 在它的网站链接上所做的那样......

我尝试在网上搜索,但我不知道要搜索什么。仍然我得到了一些东西(参考上面的链接)

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

我要实现的功能包括:

  • 项目(图像)颜色应该是可定制的。
  • 项目(图像)应参考光标移动旋转。
  • 项目(图像)映射颜色应该坚持它的区域。

任何帮助将不胜感激..在此先感谢。

4

1 回答 1

2

看起来它是基于图像地图的,似乎正在使用来自这里的名为“Fluid Retail”的公司的产品:

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

更新

如果我是从头开始写这篇文章,我可能会暂时忽略旋转方面,并首先专注于让颜色自定义位正确。

如果您有产品的 SVG 版本,那将是一个很好的起点。

然后,您可以将SVG 转换为图像映射,或者使用Raphel JS做一些等效的事情。您可以在周围找到许多 JavaScript 颜色选择器,并且可以将其中之一与您的产品图像定制工具集成。

一旦您实现了读取和记住颜色选择的代码,就应该可以过渡到产品图像的不同显示。

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

于 2013-05-29T10:12:22.497 回答