wp仿系统截图
2014-01-14 01:59 fat___lin 阅读(955) 评论(1) 编辑 收藏 举报wp上直接调用CameraCaptureTask，并没有参数设置截图大小，刚好项目需求要截成正方型，于是写了个仿系统截图的demo出来。
截图如下：
需要做的逻辑运算为：
1、初始化照片时：判断照片比例，如果相对页面比例太长或者太宽 ——>改变对图片进行缩放，使照片填充满整个截取框，并把缩放比例设置为最小缩放倍数等。
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; } } }
2、左右移动时：根据照片缩放倍数，判断照片边沿等。
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; } }
3、缩放时：使照片缓慢自动回到中间，且边沿不越过裁剪框等。
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; } }
注：由于放大缩小过程中计算到照片宽高值虽然是double类型，但也会丢失了一很小的一些数据。并不是做到绝对准确，为此，在左右移动，和缩放过程中分别加入了0.01和0.000001，的容错范围。（不加的话，会出现拖放到边沿，或者缩放到最小时出现跳动现象）
4、点击剪切时，计算所要剪辑位置，大小。通过对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); }
备注：
1、裁剪时，设置图片的clip属性除了方便显示到页面上，还有，得到clip的RectangleGeometry的编译量坐标点，和长宽时，我们也就很简单的得到了WriteableBitmap所要设置的参数。
2、WriteableBitmap截图时要记得调用wBitmap.Invalidate();方法，进行绘制。否则得到的只是一张全是黑色像素的图。
源代码请戳：https://files.cnblogs.com/fatlin/ImageCrop.rar
参考链接：http://www.dotblogs.com.tw/pou/archive/2013/06/24/105923.aspx
