染色

上篇 介绍了 HT for Web 采用HTML5 Canvas的getImageData和setImageData函数，通过颜色乘积实现的染色效果，本文将再次介绍另一种更为高效的实现方式，当然要实现的功能效果是完全一样的。这次我们依然基于HTML5技术，但采用Canvas的globalCompositeOperation属性进行各种blending效果： 各种globalCompositeOperation效果可参考 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing 的说明，我们采用“multiply”和“destination-atop”这两种blending效果，通过以下三个步骤实现: 1、先以染色颜色填充图片大小的矩形区域 2、采用“multiply”进行drawImage的绘制，达到以下效果 3、最后一步采用“destination-atop”的globalCompositeOperation方式，再次drawImage，这次绘制效果将会抠出图片像素区域，剔除非图片部分，最终达到我们所要的染色效果图片： 所有代码如下 function createColorImage2(image, color) { var width = image.width; var

HT for Web 独创的 矢量图片设计架构 ，使其具有强大丰富的动态图形呈现能力，但从最近知乎热议的“ Adobe Photoshop 是否已经过时？ ”的话题，大家能体会到很多情况下实际项目不可能完全采用矢量，项目中还是有大量的传统非矢量的静态图片，毕竟工具强大且现有资源丰富，但为了使静态图片呈现出更多的动态效果， HT for Web 提供了较多渲染方式，例如对 HT for Web 的图元设置‘body.color’的style后图元即可达到自动染色的效果，这里将对这种染色技术进行讲解。 上图呈现了本文例子最终的呈现效果，中间为原始图片是 http://hightopo.com/images/banner.png ，对其分别设置了红、黄和蓝三种颜色后的染色效果，完全基于 HT for Web 实现这么个简单拓扑的话代码不过十多行，不过今天我们不借助 HT for Web 提供的‘body.color’的染色功能，我们将采用最原始的方式生产染色图片。 dataModel = new ht.DataModel(); graphView = new ht.graph.GraphView(dataModel); graphView.addToDOM(); var root = new ht.Node(); root.setImage('ht-for-web.png');