javascript - 如何通过使用 JavaScript 基于表单选择堆叠透明图像来构建预览图像？

Question

我需要使用 HTML、CSS 和 JavaScript 构建一个带有选择输入字段和单选选择字段的表单。选择这些字段中的每一个时，我需要根据他们所做的选择构建预览图像。

每个字段都会有一个与之关联的图像，然后它还会为每种颜色复制相同的图像。

因此，如果用户可以选择 20 个表单字段，它将有 20 个图像 x 10 个不同的颜色选项，并且将导致有 200 个可能的图像来构建那里的预览图像!

这是一张图片，显示了我正在尝试完成的示例...Vans 网站将此技术用于带有预览的定制鞋生成器...

当您选择一个部分然后选择该部分的颜色时，它会加载一个透明图像并将它们堆叠在一起。

为了测试，我为演示表单制作了一组透明图像，只有 4 个字段和 3 个颜色选择，因此总共有 12 个图像。 (全部如下图)

当所有字段都被选中后，它应该为用户构建一个与此类似的图像预览...

或者备选方案的顶部/屋顶更像八 Angular 形

---

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

---

这是一个可以使用图像的基本形式...

http://jsfiddle.net/Pha4V/

<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 库来动态生成图像，因此必须构建每个图像并更改每个图层。除了 build 简单的房屋结构，我还有其他选择，例如...

• 标志类型，这将根据所选标志的类型确定在其后显示或隐藏的许多设置。
• 字体 基本图像中的每种字体都有一个，每种字体也有每种颜色。所以 10 种字体 x 15 种颜色 = 可以很容易地超过 150 种可能的图像来显示，就像 BASE 图像一样
• 颜色 将有 2-4 种不同的颜色选项，它们会改变标牌不同部分的颜色。所以上面列出的所有图像组合 x 不同的颜色区域 = 许多图像

所以你可以看到，当它全部完成时，这将是一个相当大的野兽，我可以使用任何帮助来获得一个良好的开端。我不认为一个巨大的 if/else 或 switch 语句是处理像这样可以有数百种图像组合的东西的最佳方式，但我可能是错的？

Answer 1

我创建了一个 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")
];

future ，可以通过添加第四个参数来添加字体，并且只需添加具有该颜色的元素即可添加新颜色。

新颜色示例:

...
    new Shape("Octagonal", "http://...", "Cyan")
...

新形状类型示例:

...
    new Shape("Square", "http://...", "Blue")
...

“房子”的当前形式:

它可以很容易地保存，因为有定义所有选择的变量:

$scope.topColor, $scope.topType
$scope.bottomColor, $scope.bottomType
...

不同的输入方式:

选择方法可以很容易地改变，因为代码不依赖于它的类型。

future 的字体:

您可以轻松地将新形状添加为字体，并从“tops”复制逻辑，而不必生成那么多图像。您只需生成具有不同字体的图像:

var fontBottom =
[
    new Shape("Font", "http://...", "Arial"),
    new Shape("Font", "http://...", "Arial Black")
];

//Then add the methods and the input.