javascript - 设计颜色定制器

标签 javascript html css web jscolor

我找到了很多关于我的问题的资源,但我只是希望获得基于对我正在尝试做的事情的高度概述的意见。

基本上,我结合使用 Javascript 和 HTML 为 friend 的网站构建定制程序。我应该首先说我有一些 HTML 经验,但这是我第一次使用 Javascript(我有 Java 经验)。最终目标将类似于定制器,允许用户选择自行车的部件并更改它们的颜色以下定制订单。

我有自行车的各个部分作为图像文件,我正在使用这个 jscolor 颜色选择器,可以在以下位置找到:http://jscolor.com/examples/#example-showing-hiding允许用户从颜色图中选择一种颜色。我的计划是将给定的部分(照片)叠加在同一张照片的副本之上,并只填充其中一个,就像在 Photoshop 中分层一样。这样,零件就会填充正确的形状,而不是填充为图像文件的整个正方形。随着光标移动,颜色应实时变化。完成后,他们可以保存零件,颜色记录将保存在后端。

由于我是 Javascript 的新手并且没有 HTML 经验,所以我发现要让它走上正轨有点挑战。所以我希望从一些有 HTML/Javascript/CSS 经验的人那里得到一些建议,为我指明正确的方向,使它比目前更好地发展。我不确定如何“表述”我想做的事情。

我要解决的三个主要部分:

  1. 使用 HTML 按钮加载不同的自行车部件(本质上是加载单独的图像文件)。

  2. 将 jscolor picker 中的颜色添加到所选部分的图像。

  3. 在用户单击“保存”按钮时保存部件的状态。

我会继续搜索论坛,因为我已经看到了一些与我想做的类似的线索,但我主要想知道我的方法对我尝试做的事情是否可行。

提前致谢!

最佳答案

使用普通的 HTML 按钮会使事情变得复杂。 我认为利用 HTML5 Canvas API 是解决此问题的更好方法。 Canvas 是 HTML5 元素,可帮助您使用 JavaScript 进行图形操作。了解有关 Canvas 的更多信息 here . 您可以使用诸如 Fabric.js 之类的库让事情变得更容易。

关于javascript - 设计颜色定制器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36466919/

相关文章:

javascript - 覆盖 jQuery 插件中的默认属性

html - 增加 Foundation CSS 中包含的选项卡的高度

javascript - 调用 JavaScript 函数 onClick 时,ASP 单选按钮不会被选择

javascript - 更改另一个 DIV 之前的 DIV 宽度

html - Bootstrap 2 错误? [class* ="span"] 奇怪的问题

javascript - 多边形选择 OpenLayers 3

javascript - 在 d3 force layout 中自动生成链接

javascript - 如何从html中的url获取json数据

javascript - 如何处理从 "chrome.tabCapture"获得的媒体流?

html - css div 自动填充文档内的所有可用空间