效果
功能
使用wpf实现
- 在图片上画一个矩形框
- 该矩形框可以调节大小
- 该矩形框可以拖动调整位置
注:这里的鼠标事件是,双击在图上画一个固定大小的矩形框,右键按住拖动矩形框。有需要的可以自行调整对应的鼠标事件
参考资料:https://blog.csdn.net/u013113678/article/details/121466724
实现代码
实现自定义的装饰器(可以直接整个复制使用)
csharp
public class CanvasAdorner : Adorner
{
//4条边
Thumb _leftThumb, _topThumb, _rightThumb, _bottomThumb;
//4个角
Thumb _lefTopThumb, _rightTopThumb, _rightBottomThumb, _leftbottomThumb;
Ellipse _centerPoint;
private const double thumbSize = 6;
private const double centerPointRadius = 3;
Grid _grid;
UIElement _adornedElement;
UIElement _parentElement;
public CanvasAdorner(UIElement adornedElement, UIElement adornedParentElement) : base(adornedElement)
{
_adornedElement = adornedElement;
_parentElement = adornedParentElement;
// 中心点
_centerPoint = new Ellipse
{
Width = centerPointRadius * 2,
Height = centerPointRadius * 2,
Fill = Brushes.Red,
Stroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#999999")),
StrokeThickness = 2,
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
};
//初始化thumb缩放手柄
_leftThumb = CreateThumb(HorizontalAlignment.Left, VerticalAlignment.Center, Cursors.SizeWE);
_topThumb = CreateThumb(HorizontalAlignment.Center, VerticalAlignment.Top, Cursors.SizeNS);
_rightThumb = CreateThumb(HorizontalAlignment.Right, VerticalAlignment.Center, Cursors.SizeWE);
_bottomThumb = CreateThumb(HorizontalAlignment.Center, VerticalAlignment.Bottom, Cursors.SizeNS);
_lefTopThumb = CreateThumb(HorizontalAlignment.Left, VerticalAlignment.Top, Cursors.SizeNWSE);
_rightTopThumb = CreateThumb(HorizontalAlignment.Right, VerticalAlignment.Top, Cursors.SizeNESW);
_rightBottomThumb = CreateThumb(HorizontalAlignment.Right, VerticalAlignment.Bottom, Cursors.SizeNWSE);
_leftbottomThumb = CreateThumb(HorizontalAlignment.Left, VerticalAlignment.Bottom, Cursors.SizeNESW);
_grid = new Grid();
_grid.Children.Add(_leftThumb);
_grid.Children.Add(_topThumb);
_grid.Children.Add(_rightThumb);
_grid.Children.Add(_bottomThumb);
_grid.Children.Add(_lefTopThumb);
_grid.Children.Add(_rightTopThumb);
_grid.Children.Add(_rightBottomThumb);
_grid.Children.Add(_leftbottomThumb);
AddVisualChild(_grid);
// 绘制中心点和x,y坐标轴
_grid.Children.Add(_centerPoint);
DrawAxisWithArrow(0,15,0,0,isXAxis: true);
DrawAxisWithArrow(0, 0, 10, 25, isXAxis: false);
}
protected override Visual GetVisualChild(int index)
{
return _grid;
}
protected override int VisualChildrenCount
{
get
{
return 1;
}
}
protected override Size ArrangeOverride(Size finalSize)
{
//直接给grid布局,grid内部的thumb会自动布局。
_grid.Arrange(new Rect(new Point(-_leftThumb.Width / 2, -_leftThumb.Height / 2), new Size(finalSize.Width + _leftThumb.Width, finalSize.Height + _leftThumb.Height)));
return finalSize;
}
// 创建缩放手柄
private Thumb CreateThumb(HorizontalAlignment horizontalAlignment, VerticalAlignment verticalAlignment, Cursor cursor)
{
var thumb = new Thumb
{
Width = thumbSize,
Height = thumbSize,
HorizontalAlignment = horizontalAlignment,
VerticalAlignment = verticalAlignment,
Background = Brushes.Green,
Cursor = cursor,
Template = new ControlTemplate(typeof(Thumb))
{
VisualTree = GetFactory(new SolidColorBrush(Colors.White))
},
};
thumb.DragDelta += Thumb_DragDelta;
return thumb;
}
// 缩放手柄resize逻辑
private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
{
var c = _adornedElement as FrameworkElement;
var p = _parentElement as FrameworkElement;
var thumb = sender as FrameworkElement;
double left, top, width, height;
if (thumb.HorizontalAlignment == HorizontalAlignment.Left)
{
left = double.IsNaN(Canvas.GetLeft(c)) ? 0 : Canvas.GetLeft(c) + e.HorizontalChange;
width = c.Width - e.HorizontalChange;
// 确保不会超出 Canvas 左边界
if (left < 0)
{
width += left; // 减少宽度以适应左侧边界
left = 0; // 不能再向左移动
}
}
else
{
left = Canvas.GetLeft(c);
width = c.Width + e.HorizontalChange;
// 确保不会超出 Canvas 右边界
if (left + width > p.Width)
{
width = p.Width - left; // 减少宽度以适应右侧边界
}
}
if (thumb.VerticalAlignment == VerticalAlignment.Top)
{
top = double.IsNaN(Canvas.GetTop(c)) ? 0 : Canvas.GetTop(c) + e.VerticalChange;
height = c.Height - e.VerticalChange;
// 确保不会超出 Canvas 上边界
if (top < 0)
{
height += top; // 减少高度以适应上侧边界
top = 0; // 不能再向上移动
}
}
else
{
top = Canvas.GetTop(c);
height = c.Height + e.VerticalChange;
// 确保不会超出 Canvas 下边界
if (top + height > p.Height)
{
height = p.Height - top; // 减少高度以适应下侧边界
}
}
if (thumb.HorizontalAlignment != HorizontalAlignment.Center)
{
if (width >= 0)
{
Canvas.SetLeft(c, left);
c.Width = width;
}
}
if (thumb.VerticalAlignment != VerticalAlignment.Center)
{
if (height >= 0)
{
Canvas.SetTop(c, top);
c.Height = height;
}
}
}
private void DrawAxisWithArrow(int x1, int x2, int y1, int y2, bool isXAxis)
{
// 绘制主轴线
Line axisLine = new Line
{
X1 = x1,
Y1 = y1,
X2 = x2,
Y2 = y2,
Stroke = Brushes.GreenYellow,
StrokeThickness = 1,
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
Margin = new Thickness { Left = x2, Top = 0, Right = 0, Bottom = 0 }
};
_grid.Children.Add(axisLine);
// 绘制箭头
TextBlock textBlock = new TextBlock
{
Text=isXAxis?"> x": "∨y",
Foreground = Brushes.GreenYellow,
HorizontalAlignment= HorizontalAlignment.Center,
VerticalAlignment= VerticalAlignment.Center,
Margin= new Thickness { Left= isXAxis ? x2 * 2:5, Top=y2, Right=0, Bottom= isXAxis ? 2.5:0 }
};
_grid.Children.Add(textBlock);
}
//thumb的样式
FrameworkElementFactory GetFactory(Brush back)
{
var fef = new FrameworkElementFactory(typeof(Ellipse));
fef.SetValue(Ellipse.FillProperty, back);
fef.SetValue(Ellipse.StrokeProperty, new SolidColorBrush((Color)ColorConverter.ConvertFromString("#999999")));
fef.SetValue(Ellipse.StrokeThicknessProperty, (double)2);
return fef;
}
}
xaml前台代码(根据自己实际情况调整图片的Source和Canvas的Width、Height,这里我的图片是绑定viewmodel的值,Canvas的宽高是始终跟图片大小一致)
xml
<Grid Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image x:Name="imageView" Stretch="Uniform" Source="{Binding LoadTemplate}"
MouseLeftButtonDown="Image_MouseLeftButtonDown"/>
<Canvas x:Name="overlayCanvas"
Width="{Binding ActualWidth, ElementName=imageView}"
Height="{Binding ActualHeight, ElementName=imageView}"
/>
</Grid>
xaml后台代码(截取相关代码)
csharp
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Documents;
using System.Windows.Input;
private Rectangle _currentRectangle;
private bool _isDragging = false;
private Point _startPoint;
private Point _originalRectanglePosition;
private DateTime _lastClickTime = DateTime.MinValue;
// 图片点击事件
private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
// 双击
DateTime currentClickTime = DateTime.Now;
TimeSpan timeSinceLastClick = currentClickTime - _lastClickTime;
_lastClickTime = currentClickTime;
if (timeSinceLastClick.TotalMilliseconds >= 300) return;
if (_currentRectangle != null)
{
ResetCanvas();
}
Point clickPosition = e.GetPosition(overlayCanvas);
double rectWidth = 100;
double rectHeight = 100;
double rectLeft = clickPosition.X - rectWidth / 2;
double rectTop = clickPosition.Y - rectHeight / 2;
// 确保矩形框不会超出 Canvas 的左边界
if (rectLeft < 0)
{
rectLeft = 0;
}
// 确保矩形框不会超出 Canvas 的右边界
if (rectLeft + rectWidth > overlayCanvas.Width)
{
rectLeft = overlayCanvas.Width - rectWidth;
}
// 确保矩形框不会超出 Canvas 的上边界
if (rectTop < 0)
{
rectTop = 0;
}
// 确保矩形框不会超出 Canvas 的下边界
if (rectTop + rectHeight > overlayCanvas.Height)
{
rectTop = overlayCanvas.Height - rectHeight;
}
_currentRectangle = new Rectangle
{
Width = rectWidth,
Height = rectHeight,
Stroke = Brushes.Red,
Fill = Brushes.Transparent,
StrokeThickness = 1
};
Canvas.SetLeft(_currentRectangle, rectLeft);
Canvas.SetTop(_currentRectangle, rectTop);
overlayCanvas.Children.Add(_currentRectangle);
// 为矩形添加resize装饰器
var layer = AdornerLayer.GetAdornerLayer(_currentRectangle);
layer.Add(new CanvasAdorner(_currentRectangle, overlayCanvas));
// 为矩形添加拖动事件
_currentRectangle.MouseRightButtonDown += Rectangle_MouseLeftButtonDown;
_currentRectangle.MouseMove += Rectangle_MouseMove;
_currentRectangle.MouseRightButtonUp += Rectangle_MouseLeftButtonUp;
_currentRectangle.MouseEnter += Rectangle_MouseEnter;
}
private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (e.RightButton == MouseButtonState.Pressed)
{
_isDragging = true;
_startPoint = e.GetPosition(overlayCanvas);
_originalRectanglePosition = new Point(Canvas.GetLeft(_currentRectangle), Canvas.GetTop(_currentRectangle));
_currentRectangle.CaptureMouse();
}
}
private void Rectangle_MouseMove(object sender, MouseEventArgs e)
{
if (_isDragging)
{
Point currentPosition = e.GetPosition(overlayCanvas);
// 计算矩形的新位置
double newLeft = _originalRectanglePosition.X+ (currentPosition.X - _startPoint.X);
double newTop = _originalRectanglePosition.Y + (currentPosition.Y - _startPoint.Y);
// 限制矩形不超出 Canvas 边界
newLeft = Math.Max(0, Math.Min(newLeft, overlayCanvas.Width - _currentRectangle.Width));
newTop = Math.Max(0, Math.Min(newTop, overlayCanvas.Height - _currentRectangle.Height));
// 更新矩形的位置
Canvas.SetLeft(_currentRectangle, newLeft);
Canvas.SetTop(_currentRectangle, newTop);
}
}
private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_isDragging = false;
_currentRectangle.ReleaseMouseCapture();
}
private void Rectangle_MouseEnter(object sender, MouseEventArgs e)
{
_currentRectangle.Cursor = Cursors.SizeAll;
}