Wiki

Tạo bóng phản chiếu là một hiệu ứng rất mới mẻ, bạn có thể ứng dụng vào những phần tử  hình ảnh và dòng text bằng cách sử dụng phần tử RenderTransforms. Thí dụ, hãy nhìn vào màn hình sau đây, hình ảnh và text có hình phản chiếu được làm bằng Silverlight. Hình phản chiếu đầu tiên được làm trên một TextBlock, cái thứ hai được làm trên một  Image.

                           Hình  1. Hình phản chiếu của TextBlock và  Image .

Đối với lập trình game, bạn có thể đi một bước xa hơn và sử dụng nó cho bóng của một đối tượng và hình phản chiếu dưới nước trong game của bạn. Thí dụ, hãy nhìn vào hình ảnh sau thể hiện hình phản chiếu của một cái cây trên hai mặt đất  khác nhau:

                                        Hình 2. Cây có bóng đổ

Bạn thậm chí có thể áp ụng  SkewTranform vào việc tạo bóng cho cây theo hướng chiếu sáng của mặt trời:

Hình 3. Bóng cây theo hướng mặt trời

Và làm thế nào về bóng cây phản ánh trong một ít nước:

                               Hình 4. Hình ảnh phản chiếu trong nước.

Và bằng cách nào thực hiện tất cả những điều trên? Hãy bắt đầu với việc thực hiện hình phản chiếu của một TextBlock như là Hình 1 ở trên.

<TextBlock Text="REFLECTION EXAMPLE" Canvas.Left="145" Canvas.Top="12" Foreground="White" FontSize="30"></TextBlock>

<TextBlock Text="REFLECTION EXAMPLE" Canvas.Top="80" Canvas.Left="145" FontSize="30" RenderTransformOrigin="0.5,0.5" Opacity="0.6">

    <TextBlock.RenderTransform>

        <ScaleTransform  ScaleY="-1"/>

    </TextBlock.RenderTransform>

    <TextBlock.Foreground>

        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >

            <GradientStop Color="#FF000000" Offset="0.0"/>

            <GradientStop Color="#FFFFFFFF" Offset="1.0"/>

        </LinearGradientBrush>

    </TextBlock.Foreground>

</TextBlock>

Một vài điều cần chú ý:

1. Chúng ta sử dụng hai TextBlocks, một cái chính cho  TextBlock , một cái cho hình phản chiếu.
2. Đối với  TextBlock là hình phản chiếu, chúng ta tạo một ScaleTransform và gán cho  ScaleY = –1. Điều này sẽ tạo ra TextBlock ngược lại ở phía dưới tạo hình phản chiếu.
3. Chúng ta tạo một OpacityMask với mục đích hiển thị TextBlock ra ngoài. Chúng ta sử dụng một LinearGradientBrush cho OpacityMask  này để nó cho phép chúng ta hiển thị theo chiều dọc đi từ điểm có  StartPoint “0.5,0” đến điểm có  EndPoint “0.5,1”( tức là hiển thị cái bóng bị mất đi một phần cuối và từ trên xuống sẽ mờ dần  cho giống với thực tế)

Nào bây giờ đối với Image trong hình 1 chúng ta làm chính xác  như những việc làm với text, ngoại trừ đối tượng tạo bóng của chúng ta là Image.

<Image Source="Reflect.png"  Canvas.Left="225" Canvas.Top="100" ></Image>

<Image Source="Reflect.png"  Canvas.Left="225" Canvas.Top="385" RenderTransformOrigin="0.0,0.0">

    <Image.RenderTransform>

            <ScaleTransform ScaleY="-1"></ScaleTransform>

    </Image.RenderTransform>

    <Image.OpacityMask>

        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

            <GradientStop Color="#00000000" Offset="0.0"/>

            <GradientStop Color="#FFFFFFFF" Offset="1.0"/>

        </LinearGradientBrush>

    </Image.OpacityMask>

</Image>

Những cái cây sử dụng hiệu ứng như trên ngoại trừ việc cây tạo phản chiếu trên mặt đất là một hình ảnh với  màu trắng và mà đen ( xem Hình 5 phía dưới) . Đối với hình phản chiếu trong nước, chúng ta vẫn giữ màu thật của hình ảnh vì nước vẫn giữ màu của bóng cây trong thực tế.

      Hình 5. Màu của  Image + B/W Mask.

Chạy demo của bài hướng dẫn này tại đây: http://silverlight.services.live.com/invoke/66033/Reflection%20and%20Shadows/iframe.html

Thank you,
--Mike Snow