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