[silverlight] silverlight3新增功能1：三维效果（透视转换）
[silverlight] silverlight3新增功能1：三维效果（透视转换）
dino.c
发布于 2019-01-18 11:00:51
发布于 2019-01-18 11:00:51
既然已经开始做SL3项目，而且document也已经入手了，那就开始学习吧。虽然直接读document比较方便，但谢谢学习心得总是好事。
首先应该看看Silverlight 3 中的新增功能，Silverlight中重大的改进之一就是3D效果了，以前宣称"FLASH杀手"却连3D都没有真是难以置信的厚脸皮（还是说其实FLASH的3D也是模拟出来的？）。先来看看效果吧，是参考Silverlight 3 Beta 新特性解析（2）-Graphics篇 - 笑看风云淡 后做出来的：
获取 Microsoft Silverlight
<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.
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2009-08-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读