Tags标签 网战地图
当前位置: 主页 > 网站建设 > silverlight教程 >

Silverlight 2转换和剪辑区域

2012-04-06 09:42 [silverlight教程] 来源于:
导读:目录 放大镜下 在 3D 空间中旋转 现场视频覆盖简便方法 在撰写本文时,Silverlight 2 还处于测试阶段,但当您读到本文时应已接近其发布日期,它支持多 线程、联

目录

放大镜下

在 3D 空间中旋转

现场视频覆盖简便方法

在撰写本文时,Silverlight 2 还处于测试阶段,但当您读到本文时应已接近其发布日期,它支持多 线程、联网、浏览器集成、独立存储、强类型化、反射及其他更多功能。但 Silverlight 的最精彩之处 还在于其出色的图形处理功能。

Silverlight 2 将基于矢量的 XAML 渲染引擎与基于浏览器版本的 CLR 以及 Microsoft .NET Framework 基类库结合在一起。开发和设计人员在掌握了 XAML 后,可实现一些令人称奇的效果。 Silverlight 应用程序中许多直观视觉效果的关键是转换和剪辑区域。例如,在 2008 年 5 月版的超酷 代码中,其中提供的翻页框架(“Silverlight 翻页化繁为简”)在很大程度上就是依靠转换和剪辑区域 功能在浏览器中营造出与实际书籍或杂志相同的翻页效果。

在转换和剪辑的帮助下,您将获得更多更酷的技巧,您很快会了解到这一点。但首先您应该知道这里 提供的示例是使用 Silverlight 2 Beta 2 构建和测试的,因此在使用 Silverlight 2 RC 和 RTM 版本 实现时可能需要进行一些修改。

放大镜下

Windows Presentation Foundation (WPF) 程序员有时使用 VisualBrushes 来创建类似图 1 所描绘 的虚拟放大镜效果。Silverlight 不支持 VisualBrush,这使得开发人员认为(甚至宣称)在 Silverlight 应用程序中无法实现类似效果。

图 1 运行中的 Silverlight 放大镜

幸运的是,您可以在 Silverlight 中模拟放大镜,为此只需对转换和剪辑区域功能略加灵活运用即可 。此处介绍的 Magnifier 应用程序演示了具体过程。图 2 显示了简化版本的 Magnifier 应用程序的 Page.xaml 文件。它声明了两个几乎相同的 Canvas,每个都包含一份图 1 所述内容的副本。第一个 Canvas (MainCanvas) 是用户通常看到的。第二个 Canvas (ZoomCanvas) 与第一个包含的内容相同,但 它另外还包含了一个可将显示内容放大 4 倍的 ScaleTransform。

图 2 Page.xaml

<UserControl x:Class="Magnifier.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Grid x:Name="LayoutRoot" Background="Black"
  MouseLeftButtonDown="OnMouseLeftButtonDown" MouseMove="OnMouseMove"
  MouseLeftButtonUp="OnMouseLeftButtonUp">
  <Canvas x:Name="RootCanvas" Width="800" Height="800">
   <!-- Main canvas -->
    <Canvas x:Name="MainCanvas" Canvas.Left="0" Canvas.Top="0"
    Width="800" Height="900" Background="Black">
    <Canvas Canvas.Left="90" Canvas.Top="30" Width="620" Height="470">
     <Rectangle Canvas.Left="0" Canvas.Top="0" Width="620"
      Height="470" Fill="White" />
     <Image Canvas.Left="10" Canvas.Top="10" Width="600" Height="450"
       Source="Images/BobCat.jpg" />
    </Canvas>
    <Canvas Canvas.Left="90" Canvas.Top="540">
     <Line Canvas.Left="0" Canvas.Top="0" X1="0" Y1="0" X2="620"
      Y2="0" Stroke="#808080" StrokeThickness="3"
       StrokeDashArray="1,1" />
     <TextBlock Canvas.Left="0" Canvas.Top="10" Foreground="White"
      FontSize="36" Text="BVM BobCat" />
      <TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="White"
       FontSize="12" TextWrapping="Wrap" Width="620" Text="..." />
     <Line Canvas.Left="0" Canvas.Top="180" X1="0" Y1="0" X2="620"
      Y2="0" Stroke="#808080" StrokeThickness="3"
      StrokeDashArray="1,1" />
     </Canvas>
   </Canvas>
   <!-- Zoom canvas -->
    <Canvas x:Name="ZoomCanvas" Canvas.Left="0" Canvas.Top="0"
    Width="800" Height="900" Background="Black" Visibility="Collapsed">
     <Canvas.RenderTransform>
     <ScaleTransform CenterX="0" CenterY="0" ScaleX="4" ScaleY="4"/>
    </Canvas.RenderTransform>
     <Canvas.Clip>
     <EllipseGeometry x:Name="Lens" Center="0,0"
       RadiusX="40" RadiusY="40" />
    </Canvas.Clip>
     ...
     <Path Canvas.Left="0" Canvas.Top="0" Stroke="#808080"
      StrokeThickness="1">
     <Path.Data>
      <EllipseGeometry x:Name="LensBorder" Center="0,0"
       RadiusX="40" RadiusY="40" />
      </Path.Data>
    </Path>
   </Canvas>
   </Canvas>
 </Grid>
</UserControl>

(编辑:)

本文标签:
网友评论

栏目列表

推荐文章