[深入浅出WP8.1(Runtime)]应用实例——移动截图

10.2应用实例——移动截图

移动截图例子是实现一个把一张图片的某个部分截取出来的功能，并且用户可以选定截取的图片区间。那个该例子会使用ManipulationDelta事件来实现对截取区间的选择。然后使用UIElement元素的Clip属性对图片进行局部截取。

下面给出移动截图的示例：该示例主要有3个主要的逻辑分别是截图区域的选择、图片的局部截取和截图的展示。

代码清单10-3：移动截图（源代码：第10章\Examples_10_3）

MainPage.xaml文件主要代码：在UI上image1是图片的展示，image2是显示截取之后的图片，命名为LayoutRoot的Grid控件则是图片和截图区域的容器。
------------------------------------------------------------------------------------------------------------------
    <ScrollViewer>
        <StackPanel>
            <Grid x:Name="LayoutRoot">
                <Image Source="/test.jpg"  Height="460" Width="300"  Name="image1"/>
            </Grid>
            <Button Content="剪切" x:Name="button"></Button>
            <Image  Name="image2" />
        </StackPanel>
    </ScrollViewer>

10.2.1 截图区域的选择

截图区域的选择是指要动画手指滑动的方式来控制截图的位置和大小，那么在该例子里面实现的逻辑是以照片的中心为截图区域的中心，然后用户可以通过滑动来改变这个截图矩形的宽度和高度。那么我们实现的思路是，先要在图片上面添加一个矩形控件Rectangle，然后给这个Rectangle控件添加上ManipulationDelta事件，监控用户在截图矩形上面的滑动情况，在ManipulationDelta事件的处理程序上调整Rectangle控件的大小。代码如下所示：

MainPage.xaml.cs文件部分代码：截图区域的选择。
------------------------------------------------------------------------------------------------------------------
    public MainPage()
    {
        this.InitializeComponent();
        button.Click += button_Click;
        // 设置图片上方的截图区域
        SetPicture();
    }
    // 添加图片的截图区域
    void SetPicture()
    {
        // 创建一个Rectangle控件
        Rectangle rect = new Rectangle();
        rect.Opacity = 0.5;
        rect.Fill = new SolidColorBrush(Colors.White);
        rect.Height = image1.Height;
        rect.Width = image1.Width;
        rect.Stroke = new SolidColorBrush(Colors.Red);
        rect.StrokeThickness = 2;
        rect.Margin = image1.Margin;
        // 添加触摸滑动过程的事件监控
        rect.ManipulationMode = ManipulationModes.All;
        rect.ManipulationDelta += rect_ManipulationDelta;
        // 把Rectangle控件添加到LayoutRoot上，这时候该控件会出现在图片的上方
        LayoutRoot.Children.Add(rect);
        LayoutRoot.Height = image1.Height;
        LayoutRoot.Width = image1.Width;
    }
    // 利用手指滑动来改变截图框的位置和大小
    void rect_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        // 获取事件的发送方，也就是截图区域Rectangle控件
        Rectangle croppingRectangle = (Rectangle)sender;
        // 通过手指的位移来更改Rectangle控件的宽度和高度
        // 往右滑动宽度减少（X为正），往左滑动宽度增加（X为负）
        if (croppingRectangle.Width >= (int)e.Delta.Translation.X)
            croppingRectangle.Width -= (int)e.Delta.Translation.X;
        // 往下滑动高度减少（X为正），往上滑动高度增加（X为负）
        if (croppingRectangle.Height >= (int)e.Delta.Translation.Y)
            croppingRectangle.Height -= (int)e.Delta.Translation.Y;
    }

10.2.2 图片的局部截取

在截图区域已经定位好之后，接下来的这一步就是需要根据截图区域的位置来把图片截取出来，那么在这一步里面最主要的逻辑是把Rectangle控件的位置大小信息转化为image1图片里面的相对位置的区域信息，然后再通过Clip属性来进行截取。代码如下所示：

MainPage.xaml.cs文件部分代码：图片的局部截取。
------------------------------------------------------------------------------------------------------------------
    // 截取图片的区域
    void ClipImage()
    {
        // 创建一个矩形的几何图形，用于赋值给Clip属性，注意：做为属性使用的几何图形必须是*Geometry类型的图形
        RectangleGeometry geo = new RectangleGeometry();
        // 获取截图的矩形控件，通过Grid容器向下查找
        Rectangle r = (Rectangle)(from c in LayoutRoot.Children where c.Opacity == 0.5 select c).First();
        // 把截图的矩形控件的位置信息转换成为相对于Grid容器的位置信息
        GeneralTransform gt = r.TransformToVisual(LayoutRoot);
        // 获取截图区域左上角的坐标，意思是原来r的左上角坐标(0, 0)在LayoutRoot上的坐标的转换
        Point p = gt.TransformPoint(new Point(0, 0));
        // 创建相对于LayoutRoot上的截图区域
        geo.Rect = new Rect(p.X, p.Y, r.Width, r.Height);
        image1.Clip = geo;
        // 把截图控件隐藏起来
        r.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
    }

10.2.3 截图的展示

截图展示是指把最终截取的图片展示出来，通过Clip属性把图片截取出来之后，实际上并不是把图片给剪切了，它仅仅只是把其他区域的部分给挡住了而已，那么要把真是的截图区域获取出来，可以使用RenderTargetBitmap类来实现。RenderTargetBitmap类可以把将 UI元素对象转换为位图。代码如下所示：

MainPage.xaml.cs文件部分代码：截图的展示。
------------------------------------------------------------------------------------------------------------------
    //剪切按钮事件
    async void button_Click(object sender, RoutedEventArgs e)
    {
        // 调用ClipImage方法，实现图片的局部截取
        ClipImage();
        // 创建一个RenderTargetBitmap对象，并调用RenderAsync方法把UI元素LayoutRoot转化成为RenderTargetBitmap对象
        var bitmap = new RenderTargetBitmap();
        await bitmap.RenderAsync(LayoutRoot);
        // 由于RenderTargetBitmap类本来就是从ImageSource类派生的，所以可以直接复制给图片控件进行显示
        image2.Source = bitmap;
    }