[silverlight] silverlight3新增功能1:三维效果(透视转换)

2019-01-18 11:00:51 浏览数 (3)

      既然已经开始做SL3项目,而且document也已经入手了,那就开始学习吧。虽然直接读document比较方便,但谢谢学习心得总是好事。

      首先应该看看Silverlight 3 中的新增功能,Silverlight中重大的改进之一就是3D效果了,以前宣称"FLASH杀手"却连3D都没有真是难以置信的厚脸皮(还是说其实FLASH的3D也是模拟出来的?)。先来看看效果吧,是参考Silverlight 3 Beta 新特性解析(2)-Graphics篇 - 笑看风云淡 后做出来的:

代码语言:javascript复制
<Grid x:Name="LayoutRoot">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Offset="0" Color="#FF979797"/>
                <GradientStop Offset="1" Color="#FF676767"/>
            </LinearGradientBrush>
        </Grid.Background>
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" >
            <Image HorizontalAlignment="Center" Width="300"   Margin="20,5" Source="logo.jpg">
                <Image.Projection>
                    <PlaneProjection x:Name="ImageProjection"/>
                </Image.Projection>
            </Image>
            <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                <TextBlock Text="CenterOfRotationX: -5" Width="200" HorizontalAlignment="Right"/>
                <Slider Minimum="-5" Width="380" Maximum="5" Value="{Binding CenterOfRotationX, Mode=TwoWay, ElementName=ImageProjection}"
                        ToolTipService.ToolTip="{Binding CenterOfRotationX, Mode=TwoWay, ElementName=ImageProjection}" />
                <TextBlock Text="5" Width="50"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                <TextBlock Text="CenterOfRotationY: -5" Width="200" HorizontalAlignment="Right"/>
                <Slider  Minimum="-5" Width="380" Maximum="5" Value="{Binding CenterOfRotationY, Mode=TwoWay, ElementName=ImageProjection}"
                           ToolTipService.ToolTip="{Binding CenterOfRotationY, Mode=TwoWay, ElementName=ImageProjection}"  />
                <TextBlock Text="5" Width="50"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                <TextBlock Text="CenterOfRotationZ: -5" Width="200" HorizontalAlignment="Right"/>
                <Slider  Minimum="-5" Width="380" Maximum="5" Value="{Binding CenterOfRotationZ, Mode=TwoWay, ElementName=ImageProjection}"
                           ToolTipService.ToolTip="{Binding CenterOfRotationZ, Mode=TwoWay, ElementName=ImageProjection}"  />
                <TextBlock Text="5"  Width="50"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                <TextBlock Text="RotationX: -360" Width="200" HorizontalAlignment="Right"/>
                <Slider  Minimum="-360" Width="380" Maximum="360" Value="{Binding RotationX, Mode=TwoWay, ElementName=ImageProjection}"
                           ToolTipService.ToolTip="{Binding RotationX, Mode=TwoWay, ElementName=ImageProjection}"  />
                <TextBlock Text="360"  Width="50"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                <TextBlock Text="RotationY: -360" Width="200" HorizontalAlignment="Right"/>
                <Slider  Minimum="-360" Width="380" Maximum="360" Value="{Binding RotationY, Mode=TwoWay, ElementName=ImageProjection}"
                           ToolTipService.ToolTip="{Binding RotationY, Mode=TwoWay, ElementName=ImageProjection}"  />
                <TextBlock Text="360"  Width="50"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                <TextBlock Text="RotationZ: -360" Width="200" HorizontalAlignment="Right"/>
                <Slider  Minimum="-360" Width="380" Maximum="360" Value="{Binding RotationZ, Mode=TwoWay, ElementName=ImageProjection}"
                           ToolTipService.ToolTip="{Binding RotationZ, Mode=TwoWay, ElementName=ImageProjection}"  />
                <TextBlock Text="360"  Width="50"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                <TextBlock Text="GlobalOffsetX: -500" Width="200" HorizontalAlignment="Right"/>
                <Slider  Minimum="-500" Width="380" Maximum="500" Value="{Binding GlobalOffsetX, Mode=TwoWay, ElementName=ImageProjection}"
                           ToolTipService.ToolTip="{Binding GlobalOffsetX, Mode=TwoWay, ElementName=ImageProjection}"  />
                <TextBlock Text="500"  Width="50"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                <TextBlock Text="GlobalOffsetY: -500" Width="200" HorizontalAlignment="Right"/>
                <Slider  Minimum="-500" Width="380" Maximum="500" Value="{Binding GlobalOffsetY, Mode=TwoWay, ElementName=ImageProjection}"
                           ToolTipService.ToolTip="{Binding GlobalOffsetY, Mode=TwoWay, ElementName=ImageProjection}"  />
                <TextBlock Text="500"  Width="50"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                <TextBlock Text="GlobalOffsetZ: -500" Width="200" HorizontalAlignment="Right"/>
                <Slider  Minimum="-500" Width="380" Maximum="500" Value="{Binding GlobalOffsetZ, Mode=TwoWay, ElementName=ImageProjection}"
                           ToolTipService.ToolTip="{Binding GlobalOffsetZ, Mode=TwoWay, ElementName=ImageProjection}"  />
                <TextBlock Text="500"  Width="50"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                <TextBlock Text="LocalOffsetX: -500" Width="200" HorizontalAlignment="Right"/>
                <Slider  Minimum="-500" Width="380" Maximum="500" Value="{Binding LocalOffsetX, Mode=TwoWay, ElementName=ImageProjection}"
                           ToolTipService.ToolTip="{Binding LocalOffsetX, Mode=TwoWay, ElementName=ImageProjection}"  />
                <TextBlock Text="500"  Width="50"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                <TextBlock Text="LocalOffsetY: -500" Width="200" HorizontalAlignment="Right"/>
                <Slider  Minimum="-500" Width="380" Maximum="500" Value="{Binding LocalOffsetY, Mode=TwoWay, ElementName=ImageProjection}"
                           ToolTipService.ToolTip="{Binding LocalOffsetY, Mode=TwoWay, ElementName=ImageProjection}"  />
                <TextBlock Text="500"  Width="50"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                <TextBlock Text="LocalOffsetZ: -500" Width="200" HorizontalAlignment="Right"/>
                <Slider  Minimum="-500" Width="380" Maximum="500" Value="{Binding LocalOffsetZ, Mode=TwoWay, ElementName=ImageProjection}"
                           ToolTipService.ToolTip="{Binding LocalOffsetZ, Mode=TwoWay, ElementName=ImageProjection}"  />
                <TextBlock Text="500"  Width="50"/>
            </StackPanel>
        </StackPanel>
    </Grid>

(题外话,新增的Element-To-Element Binding功能很方便,以前使用Slider需要在ValueChanged事件中写代码实现,而且也不能这样个绑定ToolTip。)

      稍微注释一下:

  • LocalOffsetX 沿旋转对象平面的 x 轴平移对象。
  • LocalOffsetY 沿旋转对象平面的 y 轴平移对象。
  • LocalOffsetZ 沿旋转对象平面的 z 轴平移对象。
  • GlobalOffsetX 沿屏幕对齐的 x 轴平移对象。
  • GlobalOffsetY 沿屏幕对齐的 y 轴平移对象。
  • GlobalOffsetZ 沿屏幕对齐的 z 轴平移对象。
  • CenterOfRotationX、CenterOfRotationY、CenterOfRotationZ则是旋转中心点 感觉上三维效果可以实现过去大部分的2D效果。其他的也不需要多说了吧,A silverlight is worth a thousand words.

0 人点赞