WPF图像裁剪控件

 在项目中常常会遇到上传图像，而且在上传图片以前能够对图像进行修改，好比下面这个 采用vue作的后台管理系统，有这样的功能。

具体见下图：

  

 Wpf客户端也有这样需求，因而用Wpf模拟下。直接上效果。

总结一下当时遇到的主要几个问题。

一、裁剪区域透明 能够调整大小和移动，调整后也须要保持透明。

二、背景图像移动、缩放须要与预览同步

三、最底层的那个图像须要保持不失帧 

解决方法

问题1，布局采用左右上下，中间变化的时候 改变其余大小， 其余四个区域用一层半透明遮挡。

问题2，记录放大缩小倍数 和移动位置，好在原始图片上进行裁剪

问题3  图片容易失帧，就采起绘制，背景样式以下:

<DrawingBrush x:Key="background"
                      TileMode="Tile"
                      Viewport="0,0,20,20"
                      ViewportUnits="Absolute">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing>
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0,0,0.5,0.5" />
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Brush>
                                <SolidColorBrush Color="#7f7f7f" />
                            </GeometryDrawing.Brush>
                        </GeometryDrawing>

                        <GeometryDrawing>
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0.5,0,0.5,0.5" />
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Brush>
                                <SolidColorBrush Color="#666666" />
                            </GeometryDrawing.Brush>
                        </GeometryDrawing>
                        <GeometryDrawing>
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0,0.5,0.5,0.5" />
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Brush>
                                <SolidColorBrush Color="#666666" />
                            </GeometryDrawing.Brush>
                        </GeometryDrawing>
                        <GeometryDrawing>
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0.5,0.5,0.5,0.5" />
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Brush>
                                <SolidColorBrush Color="#7f7f7f" />
                            </GeometryDrawing.Brush>
                        </GeometryDrawing>
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>

　　录制效果有些卡顿，实际操做还算流畅， 完整源码。