1

我需要设计网页的一部分，如下图所示。在左侧，有颜色选项。如果用户从左侧选择任何颜色并单击图像部分，图像的部分应该被选择的颜色填充。我花了更多时间在谷歌搜索上。大多数网站只使用闪存。但是我对flash不太了解。是否可以使用 jquery 插件来实现？

在此处输入图像描述

4

5 回答 5

3

您可能想要查看该<canvas>元素。至于单击时填充图像的特定位，您可能需要Floodfill 算法。

于 2012-09-11T11:53:17.757 回答
2

您可以使用 Javascript 解决此问题，但因此您需要为每种颜色提供一个自己的图像。

<script language="JavaScript" type="text/javascript">


function changePic(picColor)
{
  if(picName == "btnRed")
  {
    document.getElementById(mainPic).src = "mainPicRed.jpg"
  } 
  else if(picName == "btnYellow")
  {
    document.getElementById(mainPic).src = "mainPicYellow.jpg"
  } 
}

</script>

每个颜色按钮的 HTML：

<img src="red.jpg" name="btnRed" id="btnRed" onClick="changePic(this.name)">
<img src="mainPic.jpg" name="mainPic" id="mainPic">
于 2012-09-11T11:59:06.807 回答
2

如果您对使用的 png 文件有严格的控制，这真的可以很简单地完成。

例如，您可以使 png 完全不透明，但要着色的区域除外。

然后您可以加载图像并在单击颜色时设置您正在使用的元素的背景颜色。

像这样的东西：

$(".ColorOption").click(function(e){
   e.preventDefault();
   var color = $(this).data("color");
   $("#MainImageBackground").css("background-color", color);
});

假设您使用 data 属性设置颜色选项，如下所示：

<a data-color="#F00"></a>

与您的图像类似：

<div id="MainImageBackground">
   <img src="whatever"/>
</div>
于 2012-09-11T11:55:40.147 回答
0

接受任何 png 并填充中间：

您可以在此处找到有关 javascript 中的 Floodfill 算法的信息：

http://jsfiddle.net/loktar/ZLw9m/

但是，您的实现必须更高级，因为您需要将图像转换为 javascript 可以理解的格式（例如 0 和 1），然后在其上运行算法

正如@musefan 指出的那样，如果您可以控制PNG，这会容易得多

于 2012-09-11T11:58:12.610 回答
0

想法1：使用canvas元素并查看填充方法，这可能会比flash更复杂。

想法2：

  1. 创建透明PNG，其中彩色区域是唯一透明的部分。

  2. 创建 2 个 DIVS，1 个在 z-index 10，其他在 20，大小相同，位置相同

  3. 将图像放在 z-index 20 的顶部 div 中。然后更改 z-index 10 处的 div 1 中的背景颜色。

于 2012-09-11T11:55:47.960 回答