以OpacityMask设计半透明遮罩




  OpacityMask是一个相当好用的属性,通过OpacityMask与Brush的配合,您可以为任意图形加上一个透明遮罩,我们先看一个简单的例子:

以OpacityMask设计半透明遮罩_第1张图片

  上图左方是一个标准的图形,而右方则是加上OpacityMask遮罩之后的结果,其Xaml代码如下:

以OpacityMask设计半透明遮罩_第2张图片  

  您会发现,我们可以通过OpacityMask用笔刷来刷某一个元素,刷的方式是采用反透明遮罩的方式。请参考下图,假设原始图案是最左方的图形,而遮罩(Opacity Mask)若是下图中间这样,则刷出来的图形则是下图右方:

以OpacityMask设计半透明遮罩_第3张图片

  请参考范例(下载),我们利用绘图软件建立了一个底下这样的图档(名称为OpacityMask.png):

以OpacityMask设计半透明遮罩_第4张图片


然后编写底下的xaml代码:

以OpacityMask设计半透明遮罩_第5张图片


  呈现出的结果如下图:

以OpacityMask设计半透明遮罩_第6张图片


  通过这样的技术,我们可以轻易地在画面上呈现出相当有美感的图形,例如以特定的手绘的爱心外框,作为照片的遮罩,作出坊间影像处理特效。

  不仅是图形的部份,就算是影片,Silverlight也可以利用遮罩来呈现出特殊效果:

以OpacityMask设计半透明遮罩_第7张图片


  代码如下:

以OpacityMask设计半透明遮罩_第8张图片


  请读者务必注意,用以作为遮罩的图片必须是支持透明背景的图片格式(请特别注意是透明的图片背景,而不是白色的图片背景),读者可参考书附光盘范例中的图片OpacityMask.png,以了解此格式。


本文范例(下载)


资料来源: Silverlight权威讲座--ASP.NET整合秘技与独家案例剖析(董大伟 - 旗标)

你可能感兴趣的:(.net,asp.net,asp,silverlight)