[深刻淺出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;
    }

本文來源於《深刻淺出Windows Phone 8.1 應用開發》

WP8.1 Runtime文章列表：http://www.cnblogs.com/linzheng/p/3998037.html

源代碼下載：http://vdisk.weibo.com/s/zt_pyrfNHb99O

歡迎關注個人微博@WP林政   微信公衆號：wp開發（號：wpkaifa）

WP8.1技術交流羣：372552293