javascript - 布料设计师。层的着色

Question

我尝试在基于图层的结构中制作一个布料设计师应用程序，就像在 Photoshop 应用程序中一样。我正在使用带有 alpha channel 的图像，在它下面我放置了具有不同背景颜色的 div。结果，我希望改变图像的颜色。但是我不知道如何使用相同的颜色在该图像上放置另一层。当我尝试重复相同的技巧时，它会填充我想要透明的额外空间。换句话说，我只需要画一部分图像，留下另一部分透明。

我尝试使用 Canvas 填充图像的 rgb(255,0,255) 部分，但 Canvas 太慢了。

<div class="preview_under">
  <div style="background: transparent url(images/main_template.png);" class="preview_middle">
    <div class="preview_over">
      <!-- override layers -->
      <div class="layer" style="background: url(images/blue.jpg);" data-name="modern" data-section="pocket">
        <img src="images/pocket_modern.jpg">
      </div>
      <!-- /override layers -->
    </div>
  </div>
  <!-- color of the template -->
  <div class="fill" style="background: url(images/blue.jpg);"></div>
</div>

问题的图形表示:

更新:谢谢大家!我使用 Canvas 解决了我的问题。
我试过 globalCompositeOperation属性(property)，它工作得很好。演示是 here .

Answer 1

canvas 应该很快，也许慢与使用的算法有关。

但是，如果您尝试使用 Canvas ，则意味着您的目标是现代浏览器。所以 SVG 可能会起作用 :)

使用 SVG 更改颜色非常容易(请参阅 http://jsfiddle.net/diegof79/kkxP3/):

<svg width="100" height="100">
  <circle id="pocket" cx="50" cy="50" r="40" 
          stroke="black" stroke-width="4" fill="yellow" />
</svg>

在 JavaScript 中:

document.getElementById('pocket').style.fill = 'red';

您可以将布料部分叠加在一层中，并使用类似 Inkscape 的工具绘制它们(另外，您可以使用可视化编辑器在 SVG 上设置背景图像，因此您无需手动进行叠加:))

其他可能的解决方案是:

• 有一组预定义的颜色，每个变体都有一个带有“ Sprite 图”的 PNG，因此您只需在每次颜色变化时更改背景偏移。 (好的:不需要任何特殊的东西，并且适用于所有浏览器；坏的:颜色变化是固定的，创建这些 Sprite 很耗时)。

• 使用 Canvas 更改图片(寻找慢速算法中的问题)。然后您可以使用 toDataURL 来缓存 Canvas 生成的图像。这样，当用户更改颜色时，您将使用缓存的图像(如果它已经存在)。 (好:你不需要手动编辑图片；坏:代码更复杂)