WPF圖像裁剪控件

 在項目中經常會遇到上傳圖像，並且在上傳圖片之前可以對圖像進行修改，比如下面這個 采用vue做的后台管理系統，有這樣的功能。

具體見下圖：

  

 Wpf客戶端也有這樣需求，於是用Wpf模擬下。直接上效果。

總結一下當時遇到的主要幾個問題。

1、裁剪區域透明 可以調整大小和移動，調整后也需要保持透明。

2、背景圖像移動、縮放需要與預覽同步

3、最底層的那個圖像需要保持不失幀 

解決方法

問題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>

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