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>

　　錄製效果有些卡頓，實際操做還算流暢， 完整源碼。