wp仿系統截圖

wp上直接調用CameraCaptureTask，並無參數設置截圖大小，恰好項目需求要截成正方型，因而寫了個仿系統截圖的demo出來。

截圖以下：

   

須要作的邏輯運算爲：

一、初始化照片時：判斷照片比例，若是相對頁面比例太長或者太寬  ——>改變對圖片進行縮放，使照片填充滿整個截取框，並把縮放比例設置爲最小縮放倍數等。

void FitImage(double h,double w)
        {
            ////判斷是否存在applicationbar
            if (this.ApplicationBar != null)
            {
                pageheight -= 72;
            }
            //this.pageheight = this.ActualHeight;
            //this.pagewidth = this.ActualWidth;

            if (h / w > pageheight / pagewidth)
            {
                ImageY = pageheight;
                ImageX = pageheight * w / h;
            }
            else 
            {
                ImageX = pagewidth;
                ImageY = pagewidth * h / w;
            }

            if (h > w)
            {
                if (resize / pageheight > w / h)
                {
                    //太長，須要修改Scale（scale=resize*pixh/(pageh*pw)）
                    minscale = img_composite.ScaleX = img_composite.ScaleY = resize * h / (pageheight * w);
                }
                else 
                {
                    minscale = resize / ImageX;
                }
            }
            else 
            {
                if (resize / pagewidth > h / w)
                {
                    //太寬，須要修改Scale
                    minscale = img_composite.ScaleX = img_composite.ScaleY = resize * w / (pagewidth * h);
                }
                else 
                {
                    minscale = resize / ImageY;
                }
            }
        }

View Code

二、左右移動時：根據照片縮放倍數，判斷照片邊沿等。

private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
        {

            //垂直偏移
            if (img_composite.TranslateY >= (ImageY * img_composite.ScaleX - resize) / 2-0.01)
            {
                img_composite.TranslateY = (ImageY * img_composite.ScaleX - resize) / 2;

                if (e.VerticalChange < 0)
                    img_composite.TranslateY += e.VerticalChange;
            }
            else if (img_composite.TranslateY <= -(ImageY * img_composite.ScaleX - resize) / 2 + 0.01)
            {
                img_composite.TranslateY = -(ImageY * img_composite.ScaleX - resize) / 2;
                if (e.VerticalChange > 0)
                    img_composite.TranslateY += e.VerticalChange;
            }
            else
            {
                img_composite.TranslateY += e.VerticalChange;
            }

            //水平偏移
            if (img_composite.TranslateX >= (ImageX * img_composite.ScaleX - resize) / 2 - 0.01)
            {
                img_composite.TranslateX = (ImageX * img_composite.ScaleX - resize) / 2;
                if (e.HorizontalChange < 0)
                    img_composite.TranslateX += e.HorizontalChange;
            }
            else if (img_composite.TranslateX <= -(ImageX * img_composite.ScaleX - resize) / 2 + 0.01)
            {
                img_composite.TranslateX = -(ImageX * img_composite.ScaleX - resize) / 2;
                if (e.HorizontalChange > 0)
                    img_composite.TranslateX += e.HorizontalChange;
            }
            else
            {
                img_composite.TranslateX += e.HorizontalChange;
            }

            //Debug.WriteLine("TranslateY:" + img_composite.TranslateY + ",e.VerticalChange:" + e.VerticalChange);
            //Debug.WriteLine((ImageY * img_composite.ScaleX - resize) / 2);
        }
        private void GestureListener_DragCompleted(object sender, DragCompletedGestureEventArgs e)
        {
            if (img_composite.TranslateY > (ImageY * img_composite.ScaleX - resize) / 2)
            {
                img_composite.TranslateY = (ImageY * img_composite.ScaleX - resize) / 2;
            }
            else if (img_composite.TranslateY < -(ImageY * img_composite.ScaleX - resize) / 2)
            {
                img_composite.TranslateY = -(ImageY * img_composite.ScaleX - resize) / 2;
            }


            if (img_composite.TranslateX > (ImageX * img_composite.ScaleX - resize) / 2)
            {
                img_composite.TranslateX = (ImageX * img_composite.ScaleX - resize) / 2;
            }
            else if (img_composite.TranslateX < -(ImageX * img_composite.ScaleX - resize) / 2)
            {
                img_composite.TranslateX = -(ImageX * img_composite.ScaleX - resize) / 2;
            }
        }

View Code

三、縮放時：使照片緩慢自動回到中間，且邊沿不越過裁剪框等。

