1. 矩形框控件效果如何？
- 上下左右等8点可以拉伸
- 鼠标滑轮支持缩放，矩形框边框等比例缩放
- 选中矩形框左右拖拽
- 返回矩形框区域对应的图片的X,Y坐标
- 可同时支持多个矩形框
2. 矩形框使用方式？
//矩形框控件添加背景图片
rockRectControl.BackImage = bitmap;
//声明一个矩形框,传入左上角和右下角坐标
RockRectangle rect = new RockRectangle();
var p1 = item.DistinguishRegion.LeftTopCorner;
var p2 = item.DistinguishRegion.RightBottomCorner;
rect.Rectangle = Rectangle.FromLTRB((int)p1.X, (int)p1.Y, (int)p2.X, (int)p2.Y);
//把矩形框添加到矩形框控件中，可以添加多个矩形
rockRectControl.RockRectangles.Add(rect);
//找到矩形控件中某一个矩形框
Rectangle r = rockRectControl.RockRectangles[i].Rectangle;
//直接读取即可
var rp = new RockRegion();
rp.LeftTopCorner.X = r.X;
rp.LeftTopCorner.Y = r.Y;
rp.RightBottomCorner.X = r.Right;
rp.RightBottomCorner.Y = r.Bottom;
3. 矩形框控件源码？
using System.Drawing;
namespace NcModule.Tools;
[Serializable]
public class RockRectangle
{
private List<LittleRectangle> littleRectangles = new List<LittleRectangle>();
public Rectangle Rectangle { set; get; }
internal List<LittleRectangle> GetLittleRectangles()
{
littleRectangles.Clear();
littleRectangles.Add(new LittleRectangle(Rectangle, PosSizableRect.LeftUp));
littleRectangles.Add(new LittleRectangle(Rectangle, PosSizableRect.LeftMiddle));
littleRectangles.Add(new LittleRectangle(Rectangle, PosSizableRect.LeftBottom));
littleRectangles.Add(new LittleRectangle(Rectangle, PosSizableRect.BottomMiddle));
littleRectangles.Add(new LittleRectangle(Rectangle, PosSizableRect.RightUp));
littleRectangles.Add(new LittleRectangle(Rectangle, PosSizableRect.RightBottom));
littleRectangles.Add(new LittleRectangle(Rectangle, PosSizableRect.RightMiddle));
littleRectangles.Add(new LittleRectangle(Rectangle, PosSizableRect.UpMiddle));
return littleRectangles;
}
public double RotationAngle { set; get; }
}
internal class LittleRectangle
{
//小矩形的宽度
private int rectangleWidth = 8;
/// <summary>
/// 矩形放大的倍数
/// </summary>
public static double Enlarge = 1;
/// <summary>
/// 小矩形的位置
/// </summary>
public PosSizableRect Location { set; get; }
public Rectangle Rectangle { set; get; }
public LittleRectangle(Rectangle rect, PosSizableRect location)
{
this.Location = location;
switch (location)
{
case PosSizableRect.LeftUp:
this.Rectangle = createRectSizableNode(rect.X, rect.Y); break;
case PosSizableRect.LeftMiddle:
this.Rectangle = createRectSizableNode(rect.X, rect.Y + +rect.Height / 2); break;
case PosSizableRect.LeftBottom:
this.Rectangle = createRectSizableNode(rect.X, rect.Y + rect.Height); break;
case PosSizableRect.BottomMiddle:
this.Rectangle = createRectSizableNode(rect.X + rect.Width / 2, rect.Y + rect.Height); break;
case PosSizableRect.RightUp:
this.Rectangle = createRectSizableNode(rect.X + rect.Width, rect.Y); break;
case PosSizableRect.RightBottom:
this.Rectangle = createRectSizableNode(rect.X + rect.Width, rect.Y + rect.Height); break;
case PosSizableRect.RightMiddle:
this.Rectangle = createRectSizableNode(rect.X + rect.Width, rect.Y + rect.Height / 2); break;
case PosSizableRect.UpMiddle:
this.Rectangle = createRectSizableNode(rect.X + rect.Width / 2, rect.Y); break;
default:
this.Rectangle = new Rectangle(); break;
}
}
private Rectangle createRectSizableNode(int x, int y)
{
int rectWidth = (int)(rectangleWidth * Enlarge);
if (rectWidth < rectangleWidth)
{
Enlarge = 1;
rectWidth = rectangleWidth;
}
return new Rectangle(x - rectWidth / 2, y - rectWidth / 2, rectWidth, rectWidth);
}
}
internal enum PosSizableRect
{
UpMiddle,
LeftMiddle,
LeftBottom,
LeftUp,
RightUp,
RightMiddle,
RightBottom,
BottomMiddle,
None
};
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Windows.Forms;
namespace NcModule.Tools;
public partial class RockRectControl : UserControl
{
private Color borderColor = Color.Green;
private float borderWidth = 2;
private float defaultFontSize = 16;
private List<RockRectangle> rockRectangles = new List<RockRectangle>();
//是否显示序号
private bool isPrintNum = true;
private Font font = new Font("宋体", 16, FontStyle.Bold);
//背景图片
private Image backImage = default!;
//图片有效区域
private Rectangle effectiveRect = default(Rectangle);
//缩放比例,用double多次运算后会失真，故用百分比
private int zoomScale = 100;//图片本身的缩放比例
private int oldZoomScale = 100;
private int zoomMinScale = 60;
private int zoomMaxScale = 500;
private int stepScale = 20;//每次缩放比例
private Bitmap cloneBackImage = default!;
private double imageScale;//真实图片与显示是的缩放比例
private Point realImageCorePoint = new Point();//真实图片的中心点坐标偏移量，当放大或拖拽 时中心点发生变更
private Point wheelPoint = new Point();//滚动时的坐标
private bool zoomScaleIsUpdate = true;
public Image BackImage
{
set
{
this.backImage = value;
if (this.backImage != null)
{
//黑白图，故格式用Format16bppRgb555，可以降低内存
cloneBackImage = new Bitmap(this.backImage.Width, this.backImage.Height, PixelFormat.Format16bppRgb555);
}
}
get { return this.backImage; }
}
/// <summary>
/// 矩形框的颜色
/// </summary>
public Color BorderColor
{
set { this.borderColor = value; }
get { return this.borderColor; }
}
/// <summary>
/// 矩形框边框的粗细
/// </summary>
public float BorderWidth
{
set { this.borderWidth = value; }
get { return this.borderWidth; }
}
public List<RockRectangle> RockRectangles
{
get { return this.rockRectangles; }
}
public RockRectControl()
{
InitializeComponent();
this.init();
}
private void init()
{
//双缓冲
this.DoubleBuffered = true;
}
private void setFitImageRect()
{
if (this.cloneBackImage == null)
{
return;
}
double imageAspect = this.cloneBackImage.Width * 1.0 / this.cloneBackImage.Height;
double controlAspect = this.Width * 1.0 / this.Height;
//以高为主
if (imageAspect < controlAspect)
{
double imageHeight = this.Height;
double imageWidth = imageHeight * imageAspect;
int x = (int)((this.Width - imageWidth) / 2);
this.effectiveRect = new Rectangle(x, 0, (int)imageWidth, (int)imageHeight);
}
else
{
//以宽为主
double imageWidth = this.Width;
double imageHeight = imageWidth / imageAspect;
int y = (int)((this.Height - imageHeight) / 2);
this.effectiveRect = new Rectangle(0, y, (int)imageWidth, (int)imageHeight);
}
this.imageScale = this.cloneBackImage.Width * 1.0 / this.effectiveRect.Width;
//放大的最大值，只能放大到图片本来的大小
this.zoomMaxScale = (int)Math.Round(imageScale * 100);
}
//记录移动前鼠标的位置
private int oldCursorX, oldCursorY;
private int selectRectIndex = -1;
private PosSizableRect selectLocation = PosSizableRect.None;
protected override void OnMouseDown(MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
if (this.effectiveRect.Contains(e.Location))
{
Point imageP = this.localPoint2ImagePoint(e.Location);
this.oldCursorX = imageP.X;
this.oldCursorY = imageP.Y;
this.changeCursor(imageP, true);
if (selectLocation != PosSizableRect.None)
{
return;
}
//判断当前位置是在哪个矩形内
foreach (var item in this.RockRectangles)
{
if (this.isInRect(imageP, item.Rectangle, item.RotationAngle))
{
this.selectRectIndex = this.RockRectangles.IndexOf(item);
return;
}
}
}
}
selectRectIndex = -1;
}
protected override void OnMouseUp(MouseEventArgs e)
{
selectRectIndex = -1;
selectLocation = PosSizableRect.None;
this.Invalidate();
}
protected override void OnMouseMove(MouseEventArgs le)
{
if (le.Button == MouseButtons.Left)
{
if (this.selectRectIndex != -1)
{
Rectangle rect = this.RockRectangles[this.selectRectIndex].Rectangle;
Point e = this.localPoint2ImagePoint(le.Location);
switch (selectLocation)
{
case PosSizableRect.LeftUp:
rect.X += e.X - oldCursorX;
rect.Width -= e.X - oldCursorX;
rect.Y += e.Y - oldCursorY;
rect.Height -= e.Y - oldCursorY;
break;
case PosSizableRect.LeftMiddle:
rect.X += e.X - oldCursorX;
rect.Width -= e.X - oldCursorX;
break;
case PosSizableRect.LeftBottom:
rect.Width -= e.X - oldCursorX;
rect.X += e.X - oldCursorX;
rect.Height += e.Y - oldCursorY;
break;
case PosSizableRect.BottomMiddle:
rect.Height += e.Y - oldCursorY;
break;
case PosSizableRect.RightUp:
rect.Width += e.X - oldCursorX;
rect.Y += e.Y - oldCursorY;
rect.Height -= e.Y - oldCursorY;
break;
case PosSizableRect.RightBottom:
rect.Width += e.X - oldCursorX;
rect.Height += e.Y - oldCursorY;
break;
case PosSizableRect.RightMiddle:
rect.Width += e.X - oldCursorX;
break;
case PosSizableRect.UpMiddle:
rect.Y += e.Y - oldCursorY;
rect.Height -= e.Y - oldCursorY;
break;
default:
rect.X = rect.X + e.X - this.oldCursorX;
rect.Y = rect.Y + e.Y - this.oldCursorY;
break;
}
this.RockRectangles[this.selectRectIndex].Rectangle = rect;
this.oldCursorX = e.X;
this.oldCursorY = e.Y;
Invalidate();
}
}
else
{
if (this.effectiveRect.Contains(le.Location))
{
this.changeCursor(this.localPoint2ImagePoint(le.Location));
}
else
{
this.Cursor = Cursors.Default;
}
}
}
protected override void OnMouseWheel(MouseEventArgs e)
{
this.wheelPoint = this.localPoint2ImagePoint(e.Location);
if (e.Delta > 0)//上滚放大
{
if (this.zoomScale < this.zoomMaxScale)
{
this.stepScale = Math.Abs(this.stepScale);
this.zoomScale += this.stepScale;
}
}
else
{
//下滚缩小
if (this.zoomScale > this.zoomMinScale)
{
this.stepScale = -Math.Abs(this.stepScale);
this.zoomScale += this.stepScale;
}
}
this.Invalidate();
}
protected override void OnSizeChanged(EventArgs e)
{
this.Invalidate();
}
protected override void OnPaint(PaintEventArgs pe)
{
//背景图片存在才绘制
if (this.cloneBackImage != null)
{
this.setFitImageRect();
//把矩形画在背景图片上
this.paintRect();
//把图片绘制到界面上
this.paintImageToControl(pe.Graphics);
}
}
//在背景图片上画框
private void paintRect()
{
var g = Graphics.FromImage(cloneBackImage);
//画背景图
g.DrawImage(this.backImage, 0, 0, cloneBackImage.Width, cloneBackImage.Height);
//画的线平滑
//g.InterpolationMode = InterpolationMode.Low;
//设置高质量,低速度呈现平滑程度
//g.SmoothingMode = SmoothingMode.HighSpeed;
g.CompositingQuality = CompositingQuality.AssumeLinear;
//在图像上矩形
using (var path = new GraphicsPath())
{
foreach (var item in this.RockRectangles)
{
//动态加粗线条
double enlarge = this.imageScale * 100 / this.zoomScale;
float nBorderWidth = (float)(this.borderWidth * enlarge);
if (nBorderWidth < this.borderWidth)
{
nBorderWidth = this.borderWidth;
}
LittleRectangle.Enlarge = enlarge;
this.font = new Font("宋体", (float)(this.defaultFontSize * enlarge), FontStyle.Bold);
path.Reset();
this.getPath(path, item.Rectangle, item.RotationAngle);
g.DrawPath(new Pen(this.borderColor, nBorderWidth), path);
//写序号
if (this.isPrintNum)
{
string num = (this.RockRectangles.IndexOf(item) + 1).ToString();
g.DrawString(num, this.font, new SolidBrush(this.borderColor), this.getCenter(item.Rectangle));
}
//画每个大矩形里面的8个小矩形
//获取8个小矩形
var littleRects = item.GetLittleRectangles();
Rectangle rect = item.Rectangle;
Point center = new Point(rect.X + rect.Width / 2, rect.Y + rect.Height / 2);
foreach (var littleRect in littleRects)
{
path.Reset();
this.getPath(path, littleRect.Rectangle, item.RotationAngle, center);
g.DrawPath(new Pen(this.borderColor, nBorderWidth), path);
}
}
}
g.Dispose();
}
//把图片绘制到控件上
private void paintImageToControl(Graphics g)
{
//设置高质量插值法
g.InterpolationMode = InterpolationMode.High;
//设置高质量,低速度呈现平滑程度
g.SmoothingMode = SmoothingMode.HighQuality;
g.CompositingQuality = CompositingQuality.GammaCorrected;
//获取图片的的区域
int width = (int)(cloneBackImage.Width * 100 / zoomScale);
int height = (int)(cloneBackImage.Height * 100 / zoomScale);
//此时是以中心点来缩放的，如果以滑轮中心缩放，则需要知道实际图片的width和height的缩放比例
//原理是放大后，鼠标相对于控件坐标不变，鼠标向对于图像坐标也不变
//realImageCorePoint在反复计算时有极少误差，所以当zoomScale不变化是，不更新realImageCorePoint
if (zoomScale != 100)
{
if (this.oldZoomScale != this.zoomScale)
{
realImageCorePoint.X = (int)Math.Round((this.stepScale * wheelPoint.X + (this.zoomScale - this.stepScale) * realImageCorePoint.X) * 1.0 / this.zoomScale);
realImageCorePoint.Y = (int)Math.Round((this.stepScale * wheelPoint.Y + (this.zoomScale - this.stepScale) * realImageCorePoint.Y) * 1.0 / this.zoomScale);
this.oldZoomScale = this.zoomScale;
zoomScaleIsUpdate = true;
}
else
{
//当放大停止后，需要重新刷新一次
if (zoomScaleIsUpdate)
{
this.Invalidate();
zoomScaleIsUpdate = false;
}
}
}
else
{
realImageCorePoint.X = (int)((cloneBackImage.Width - width) / 2.0);
realImageCorePoint.Y = (int)((cloneBackImage.Height - height) / 2.0);
}
Rectangle srcRect = new Rectangle(realImageCorePoint.X, realImageCorePoint.Y, width, height);
g.DrawImage(cloneBackImage, this.effectiveRect, srcRect, GraphicsUnit.Pixel);
}
//控件中的点与元素图像的点转换
private Point localPoint2ImagePoint(Point p)
{
p.X = (int)((p.X - (this.Width - this.effectiveRect.Width) / 2.0) * imageScale * 100 / zoomScale) + realImageCorePoint.X;
p.Y = (int)((p.Y - (this.Height - this.effectiveRect.Height) / 2.0) * imageScale * 100 / zoomScale) + realImageCorePoint.Y;
return p;
}
private bool isInRect(Point p, Rectangle rect, double angle)
{
Point centerP = this.getCenter(rect);
//获取反旋转后的点
return this.isInRect(p, rect, angle, centerP);
}
/// <summary>
/// 判断某个点是否在矩形内
/// </summary>
/// <param name="p"></param>
/// <param name="rect"></param>
/// <param name="angle"></param>
/// <param name="centerP"></param>
/// <returns></returns>
private bool isInRect(Point p, Rectangle rect, double angle, Point centerP)
{
//获取反旋转后的点
Point rotateP = this.getRotatePoint(p, -angle, centerP);
return rect.Contains(rotateP);
}
/// <summary>
/// 改变鼠标的图标
/// </summary>
/// <param name="p"></param>
private void changeCursor(Point p, bool updateSelectData = false)
{
bool isInBigRect = false;
foreach (var item in this.RockRectangles)
{
if (this.isInRect(p, item.Rectangle, item.RotationAngle))
{
isInBigRect = true;
}
foreach (var littleRect in item.GetLittleRectangles())
{
//如果图标在小矩形内
if (this.isInRect(p, littleRect.Rectangle, item.RotationAngle, this.getCenter(item.Rectangle)))
{
this.Cursor = this.getCursor(littleRect.Location);
if (updateSelectData)
{
this.selectRectIndex = this.RockRectangles.IndexOf(item);
this.selectLocation = littleRect.Location;
}
return;
}
}
}
if (isInBigRect)
{
this.Cursor = Cursors.SizeAll;
}
else
{
this.Cursor = Cursors.Default;
}
}
private Cursor getCursor(PosSizableRect p)
{
switch (p)
{
case PosSizableRect.LeftUp:
return Cursors.SizeNWSE;
case PosSizableRect.LeftMiddle:
return Cursors.SizeWE;
case PosSizableRect.LeftBottom:
return Cursors.SizeNESW;
case PosSizableRect.BottomMiddle:
return Cursors.SizeNS;
case PosSizableRect.RightUp:
return Cursors.SizeNESW;
case PosSizableRect.RightBottom:
return Cursors.SizeNWSE;
case PosSizableRect.RightMiddle:
return Cursors.SizeWE;
case PosSizableRect.UpMiddle:
return Cursors.SizeNS;
default:
return Cursors.Default;
}
}
//获取矩形中心
private Point getCenter(Rectangle rect)
{
return new Point(rect.X + rect.Width / 2, rect.Y + rect.Height / 2);
}
/// <summary>
/// 获取矩形旋转后的路径
/// </summary>
/// <param name="rectangle"></param>
/// <param name="angle"></param>
private void getPath(GraphicsPath path, Rectangle rect, double angle)
{
Point center = this.getCenter(rect);
this.getPath(path, rect, angle, center);
}
private void getPath(GraphicsPath path, Rectangle rect, double angle, Point center)
{
path.AddRectangle(rect);
var a = -angle * (Math.PI / 180);
var n1 = (float)Math.Cos(a);
var n2 = (float)Math.Sin(a);
var n3 = -(float)Math.Sin(a);
var n4 = (float)Math.Cos(a);
var n5 = (float)(center.X * (1 - Math.Cos(a)) + center.Y * Math.Sin(a));
var n6 = (float)(center.Y * (1 - Math.Cos(a)) - center.X * Math.Sin(a));
Matrix matrix = new Matrix(n1, n2, n3, n4, n5, n6);
path.Transform(matrix);
}
//p1绕center旋转angle角度后点位
private Point getRotatePoint(Point p1, double angle, Point center)
{
//使用旋转矩阵求值
System.Windows.Media.RotateTransform rotateTransform = new System.Windows.Media.RotateTransform(angle, center.X, center.Y);
System.Windows.Point p = new System.Windows.Point(p1.X, p1.Y);
System.Windows.Point p2 = rotateTransform.Transform(p);
Point result = new Point();
result.X = (int)p2.X;
result.Y = (int)p2.Y;
return result;
}
}
4. 矩形框控件不足？
- 目前矩形框控件不支持对背景图片的拖拽（本项目中未涉及此场景，后续可能会增加此功能）
- 目前矩形框控件不支持旋转（源码中有旋转矩形框展示代码，但交互上没有实现，需要人为赋值旋转角度，后续可能会优化）