如何通过使用JavaScript基于表单选择堆叠透明图像来构建预览图像？
Jas*_*vis 23 html javascript css jquery html5
使用HTML,CSS和JavaScript我需要构建一个带有选择输入字段和无线电选择字段的表单.当选择这些字段中的每一个时,我需要根据它们所做的选择构建预览图像.
每个字段都有一个与之关联的图像,然后它也会为每种颜色复制相同的图像.
因此,如果有20个表单字段,用户可以选择它将有20个图像x 10个不同的颜色选项,并将导致有200个可能的图像来构建预览图像!
这是一个图片,显示了我想要完成的一个例子...... Vans网站将这种技术用于自定义鞋子生成器,预览...
当您选择一个部分然后选择该部分的颜色时,它会加载一个透明图像并将它们堆叠在一起.
为了测试,我为一个演示表格制作了一组透明图像,只有4个字段和3种颜色选择,总共有12个图像.(全部如下所示)
当选择了所有字段后,它应该为用户构建一个与此类似的图像预览...
或替代品的顶部/屋顶更像八角形的形状
bottom_blue
bottom_green
bottom_red
entrance_blue
entrance_green
entrance_red
top_blue
top_green
top_red
top_red_octo
top_blue_octo
top_green_octo
这是一个可以使用图像的基本表单......
<form id="form-ChannelType">
<p>
Select a bottom (just 1 in the demo)<br>
<select name="bottom" class="form-control" id="bottom" size="1">
<option value="bottom1">Bottom 1</option>
</select>
</p>
<p>
Select a Front (just 1 in the demo)<br>
<select name="front" class="form-control" id="front-1" size="1">
<option value="front1">Front 1</option>
</select>
</p>
<p>
Select a Top<br>
<select name="bottom" class="form-control" id="bottom" size="2">
<option value="bottom_triangle">Triangle Shaped Top</option>
<option value="bottom_octo">Octo. Shaped Top</option>
</select>
</p>
<p>
Select a Color<br>
<select name="color" class="form-control" id="color" size="3">
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="red">Red</option>
</select>
</p>
</form>
任何人都可以帮我解释如何制作这样的表格吗？我需要让它以一种可以轻松扩展到数百种选项和图像的方式工作.
使用上面的基本形式,需要通过基于表单选择堆叠适当的图像来构建预览图像.我不希望任何人为此做所有的工作,除非他们只是为了挑战,但我会感谢任何帮助或想法如何最好地使这项工作？
注意: 我将基于此的最终项目将有很大不同.它将用于自定义标志生成器.我不能使用ImageMagick或GD库来处理飞行图像,因此必须构建每个图像并更改每个图层.我没有选择简单的房屋结构,而是选择......
- 符号类型,它将根据所选符号的类型确定显示或隐藏的大量设置.
- 字体基础图像将具有一个为每个字体和在每个字体将在每个颜色为好.所以10种字体x 15种颜色=很容易超过150种可能的图像,就像BASE图像一样
- 颜色将有2-4种不同的颜色选项可以改变标志不同部分的颜色.因此,上面列出的所有图像组合x不同的颜色区域=大量图像
所以你可以看到这将是一个非常大的野兽,当它完成后我可以使用任何帮助来获得一个良好的开端.我不认为一个巨大的if/else或switch语句是最好的方式,这样的东西可以有数百个图像组合,但我可能是错的？
小智 27
我创建了一个Angular应用程序,以更灵活的方式执行此操作.
FIDDLE:http://jsfiddle.net/Pha4V/3/
只需在数组中创建新元素,即可轻松添加形状,类型和颜色.此外,通过以这种方式定义结构,代码可以很容易地与数据库集成.
例:
var tops =
[
new Shape("Triangle", "http://i.stack.imgur.com/wkRaA.png", "Blue"),
new Shape("Triangle", "http://i.stack.imgur.com/lHk5X.png", "Green"),
new Shape("Triangle", "http://i.stack.imgur.com/LT6Nn.png", "Red"),
new Shape("Octagonal", "http://i.stack.imgur.com/FjF7S.png", "Red"),
new Shape("Octagonal", "http://i.stack.imgur.com/0FWGv.png", "Blue"),
new Shape("Octagonal", "http://i.stack.imgur.com/92kyY.png", "Green")
];
将来,可以通过添加第四个参数来添加字体,只需添加具有该颜色的元素即可添加新颜色.
新颜色示例:
...
new Shape("Octagonal", "http://...", "Cyan")
...
新形状类型示例:
...
new Shape("Square", "http://...", "Blue")
...
目前形式的'房子':
它可以很容易地保存,因为有变量定义所有选择:
$scope.topColor, $scope.topType
$scope.bottomColor, $scope.bottomType
...
不同的输入方法:
select方法可以轻松更改,因为代码不依赖于它的类型.
未来的字体:
您可以轻松地将新形状添加为字体,并从"顶部"复制逻辑,您不必生成那么多图像.您只需要使用不同的字体生成图像:
var fontBottom =
[
new Shape("Font", "http://...", "Arial"),
new Shape("Font", "http://...", "Arial Black")
];
//Then add the methods and the input.
Sco*_*ttS 12
只因为一个人 - 一个纯粹的CSS3解决方案
好的,就你的目的而言,一个纯粹的CSS解决方案可能不太理想(甚至你的问题标题都是javascript).但是,为了证明它可以在识别CSS3的浏览器中纯粹用CSS完成,这就是证据.应该给予很多信任,因为小提琴,html和css都有一些来自Stefan Moraru的演示小提琴的初始采购, 它确实使用了代码.在Firefox 25,Chrome 31,IE10中测试过.
HTML
<form>
<h4>Choose the top type:</h4>
<input type="radio" id="TopTriangle" name="TopShape" value="Triangle" checked/>Triangle
<input type="radio" id="TopOctogon" name="TopShape" value="Octogon"/>Octogon
<h4>Choose the top color:</h4>
<input type="radio" id="TopBlue" name="TopColor" value="Blue" checked/>Blue
<input type="radio" id="TopGreen" name="TopColor" value="Green"/>Green
<input type="radio" id="TopRed" name="TopColor" value="Red"/>Red
<h4>Choose the bottom type:</h4>
<input type="radio" id="BotRect" name="BotShape" value="Rectangle" checked />Rectangle
<h4>Choose the bottom color:</h4>
<input type="radio" id="BotBlue" name="BotColor" value="Blue"/>Blue
<input type="radio" id="BotGreen" name="BotColor" value="Green" checked/>Green
<input type="radio" id="BotRed" name="BotColor" value="Red"/>Red
<h4>Choose the entrance color:</h4>
<input type="radio" id="EntBlue" name="EntColor" value="Blue"/>Blue
<input type="radio" id="EntGreen" name="EntColor" value="Green"/>Green
<input type="radio" id="EntRed" name="EntColor" value="Red" checked/>Red
<div class="house">
<div class="top">
<img class="blue triangle" src="http://i.stack.imgur.com/wkRaA.png" />
<img class="green triangle" src="http://i.stack.imgur.com/lHk5X.png" />
<img class="red triangle" src="http://i.stack.imgur.com/LT6Nn.png" />
<img class="blue octogon" src="http://i.stack.imgur.com/0FWGv.png" />
<img class="green octogon" src="http://i.stack.imgur.com/92kyY.png" />
<img class="red octogon" src="http://i.stack.imgur.com/FjF7S.png" />
</div>
<div class="entrance">
<img class="blue" src="http://i.stack.imgur.com/jehkB.png" />
<img class="green" src="http://i.stack.imgur.com/CgYnh.png" />
<img class="red" src="http://i.stack.imgur.com/lHbKP.png" />
</div>
<div class="bottom">
<img class="blue rect" src="http://i.stack.imgur.com/7P8Ua.png" />
<img class="green rect" src="http://i.stack.imgur.com/h2Bpc.png" />
<img class="red rect" src="http://i.stack.imgur.com/jAX1y.png" />
</div>
</div>
</form>
CSS
.house {
width: 100px;
height: 80px;
position: relative;
}
.house .top {
position: absolute;
top: 0px;
z-index: 2;
}
.house .entrance {
position: absolute;
bottom: 0px;
z-index: 3;
}
.house .bottom {
position: absolute;
bottom: 0px;
z-index: 1;
}
img {
width: 80px;
height: 80px;
}
.house img {
display: none; /* default hide all */
}
#TopTriangle:checked ~ #TopBlue:checked ~ .house > .top > .blue.triangle { display: block;}
#TopTriangle:checked ~ #TopGreen:checked ~ .house > .top > .green.triangle { display: block;}
#TopTriangle:checked ~ #TopRed:checked ~ .house > .top > .red.triangle { display: block;}
#TopOctogon:checked ~ #TopBlue:checked ~ .house > .top > .blue.octogon { display: block;}
#TopOctogon:checked ~ #TopGreen:checked ~ .house > .top > .green.octogon { display: block;}
#TopOctogon:checked ~ #TopRed:checked ~ .house > .top > .red.octogon { display: block;}
#BotRect:checked ~ #BotBlue:checked ~ .house > .bottom > .blue.rect { display: block;}
#BotRect:checked ~ #BotGreen:checked ~ .house > .bottom > .green.rect { display: block;}
#BotRect:checked ~ #BotRed:checked ~ .house > .bottom > .red.rect { display: block;}
#EntBlue:checked ~ .house > .entrance > .blue { display: block;}
#EntGreen:checked ~ .house > .entrance > .green { display: block;}
#EntRed:checked ~ .house > .entrance > .red { display: block;}
我想到了另一种需要更多编程的方法,但是当需要以这种方式维护很多项目时节省了时间.
使用这种方法,你就没有需要为每个颜色和每一个定制的部分创建一个新的形象.
示例:20个项目,每个4个可自定义的部分和20种颜色:
处理图像需要:20 x 4 x 20 = 1600张图像
使用此解决方案中的蒙版:20 x 4 = 80张图像
我们将为每个部分创建一个掩码.在Photoshop中打开图像并剪切图像的每个可自定义部分.因此,您希望每个部件都能够以另一种颜色进行自定义.使这部分变黑,一切都透明.基本上,如果你堆叠所有这些"层",你在每个要自定义的部分都有一个带有纯黑色的鞋.
将这些图层保存在单独的图像中 您现在可以在画布上加载每个图层,并将黑色替换为您选择的颜色或图案.使用这些层来组成鞋子.
最后放一个遮光层,给鞋子带来三维效果.
示意图它看起来像下面的图像.经处理的掩模成为彩色层.结合基本图像,它成为一个彩色项目.您的设计师只需要剪掉补丁即可.
到目前为止,这并不是最简单的编码,但在使用大量颜色和图案时不需要数十个预先切割的图像.
我现在无法投入太多时间，但我确实有一个可能对您有用的答案......
这可以纯粹在 jQuery 中完成。如果您要堆叠透明 png 图像，那么您可以将每个图像包装在它自己的 div 中，并将每个 div 定位到包装父容器内的 0 和 0 的绝对位置。
您可以为每个容器动态分配一个 z 索引。并使用此 z 索引来操作哪个 div 位于前一个 div 的前面或后面。每次在选择器面板上选择一个元素时，您都会将相应元素的相应 z 索引设置为最高数字，并将前一个顶部定位元素的 z 索引减少 1。
这将非常起到“带到前面”的功能。
您可以尝试首先使用 3 或 4 个图像构建此动态版本。
如果你走这条路，你还必须研究预加载图像......
你的逻辑是这样的吗...
预加载图像.. 将它们包装在动态定位的 div 中。. 在 div 元素上创建动态命名的类，以便能够概括您的代码。动态为 div 分配 z 索引值.. 单击相关面板元素时，会带来相关的 div 和图像到前面并将前一个顶部元素向下推一个 z 索引。
如果您的路径是 jQuery，希望这对逻辑有所帮助
| 归档时间： |
|
| 查看次数： |
1820 次 |
| 最近记录： |