[Sample] 이미지와 텍스트의 간단 그림자 효과

아래 내용은 실버라이트 네이버 카페의 쇼티님께서 번역해 주신 자료입니다.

=================================================================================================================

본 페이지는 다음 블로그를 의역한 결과입니다. 도움이 되었으면 좋겠습니다. ^^

 (http://silverlight.net/blogs/msnow/archive/2008/09/04/silverlight-tip-of-the-day-36-how-to-create-reflections-and-shadows-for-images-and-text.aspx)

 실제로 이 사이트에는 비정기적으로 Tip of the Day가 올라오고 있는데. 굉장히. 코딩센스를 늘려주는 튜토리얼들입니다.

  그리고 의외로 '자주' 업데이트됩니다. (놀랬어요.. ㅋㅋ)

 어쨌건 반사효과라는건 굉장히 좋은 효과라고 생각해요. 이땐 RenderTransform을 이용하면 됩니다.

  이 그림을 보세요.

  

  물론 디자이너 분들과..는 따로 협의를 해야 할 부분이긴 합니다만;; 그냥 딱 보기에는

  더미 디자인으로는 나쁘지 않을꺼같애요.. 아시겠지만 위쪽은 TextBlock이고. 아래쪽은 일반 Image입니다.

   지금 소개해드리는 기법은, 일반적으로 게임그래픽에서도 많이 쓰이는 방법이라고 볼 수 있지요.

 

 

 

  간단한 그림자 효과인데, 배경이 다르기때문에 사진을 따로 준비하지 않고도, 그냥 이미지 하나로 이런 효과를

  낼 수 있게 되는 형식입니다. 만약에 해가 떴을때 그림자 위치에 변화를 주고 싶다? 그러면 SkewTransform을 쓰시면

  되구요..

  

  응용한다면 뭐.. 물에서 나는 효과도 구현이 가능하겠지요.

  

   그럴듯 하지 않나요.. ^^ 그럼 시작해보겠습니다.  

  <Canvas x:Name="LayoutRoot" Background="Black">
        <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>
    </Canvas>

   (역자 주 : 배경은 "Black"으로 하시면 됩니다)

   이 코딩에서 주목할 점은 다음과 같습니다.

  1. 2개의 TextBlock을 사용합니다. 하나는 메인 TextBlock이고, 하나는 그림자죠.

  2. 이 그림자효과를 위해 ScaleTransform을 설정했고, ScaleY를 "-1"로 하였습니다. 이것은 객체의 위 아래를 뒤집어버리는

     효과가 있습니다.

  3. 투명도를 사용해서 TextBlock의 Fade를 지정해주고 있습니다. LinearGradientBrush를 이용해서 Offset을 (0.5, 0)에서

     (0.5, 1)을 지정하고, 000000 에서 FFFFFF 로 변화시킨 결과입니다.

   이미지의 경우도 동일합니다. 

<Canvas x:Name="LayoutRoot" Background="Black">
        <Image Source="Reflect.png"  Canvas.Left="225" Canvas.Top="100" ></Image>
        <Image Source="Reflect.png"  Canvas.Left="225" Canvas.Top="385" RenderTransformOrigin="0.5,0.5">
            <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>
    </Canvas>

  이와 같이 하시면 됩니다. 위에서 말씀드렸던대로 만약 그림자를 블랙으로 하시려면 마스크를 블랙으로 그라디언트를 주시면

  될 것이고, 물에 비치는 모습을 하고 싶으시다면 역시 물의 색깔과 어울리게 그라디언트를 주시면 됩니다.

[출처] 실버라이트 네이버 카페