zoukankan      html  css  js  c++  java
  • Silverlight开发历程—3DEffects实现3D特效

     3DEffects也称Perspective Transforms(透明变形),实现UIElement 的三维效果主要对象是Projection 类,位于System.Window.Media.Projection命名空间下。

    下面是一个利用3D特效制作一个三维效果的用户登录界面:

    XAML:

     <Grid x:Name="LayoutRoot" Background="White" >
            <StackPanel Width="400"  Height="280" Margin="150,50,150,116">
                <!--投影特效-->
                <StackPanel.Effect>
                    <DropShadowEffect BlurRadius="10" Direction="220" Color="Black" Opacity="0.5" ShadowDepth="25">
                    </DropShadowEffect>
                </StackPanel.Effect>
                <!--3D 特效-->
                <StackPanel.Projection>
                    <PlaneProjection  RotationZ="-10"  RotationX="-30" RotationY="-40" />
                </StackPanel.Projection>
                <!--渐变-->
                <StackPanel.Background>
                    <LinearGradientBrush>
                        <GradientStop Offset="0" Color="White" />
                        <GradientStop Offset="1" Color="Black" />
                    </LinearGradientBrush>
                </StackPanel.Background>
                <!--内容-->
                <TextBlock Text="Silverlight 3D Effects" FontSize="20" />
                <TextBlock Text="UserName:"  Margin="10" />
                <TextBox Margin="10" Width="200" />
                <TextBlock Text="PassWord:"  Margin="10" />
                <TextBox Margin="10" Width="200" />
                <Button Width="100" Height="30" Content="Login"/>
            </StackPanel>
        </Grid>


    运行结果:

    Projectino 包括三个重要的属性,分别是 RotationX、RotationY、TotationZ,分别代表三维空间的X轴、Y轴、Z轴.

    RotationX 属性指定围绕对象的水平轴旋转
    RotationY 属性围绕旋转中心的 y 轴旋转。
    RotationZ 属性围绕旋转中心的 z 轴(直接穿过对象平面的直线)旋转

    下面分别从Projection的X轴、Y轴、Z轴不同视角来查看旋转视角的效果:

    X 轴旋转:

    Grid x:Name="LayoutRoot" Background="White">
            <Image Stretch="None"  Source="../images/jiqiren2.jpg">
                <!--添加模糊效果-->
                <Image.Effect>
                    <DropShadowEffect BlurRadius="20" Direction="250" Opacity="0.5" Color="Black" />
                </Image.Effect>
                <Image.Projection>
                    <PlaneProjection RotationX="-60"  />
                </Image.Projection>
            </Image>
        </Grid>


    效果:

    Y轴视角:

    <Grid x:Name="LayoutRoot" Background="White">
            <Image Stretch="None"  Source="../images/jiqiren2.jpg">
                <!--添加模糊效果-->
                <Image.Effect>
                    <DropShadowEffect BlurRadius="20" Direction="250" Opacity="0.5" Color="Black" />
                </Image.Effect>
                <Image.Projection>
                    <PlaneProjection RotationY="-60"  />
                </Image.Projection>
            </Image>
        </Grid>


    效果:

    Z轴视角:

    <Grid x:Name="LayoutRoot" Background="White">
            <Image Stretch="None"  Source="../images/jiqiren2.jpg">
                <!--添加模糊效果-->
                <Image.Effect>
                    <DropShadowEffect BlurRadius="20" Direction="250" Opacity="0.5" Color="Black" />
                </Image.Effect>
                <Image.Projection>
                    <PlaneProjection RotationZ="45"  />
                </Image.Projection>
            </Image>
        </Grid>


    效果:

    下面我们看一下 X轴、Y轴、Z轴的旋转轨迹:

    Projection除了对X、Y、Z轴的值旋转之外,还允许调整Projection对Silverlight目标对象进行基于三维空间的定位。

    LocalOffsetX 沿旋转对象X轴平定位一个对象。
    LocalOffsetY 沿旋转对象 Y 轴平定位一个对象。
    LocalOffsetZ 沿旋转对象Z 轴平定位一个对象。

    GlobalOffsetX 沿屏幕对齐的 x 轴定位一个对象。
    GlobalOffsetY 沿屏幕对齐的 y 轴定位一个对象。
    GlobalOffsetZ 沿屏幕对齐的 z 轴定位一个对象。

    下面为了更好的体会对象的X轴,Y轴,Z轴的旋转效果,我们做一个例子可以通过拖动进度条来更改X轴,Y轴,Z轴的值:

    XAML:

     
        <Grid x:Name="LayoutRoot">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.Background>
                <ImageBrush ImageSource="../images/widows7.jpg" />
            </Grid.Background>
            <!--3D 元素-->
            <Grid Width="200" Height="160" Background="Green" >
                <TextBlock Foreground="White" Text="Windows Phone 7" Grid.Column="0" FontFamily="Arial" FontSize="22" Margin="6,58,6,20">
                </TextBlock>
                <Grid.Effect>
                    <DropShadowEffect Direction="50" BlurRadius="60" Color="Green" Opacity="0.8" />
                </Grid.Effect>
                <Grid.Projection>
                    <PlaneProjection  x:Name="prots" />
                </Grid.Projection>
            </Grid>
            <!--Silder 控件和元素之间的TwoWay 数据绑定用来设置Projection属性-->
            <Slider Height="23" Grid.Column="0" Grid.Row="1" Maximum="180" Minimum="-180" Value="{Binding RotationX,Mode=TwoWay,ElementName=prots}" />
            <Slider Height="23" Grid.Column="0" Grid.Row="2" Maximum="180" Minimum="-180" Value="{Binding RotationY,Mode=TwoWay,ElementName=prots}"/>
            <Slider Height="23" Grid.Column="0" Grid.Row="3" Maximum="180" Minimum="-180" Value="{Binding RotationZ,Mode=TwoWay,ElementName=prots}"/>
            <!--用TextBox显示 坐标-->
            <TextBox  Height="23" Width="150" Grid.Column="1"  Grid.Row="1" Margin="10" IsReadOnly="True" Text="{Binding RotationX,Mode=TwoWay,ElementName=prots}"/>
            <TextBox  Height="23" Width="150" Grid.Column="1"  Grid.Row="2" Margin="10" IsReadOnly="True" Text="{Binding RotationY,Mode=TwoWay,ElementName=prots}"/>
            <TextBox  Height="23" Width="150" Grid.Column="1"  Grid.Row="3" Margin="10" IsReadOnly="True" Text="{Binding RotationZ,Mode=TwoWay,ElementName=prots}"/>
        </Grid>

    效果:


  • 相关阅读:
    CentOS6.5 mini安装到VirtualBox虚拟机中
    docker配置redis6.0.5集群
    docker搭建数据库高可用方案PXC
    我通过调试ConcurrentLinkedQueue发现一个IDEA的小虫子(bug), vscode复现, eclipse毫无问题
    ThreadLocal底层原理学习
    第九章
    多线程-java并发编程实战笔记
    Spring-IOC源码解读3-依赖注入
    Spring-IOC源码解读2.3-BeanDefinition的注册
    Spring-IOC源码解读2.2-BeanDefinition的载入和解析过程
  • 原文地址:https://www.cnblogs.com/raphael5200/p/5114880.html
Copyright © 2011-2022 走看看