在專案中經常會遇到上傳影像，并且在上傳圖片之前可以對影像進行修改，比如下面這個 采用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>
錄制效果有些卡頓，實際操作還算流暢， 完整原始碼，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/239361.html
標籤：.NET技术