none
Fun with Silverlight系列之一 -- 倒影效果 RRS feed

  • 常规讨论

  • 在Silverlight中实现倒影效果和在WPF中稍有不同,
    在WPF中可以用VisualBrush 实现,具体如下:
    要反射的内容:
     1<Border Name="inkBorder" Grid.Row="0" VerticalAlignment="Bottom" Margin="20"
     2            Width="400" Height="100" CornerRadius="5" BorderThickness="4">
     3      <Border.BorderBrush>
     4        <LinearGradientBrush SpreadMethod="Reflect" StartPoint="0,0" EndPoint="0.5,0.5">
     5       <LinearGradientBrush.GradientStops>
     6         <GradientStop Color="Gray" Offset="0" />
     7            <GradientStop Color="#eeeeee" Offset="1" />
     8          </LinearGradientBrush.GradientStops>
     9         </LinearGradientBrush>
    10      </Border.BorderBrush>
    11      <InkCanvas Background="Yellow">
    12         <Line X1="10" Y1="70" X2="380" Y2="70" Stroke="Gray"/>
    13      </InkCanvas>
    14    </Border>
    倒影内容:
     1  <Rectangle.Fill>
     2    <VisualBrush
     3      Visual="{Binding ElementName=inkBorder}">
     4      <VisualBrush.RelativeTransform>
     5        <TransformGroup>
     6          <ScaleTransform ScaleX="1" ScaleY="-1" />
     7          <TranslateTransform Y="1" />
     8        </TransformGroup>
     9      </VisualBrush.RelativeTransform>
    10    </VisualBrush>
    11  </Rectangle.Fill>

    关键在于这句话<ScaleTransform ScaleX="1" ScaleY="-1" /> 表示控件的反转效果,后面也会用到这个技巧。

    在Silverlight中有ImageBrush和VideoBrush,可以类似WPF里的方法倒映图片和视频
    例如:

     1<Canvas 
     2  xmlns="http://schemas.microsoft.com/client/2007"
     3  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4  Width="346" Height="516">
     5  <MediaElement Width="328" Height="248" Canvas.Left="8" Canvas.Top="8"
     6                x:Name="video" Source="Bear.wmv" Stretch="Fill" /> 
     7
     8  <Rectangle Width="328" Height="248" Canvas.Left="8" Canvas.Top="506">
     9    <Rectangle.Fill>
    10      <VideoBrush SourceName="video" />
    11    </Rectangle.Fill>
    12    <Rectangle.RenderTransform>
    13      <ScaleTransform ScaleX="1" ScaleY="-1"/>
    14    </Rectangle.RenderTransform>
    15    <Rectangle.OpacityMask>
    16      <LinearGradientBrush EndPoint="0.5,0.605" StartPoint="0.5,0.94">
    17        <GradientStop Color="#64000000" Offset="0"/>
    18        <GradientStop Color="#00FFFFFF" Offset="1"/>
    19      </LinearGradientBrush>
    20    </Rectangle.OpacityMask>
    21  </Rectangle>
    22</Canvas>
    23
    24

    但是如果向反射其他控件的话就要自己写代码控制了,
    我们要反映这个控件:

    1  <InkPresenter Name="inkPresenter" Canvas.Left="70" Canvas.Top="50" Background="Transparent" Cursor="Stylus" MouseLeftButtonDown="onMouseDown" MouseMove="onMouseMove" MouseLeftButtonUp="onMouseUp">
    2    <InkPresenter.Clip>
    3      <RectangleGeometry Rect="0,0,400,100"/>
    4    </InkPresenter.Clip>
    5    <Image Source="inkbackground.jpg"/>
    6    <TextBlock Name="writeHere" Text="Write Here" FontSize="72" FontFamily="Comic Sans MS" Foreground="#80808080" Opacity="1"/>
    7  </InkPresenter>

    我们可以看到这个控件:


    首先在下面添加相同的控件:

    1  <InkPresenter Canvas.Left="70" Canvas.Top="180" Name="inkMirror" Width="400" Height="100" RenderTransformOrigin="0.5,0.5">
    2    <Rectangle Width="400" Height="100">
    3      <Rectangle.Fill>
    4        <ImageBrush ImageSource="inkbackground.jpg"/>
    5      </Rectangle.Fill>
    6    </Rectangle>
    7    <TextBlock Name="writeHereMirror" Text="Write Here" FontSize="72" FontFamily="Comic Sans MS" Foreground="#80808080">
    8    </TextBlock>
    9  </InkPresenter>


    效果:

    现在设置添加ScaleTransform 并且添加Y轴属性为-1,反转这个控件

     1  <InkPresenter Canvas.Left="70" Canvas.Top="180" Name="inkMirror" Width="400" Height="100" 
     2

     3RenderTransformOrigin="0.5,0.5">

     4    <InkPresenter.RenderTransform>
     5      <TransformGroup>
     6        <ScaleTransform ScaleX="1" ScaleY="-1" />
     7        <TranslateTransform Y="1" />
     8      </TransformGroup>
     9    </InkPresenter.RenderTransform>
    10    <Rectangle Width="400" Height="100">
    11      <Rectangle.Fill>
    12        <ImageBrush ImageSource="inkbackground.jpg"/>
    13      </Rectangle.Fill>
    14    </Rectangle>
    15    <TextBlock Name="writeHereMirror" Text="Write Here" FontSize="72" FontFamily="Comic Sans MS" 
    16

    17Foreground="#80808080">

    18    </TextBlock>
    19  </InkPresenter>

    现在看一下反转的效果:

    不过这种直截了当的倒影似乎并不符合我们的审美观,让我们再添加一些渐变效果让控件仿佛倒影在水中一般

     1  <InkPresenter Canvas.Left="70" Canvas.Top="180" Name="inkMirror" Width="400" Height="100" 
     2
     3RenderTransformOrigin="0.5,0.5">
     4    <InkPresenter.RenderTransform>
     5      <TransformGroup>
     6        <ScaleTransform ScaleX="1" ScaleY="-1" />
     7        <TranslateTransform Y="1" />
     8      </TransformGroup>
     9    </InkPresenter.RenderTransform>
    10    <Rectangle Width="400" Height="100">
    11      <Rectangle.OpacityMask>
    12        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
    13          <LinearGradientBrush.GradientStops>
    14            <GradientStop Offset="1.0" Color="#66000000" />
    15            <GradientStop Offset="0.0" Color="#00000000" />
    16          </LinearGradientBrush.GradientStops>
    17        </LinearGradientBrush>
    18      </Rectangle.OpacityMask>
    19      <Rectangle.Fill>
    20        <ImageBrush ImageSource="inkbackground.jpg"/>
    21      </Rectangle.Fill>
    22    </Rectangle>
    23    <TextBlock Name="writeHereMirror" Text="Write Here" FontSize="72" FontFamily="Comic Sans MS" 
    24
    25Foreground="#80808080">
    26      <TextBlock.OpacityMask>
    27        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
    28          <LinearGradientBrush.GradientStops>
    29            <GradientStop Offset="1.0" Color="#FF000000" />
    30            <GradientStop Offset="0.0" Color="#00000000" />
    31          </LinearGradientBrush.GradientStops>
    32        </LinearGradientBrush>
    33      </TextBlock.OpacityMask>
    34    </TextBlock>
    35  </InkPresenter>

    最终效果如下:

    最后控制两个图案同步的是在javascript里面,这里就不详说了,参考附件里的代码,
    其实在silverlight里还可以做出更多令人惊叹的效果,应该不会逊于Flash和Flex里面的效果的,
    希望大家能够一起挖掘silverlight里面的无限潜能哦

    /Files/ithurricane/InkReflectionsSource.zip
    作者:ithurricane
    出处:http://ithurricane.cnblogs.com
    联系:ithurricane@126.com
    MSN:ithurricane@hotmail.com
    QQ:20158686

    My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com

    My contact: QQ:372900288 E-mail:372900288@qq.com msn:sellnet007@hotmail.com

    2009年3月9日 7:23
    版主