방법: 볼록 시각 효과 만들기

아티클
08/20/2008

업데이트: 2007년 11월

EmbossBitmapEffect를 사용하면 시각적 개체에 대한 범프 매핑을 만들어 인공 광원으로부터 깊이 및 질감 효과를 줄 수 있습니다. 아래는 다음을 보여 주는 일련의 예제입니다.

단순한 태그를 사용하여 개체에 효과를 적용하는 방법
Style을 사용하여 하나 이상의 개체에 효과를 적용하는 방법
코드를 사용하여 개체에 효과를 적용하는 방법
애니메이션을 사용하여 개체에 적용된 효과의 속성에 애니메이션 효과를 주는 방법

참고: 아래의 모든 예제에서는 개체에 단일 효과만 적용합니다. 여러 효과를 적용하려면 BitmapEffectGroup을 사용합니다. 예제를 보려면 방법: 여러 시각 효과 만들기을 참조하십시오.

예제

다음 예제에서는 EmbossBitmapEffect를 사용하여 볼록 이미지를 만드는 방법을 보여 줍니다.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

    <StackPanel>

      <Image Width="360" Source="/images/WaterLilies.jpg" Margin="10" >
        <Image.BitmapEffect>

          <!-- <BitmapEffectGroup> would go here if you wanted to apply more 
             then one effect to the TextBox. However, in this example only  
             one effect is being applied so BitmapEffectGroup does not need  
             to be included. -->

          <!-- The Relief property determines the amount of relief of the emboss.
               The valid range of values is 0-1 with 0 having the least relief and
               1 having the most. The default value is 0.44. The LightAngle determines 
               from what direction the artificial light is cast upon the embossed 
               object which effects shadowing. The valid range is from 0-360 (degrees)
               with 0 specifying the right-hand side of the object and successive values  
               moving counter-clockwise around the object. -->
          <EmbossBitmapEffect Relief="0.8" LightAngle="320" />
        </Image.BitmapEffect>
      </Image>

    </StackPanel>

</Page>

다음 예제에서는 Style을 사용하여 페이지의 모든 Image에 EmbossBitmapEffect를 적용하는 방법을 보여 줍니다.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <!-- Resources define Styles for the entire page. -->
  <Page.Resources>

    <!-- This style applies to any Image on the page. -->
    <Style TargetType="{x:Type Image}">
      <Setter Property="BitmapEffect" >
        <Setter.Value>
          <EmbossBitmapEffect Relief="0.8" />
        </Setter.Value>
      </Setter>
    </Style>

  </Page.Resources>

  <StackPanel>

    <!-- The Style defined above applies to this Image which applies
         the EmbossBitmapEffect. -->
    <Image Width="360" Source="/images/WaterLilies.jpg" Margin="10" />

  </StackPanel>

</Page>

다음 예제에서는 코드를 사용하여 Image가 로드될 때 이 이미지에 EmbossBitmapEffect를 적용하는 방법을 보여 줍니다.

다음은 이 예제에 대한 XAML(Extensible Application Markup Language)입니다.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.EmbossExample" >

  <StackPanel>

    <!-- When this image loads, an EmbossBitmapEffect is applied to it. -->
    <Image Width="360" Loaded="OnLoadEmbossImage" Source="/images/WaterLilies.jpg" />

  </StackPanel>

</Page>

다음 코드에서는 위 태그의 이벤트를 처리합니다.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Input;
using System.Windows.Media.Effects;

namespace SDKSample
{

    public partial class EmbossExample : Page
    {

        // Add Bevel effect.
        void OnLoadEmbossImage(object sender, RoutedEventArgs args)
        {
            // Get a reference to the Button.
            Image myImage = (Image)sender;

            // Initialize a new BevelBitmapEffect that will be applied
            // to the Button.
            EmbossBitmapEffect myEmbossEffect = new EmbossBitmapEffect();

            // The LightAngle determines from what direction the artificial 
            // light is cast upon the embossed object which effects shadowing.
            // The valid range is from 0-360 (degrees)with 0 specifying the 
            // right-hand side of the object and successive values moving
            // counter-clockwise around the object.
            // Set the LightAngle to 320 degrees (lower right side). 
            myEmbossEffect.LightAngle = 320;

            // The Relief property determines the amount of relief of the emboss.
            // The valid range of values is 0-1 with 0 having the least relief and
            // 1 having the most. The default value is 0.44.
            myEmbossEffect.Relief = 0.8;

            // Apply the bitmap effect to the Image.
            myImage.BitmapEffect = myEmbossEffect;
        }

    }
}

다음 예제에서는 인공 광원이 볼록 이미지 주위를 회전하여 볼록 효과로 인해 생기는 그림자가 빛을 따라 이동하도록 EmbossBitmapEffect의 LightAngle 속성에 애니메이션 효과를 주는 방법을 보여 줍니다.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >

  <StackPanel>

    <Image Source="/images/WaterLilies.jpg" Width="600"  Margin="10" >
      <Image.BitmapEffect>
        <EmbossBitmapEffect x:Name="myEmbossBitmapEffect"  Relief="0.8" LightAngle="0" />
      </Image.BitmapEffect>
      <Image.Triggers>
        <EventTrigger RoutedEvent="Image.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the LightAngle so that the artificial light
                   orbits around the embossed image which makes the
                   shadows cast by the emboss shift accordingly. -->
              <DoubleAnimation
               Storyboard.TargetName="myEmbossBitmapEffect"
               Storyboard.TargetProperty="LightAngle"
               From="0" To="360" Duration="0:0:3" />

            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Image.Triggers>
    </Image>

  </StackPanel>

</Page>