Gadget开发实战总结 2 （I See Pink Problem）

在使用WebService解决了Gadget和服务端的通信问题之后，我们大部分时间都花在Gadget客户端的编写工作上。毕竟使用Gadget的一个目的就是那超炫的界面。在这其中也出现了不少的问题,最大的问题大概就是这个I See Pink了.这让我们明白Gadget并不是什么都可以做得。

第二个问题－”I See Pink”

使用PNG图片进行设计

Gadget一个很大的优点就是用户界面非常的cool，比如这个自带的CPU/内存监视器。

仔细看的话很容易发现这是一个典型的不规则窗体。前面提到过Gadget的页面只是一个HTML，实际上只需要将整个页面背景设置为透明色就可以得到一个完全透明的窗体。

至于半透明效果，用PNG图片就可以轻松的实现。众所周知IE6 7 FF对PNG图片支持各不相同，统一起来要费不少功夫，但是在Gadget中，只需要轻松的调用g:image就可以使用PNG图片了。

比如这样:

<div id="HeadBox" style="position:absolute;top: 5px;left: 5px;height: 50px;width: 50px; z-index:40;">

<g:image id="HeadPicture" src="images/HeadPicture.png" style="position:absolute;height: 42px;width: 42px; z-index:41;"></g:image>

</div>

同样PNG图片也完全可以用在背景上，使用g:background即可

 

I See Pink

有了PNG这个强大的工具，设计出超炫的页面就有了可能，下面是我们设计的效果图的一部分。

在不规则窗体的边缘设计了一些按钮，按钮有按下和非按下两种状态，分别用两张PNG图片实现，背景也是由PNG图片构成的，在Photoshop的设计图里面写过很好，每个PNG图片都在边缘使用了半透明描边。整个UI看起来效果非常好。

于是我们开始进行切图，然后用HTML重新定位了所有的元素，可是出来的效果却让我们大失所望

由于没有找到当初出错时的图片，上面这个图片是另外一个地方出现同样问题时的截图。

注意那个按钮图片(不是圆的而是箭头形状的)，周围出现了一圈粉红色的“边框”，还有背景图片(就是左边粉红的一大块)，本来应该有自己的颜色，但是现在统统被覆盖上了一层粉红色！

这个问题让我们非常的苦恼，并且我们没有找到任何文档中提到这个问题。

经过很多的测试和推测，我们最后发现：当Gadget页面上出现任何半透明和半透明的叠加时，叠加部分的半透明色就无法被计算出来，而被显示成粉红色！

后来我们在MSDN Forum上也找到了相关的帖子，这个问题还被戏谑的命名为“I See Pink Problem”，并且并没有太好的方法解决，只能让美工来避免半透明色的叠加了。看来这是个Bug。

需要说明的是，完全不透明的图片叠加没有问题，全透明或半透明图片叠加在不透明图片上也没问题，半透明或全透明图片叠加在全透明图片（例如背景）上也没有任何问题，问题只发生在半透明和半透明的颜色叠加上。（其实想的想的到，就是Gadget的显示引擎根本没有提供半透明色与半透明色叠加的显示支持~或许这是It’s by design 不过我确实没有在任何文档里找到关于这个的说明）

这个问题迫使我们只能完全重做所有的美工工作，使得项目的进度拖后了好多天。