基于WPF实现裁剪图像功能.docx

第

基于WPF实现裁剪图像功能

VisualStudio2025

使用Canvas展示选择的裁剪图片

使用4个Rectangle设置未选中区域分别是左上右下

中间展示当前的裁剪区域使用了Border移动

左右移动使用Canvas.SetLeft上下移动使用Canvas.SetTopBorder获取裁剪区域获取GetLeft、GetTop、Border的Width与Height

拉伸Border使用了之前截图控件使用的装饰器ScreenCutAdorner

新增装饰器不允许拉伸超出Canvas画布

实现代码

1）新建CropImage.cs控件代码如下:

using?System;

using?System.Windows;

using?System.Windows.Controls;

using?System.Windows.Documents;

using?System.Windows.Input;

using?System.Windows.Media;

using?System.Windows.Media.Imaging;

using?System.Windows.Shapes;

using?WPFDevelopers.Helpers;

namespace?WPFDevelopers.Controls

????[TemplatePart(Name?=?CanvasTemplateName,?Type?=?typeof(Canvas))]

????[TemplatePart(Name?=?RectangleLeftTemplateName,?Type?=?typeof(Rectangle))]

????[TemplatePart(Name?=?RectangleTopTemplateName,?Type?=?typeof(Rectangle))]

????[TemplatePart(Name?=?RectangleRightTemplateName,?Type?=?typeof(Rectangle))]

????[TemplatePart(Name?=?RectangleBottomTemplateName,?Type?=?typeof(Rectangle))]

????[TemplatePart(Name?=?BorderTemplateName,?Type?=?typeof(Border))]

????public?class?CropImage?:?Control

????{

????????private?const?string?CanvasTemplateName?=?PART_Canvas;

????????private?const?string?RectangleLeftTemplateName?=?PART_RectangleLeft;

????????private?const?string?RectangleTopTemplateName?=?PART_RectangleTop;

????????private?const?string?RectangleRightTemplateName?=?PART_RectangleRight;

????????private?const?string?RectangleBottomTemplateName?=?PART_RectangleBottom;

????????private?const?string?BorderTemplateName?=?PART_Border;

????????private?BitmapFrame?bitmapFrame;

????????private?Rectangle?_rectangleLeft,?_rectangleTop,?_rectangleRight,?_rectangleBottom;

????????private?Border?_border;

????????private?Canvas?_canvas;

????????public?ImageSource?Source

????????{

????????????get?{?return?(ImageSource)GetValue(SourceProperty);?}

????????????set?{?SetValue(SourceProperty,?value);?}

????????}

????????public?static?readonly?DependencyProperty?SourceProperty?=

????????????DependencyP