private void GestureListener_PinchDelta(object sender, PinchGestureEventArgs e)
        {
            if (e.DistanceRatio <= 1 && img_composite.ScaleX <= (minscale+0.000001))
            {
                img_composite.ScaleX=img_composite.ScaleY = minscale;
                return;
            }
            img_composite.ScaleX = img_composite.ScaleY = initialScale * e.DistanceRatio;

            //縮放的同時讓圖片回到正中間
            if (e.DistanceRatio < 1)
            {
                if (btimage.PixelHeight > btimage.PixelWidth)
                {
                    if (resize / ImageY > btimage.PixelWidth / btimage.PixelHeight)
                    {
                        //太長，改水平偏移
                        img_composite.TranslateX = img_composite.TranslateX * (img_composite.ScaleX / minscale - 1);
                        //img_composite.TranslateY = initialTranslateY * e.DistanceRatio;

                        //修改垂直偏移
                        if (img_composite.TranslateY >= (ImageY * img_composite.ScaleX - resize) / 2)
                        {
                            img_composite.TranslateY = (ImageY * img_composite.ScaleX - resize) / 2;
                        }
                        else if (img_composite.TranslateY <= -(ImageY * img_composite.ScaleX - resize) / 2)
                        {
                            img_composite.TranslateY = -(ImageY * img_composite.ScaleX - resize) / 2;
                        }

                    }
                }
                else
                {
                    if (resize / ImageX > btimage.PixelHeight / btimage.PixelWidth)
                    {
                        //太寬，改垂直偏移
                        img_composite.TranslateY = img_composite.TranslateY * (img_composite.ScaleX / minscale - 1);
                        //修改水平偏移
                        if (img_composite.TranslateX >= (ImageX * img_composite.ScaleX - resize) / 2)
                        {
                            img_composite.TranslateX = (ImageX * img_composite.ScaleX - resize) / 2;
                        }
                        else if (img_composite.TranslateX <= -(ImageX * img_composite.ScaleX - resize) / 2)
                        {
                            img_composite.TranslateX = -(ImageX * img_composite.ScaleX - resize) / 2;
                        }
                    }
                }

            }
            Debug.WriteLine("ScaleY:" + img_composite.ScaleY + ",ScaleX:" + img_composite.ScaleX);
        }

        private void GestureListener_PinchStarted(object sender, PinchStartedGestureEventArgs e)
        {
            initialScale = img_composite.ScaleX;
        }

        private void GestureListener_PinchCompleted(object sender, PinchGestureEventArgs e)
        {
            if (img_composite.ScaleX <= minscale)
            {
                img_composite.ScaleX = img_composite.ScaleY = minscale;
            }

            //修改垂直偏移
            if (img_composite.TranslateY >= (ImageY * img_composite.ScaleX - resize) / 2)
            {
                img_composite.TranslateY = (ImageY * img_composite.ScaleX - resize) / 2;
            }
            else if (img_composite.TranslateY <= -(ImageY * img_composite.ScaleX - resize) / 2)
            {
                img_composite.TranslateY = -(ImageY * img_composite.ScaleX - resize) / 2;
            }

            //修改水平偏移
            if (img_composite.TranslateX >= (ImageX * img_composite.ScaleX - resize) / 2)
            {
                img_composite.TranslateX = (ImageX * img_composite.ScaleX - resize) / 2;
            }
            else if (img_composite.TranslateX <= -(ImageX * img_composite.ScaleX - resize) / 2)
            {
                img_composite.TranslateX = -(ImageX * img_composite.ScaleX - resize) / 2;
            }
        }

View Code

注：因爲放大縮小過程當中計算到照片寬高值雖然是double類型，但也會丟失了一很小的一些數據。並非作到絕對準確，爲此，在左右移動，和縮放過程當中分別加入了0.01和0.000001，的容錯範圍。（不加的話，會出現拖放到邊沿，或者縮放到最小時出現跳動現象）

四、點擊剪切時，計算所要剪輯位置，大小。經過對image的clip屬性設置RectangleGeometry，直接在頁面顯示裁剪後的圖片。並經過WriteableBitmap獲取到裁剪後的圖片，並保存到本地媒體庫。

 void ClipImage()
        {
            //利用Rectangle創建RectangleGeometry指定要用來裁剪的大小
            RectangleGeometry geo = new RectangleGeometry();

            double x; double y;

            x = ((ImageX * img_composite.ScaleX - resize) / 2 - img_composite.TranslateX) / img_composite.ScaleX;
            y = ((ImageY * img_composite.ScaleX - resize) / 2 - img_composite.TranslateY) / img_composite.ScaleX;
            redussize = resize / img_composite.ScaleX;


            geo.Rect = new Rect(x, y, redussize, redussize);


            // 對image進行裁剪
            image.Clip = geo;
        }
        void WriteBitmap(Image element)
        {
            TranslateTransform t = new TranslateTransform();
            t.X = -((ImageX * img_composite.ScaleX - resize) / 2 - img_composite.TranslateX) / img_composite.ScaleX;
            t.Y = -((ImageY * img_composite.ScaleX - resize) / 2 - img_composite.TranslateY) / img_composite.ScaleX;

            WriteableBitmap wBitmap = new WriteableBitmap((int)redussize, (int)redussize);
            wBitmap.Render(element, t);
            wBitmap.Invalidate();
            string tempJPEG = "TempJPEG.jpg";

            using (var iso = IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (var fileStream = iso.OpenFile(tempJPEG, FileMode.Create, FileAccess.Write))
                {
                    wBitmap.SaveJpeg(fileStream, wBitmap.PixelWidth, wBitmap.PixelHeight, 0, 100);
                }
                using (var imageStream = iso.OpenFile(tempJPEG, FileMode.Open, FileAccess.Read))
                {
                    MediaLibrary mediaLibrary = new MediaLibrary();
                    Picture pic = mediaLibrary.SavePicture("SavedLogo.jpg", imageStream);
                }
            }
            MessageBox.Show("保存成功！", "提示", MessageBoxButton.OK);
        }

View Code

 

備註：

一、裁剪時，設置圖片的clip屬性除了方便顯示到頁面上，還有，獲得clip的RectangleGeometry的編譯量座標點，和長寬時，咱們也就很簡單的獲得了WriteableBitmap所要設置的參數。

二、WriteableBitmap截圖時要記得調用wBitmap.Invalidate();方法，進行繪製。不然獲得的只是一張全是黑色像素的圖。

 

源代碼請戳：http://files.cnblogs.com/fatlin/ImageCrop.rar

 

參考連接：http://www.dotblogs.com.tw/pou/archive/2013/06/24/105923.aspx