Silverlight 2转换和剪辑区域

Silverlight 2转换和剪辑区域2011-09-17 MSDN Jeff Prosise目录

放大镜下

在 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>