vs2022+qt6.6.3重写QGraphicsItem绘制一个旋转矩形。该矩形包括6个锚点Item,能够实现矩形旋转和移动。旋转矩形和矩形在实现思路上类似,在旋转和移动细节上有较大不同。可查看我的另一篇文章。
QT创建一个自定义矩形QGraphicsItem_qt 绘制缺角矩形-CSDN博客
1.思路
1)RotatedItem(旋转矩形图元)构造函数中初始化6个AchorPoint(锚点图元),并将锚点图元的父图元设置为RotatedItem。
2)锚点图元中包含鼠标事件函数,当鼠标在锚点图元的范围内触发鼠标事件,能够根据鼠标的最新位置点重绘锚点图元,并且通过updateNewPosition函数将新坐标点传递给旋转矩形图元,从而重绘旋转矩形图元。
3)当鼠标在四个边角锚点时,例如下图,拉伸右上角,拉伸后的矩形B不能直接计算。通过观察,可以发现左下角的锚点位置不变,对拉伸前和拉伸后的旋转矩形绕着固定锚点同时旋转θ角后变成正矩形,此时,拉伸后的旋转矩形参数很容易计算出。最后,将拉伸后的正矩形绕着固定锚点以-θ旋转得到旋转后的矩形。
4)当鼠标在Center锚点时,锚点移动的距离(dx,dy)和矩形起始点移动的距离相同。利用得到的矩形起始点重新构造矩形。最后,将矩形绕着矩形中心旋转θ角。
5)当鼠标在ROTATE锚点时,通过计算ROTATE和矩形中心连成直线与竖直线的夹角,四个边角锚点都绕矩形中心锚点旋转θ度。并直接将所有点添加到QPolygonF中进行重绘。
2.自定义矩形图元实现
2.1 构造函数
在自定义图元中初始化6个锚点,设置锚点的位置、类型以及父图元。
RotatedRectItem::RotatedRectItem(QRectF rect)
{
//初始化矩形位置
m_rect = rect;
m_x = rect.x();
m_y = rect.y();
m_width = rect.width();
m_height = rect.height();
m_center = rect.center();
m_angle = 0;
m_polygon = getRotatePolygonFromRect(m_center, m_rect, m_angle);//旋转矩形使用QPolygonF保存并绘制
m_itemType = RotatedRect;
//初始化锚点位置
m_anchorPointList.append(new AnchorPoint(LU));
m_anchorPointList.append(new AnchorPoint(LD));
m_anchorPointList.append(new AnchorPoint(RD));
m_anchorPointList.append(new AnchorPoint(RU));
m_anchorPointList.append(new AnchorPoint(CENTER));
m_anchorPointList.append(new AnchorPoint(ROTATE));
m_anchorPointList[0]->setPoint(getRotatePoint(m_center,QPointF(m_x, m_y),m_angle));
m_anchorPointList[1]->setPoint(getRotatePoint(m_center,QPointF(m_x, m_y + m_height),m_angle));
m_anchorPointList[2]->setPoint(getRotatePoint(m_center, QPointF(m_x + m_width, m_y + m_height), m_angle));
m_anchorPointList[3]->setPoint(getRotatePoint(m_center, QPointF(m_x + m_width, m_y),m_angle));
m_anchorPointList[4]->setPoint(m_center);
m_anchorPointList[5]->setPoint(getRotatePoint(m_center, QPointF(m_center.x(), m_y - m_height * 0.1),m_angle));
//设置父图元
m_anchorPointList[0]->setParentItem(this);
m_anchorPointList[1]->setParentItem(this);
m_anchorPointList[2]->setParentItem(this);
m_anchorPointList[3]->setParentItem(this);
m_anchorPointList[4]->setParentItem(this);
m_anchorPointList[5]->setParentItem(this);
}
2.2 重写boundingRect和paint函数
boundingRect是自定义图元的活动范围,如果设置错误,拖动锚点将没有反应。
paint是用来绘制图元的。
QRectF RotatedRectItem::boundingRect()const
{
return QRect(m_polygon.boundingRect().x() - 10, m_polygon.boundingRect().y() - 10, m_polygon.boundingRect().width() + 20, m_polygon.boundingRect().height() + 20);
}
void RotatedRectItem::paint(QPainter* painter, const QStyleOptionGraphicsItem* option, QWidget* widget)
{
painter->setPen(Qt::red);
painter->setBrush(Qt::blue);
painter->drawPolygon(m_polygon);
}
2.2 重写ItemBase的updateNewPosition函数
重写updateNewPosition,用于接收锚点图元的新坐标,并触发重绘事件。
void RotatedRectItem::updateNewPosition(QPointF p, qreal angle,AnchorType type)
{
m_anchorType = type;
switch (m_anchorType)
{
case LU:
{
m_point = p;
this->setLU(m_point);
scene()->update();
break;
}
case LD:
{
m_point = p;
this->setLD(m_point);
scene()->update();
break;
}
case RU:
{
m_point = p;
this->setRU(m_point);
scene()->update();
break;
}
case RD:
{
m_point = p;
this->setRD(m_point);
scene()->update();
break;
}
case CENTER:
{
m_point = p;
this->setCENTER(m_point);
scene()->update();
break;
}
case ROTATE:
{
m_angle = angle;
this->setROTATE(m_angle);
scene()->update();
break;
}
default:
break;
}
}
void RotatedRectItem::setLU(QPointF p)
{
m_center = (p + m_polygon[2]) / 2.;//计算新矩形中心
QPointF newPoint2RD = getRotatePoint(m_polygon[2], p, -m_angle);//绕着右下角旋转的新矩形
QPointF oldPoint2RD = getRotatePoint(m_polygon[2], m_polygon[0], -m_angle);//绕着右下角旋转的老矩形
QPointF newPoint = getRotatePoint(m_center, p, -m_angle);//绕着中心旋转的点
m_x = newPoint.x();
m_y = newPoint.y();
m_width = oldPoint2RD.x() - newPoint2RD.x() + m_width;
m_height = oldPoint2RD.y() - newPoint2RD.y() + m_height;
m_rect = QRect(m_x, m_y, m_width, m_height);
double m_x2RD = newPoint2RD.x();//绕着右下角旋转的左上角x坐标
double m_y2RD = newPoint2RD.y();//绕着右下角旋转的左上角y坐标
QRectF m_rect2RD = QRectF(m_x2RD, m_y2RD, m_width, m_height);//绕着右下角旋转的矩形
m_polygon = getRotatePolygonFromRect(m_polygon[2], m_rect2RD, m_angle);
m_anchorPointList[0]->setPoint(m_polygon[0]);
m_anchorPointList[1]->setPoint(m_polygon[1]);
m_anchorPointList[2]->setPoint(m_polygon[2]);
m_anchorPointList[3]->setPoint(m_polygon[3]);
m_anchorPointList[4]->setPoint(m_center);
m_anchorPointList[5]->setPoint(getRotatePoint(m_center, QPointF(m_center.x(), m_center.y() - m_height * 0.6), m_angle));
}
void RotatedRectItem::setLD(QPointF p)
{
m_center = (p + m_polygon[3]) / 2.;//计算新矩形中心
QPointF newPoint2RD = getRotatePoint(m_polygon[3], p, -m_angle);//绕着右上角旋转的新矩形
QPointF oldPoint2RD = getRotatePoint(m_polygon[3], m_polygon[1], -m_angle);//绕着右上角旋转的老矩形
m_width += oldPoint2RD.x() - newPoint2RD.x();
m_height += -oldPoint2RD.y() + newPoint2RD.y();
QPointF newPoint = getRotatePoint(m_center, p, -m_angle);//绕着中心旋转的点
m_x = newPoint.x();
m_y = newPoint.y()-m_height;
m_rect = QRect(m_x, m_y, m_width, m_height);
double m_x2RD = newPoint2RD.x();//绕着右上角旋转的左下角x坐标
double m_y2RD = newPoint2RD.y()-m_height;//绕着右上角旋转的左下角y坐标
QRectF m_rect2RD = QRectF(m_x2RD, m_y2RD, m_width, m_height);//绕着右上角旋转的矩形
m_polygon = getRotatePolygonFromRect(m_polygon[3], m_rect2RD, m_angle);
m_anchorPointList[0]->setPoint(m_polygon[0]);
m_anchorPointList[1]->setPoint(m_polygon[1]);
m_anchorPointList[2]->setPoint(m_polygon[2]);
m_anchorPointList[4]->setPoint(m_center);
m_anchorPointList[5]->setPoint(getRotatePoint(m_center, QPointF(m_center.x(), m_center.y() - m_height * 0.6), m_angle));
}
void RotatedRectItem::setRU(QPointF p)
{
m_center = (m_polygon[1] + p) / 2.;//计算新矩形中心
QPointF newPoint2RD = getRotatePoint(m_polygon[1], p, -m_angle);
QPointF oldPoint2RD = getRotatePoint(m_polygon[1], m_polygon[3], -m_angle);
m_width += -oldPoint2RD.x() + newPoint2RD.x();
m_height += oldPoint2RD.y() - newPoint2RD.y();
QPointF newPoint = getRotatePoint(m_center, p, -m_angle);//绕着中心旋转的点
m_x = newPoint.x()-m_width;
m_y = newPoint.y();
m_rect = QRect(m_x, m_y, m_width, m_height);
double m_x2RD = newPoint2RD.x()-m_width;
double m_y2RD = newPoint2RD.y();
QRectF m_rect2RD = QRectF(m_x2RD, m_y2RD, m_width, m_height);
m_polygon = getRotatePolygonFromRect(m_polygon[1], m_rect2RD, m_angle);
m_anchorPointList[0]->setPoint(m_polygon[0]);
m_anchorPointList[2]->setPoint(m_polygon[2]);
m_anchorPointList[3]->setPoint(m_polygon[3]);
m_anchorPointList[4]->setPoint(m_center);
m_anchorPointList[5]->setPoint(getRotatePoint(m_center, QPointF(m_center.x(), m_center.y() - m_height * 0.6), m_angle));
}
void RotatedRectItem::setRD(QPointF p)
{
m_center = (m_polygon[0] + p) / 2.;
QPointF newPoint2RD = getRotatePoint(m_polygon[0], p, -m_angle);
QPointF oldPoint2RD = getRotatePoint(m_polygon[0], m_polygon[2], -m_angle);
m_width += -oldPoint2RD.x() + newPoint2RD.x();
m_height += -oldPoint2RD.y() + newPoint2RD.y();
QPointF newPoint = getRotatePoint(m_center, p, -m_angle);
m_x = newPoint.x() - m_width;
m_y = newPoint.y()-m_height;
m_rect = QRect(m_x, m_y, m_width, m_height);
double m_x2RD = newPoint2RD.x() - m_width;
double m_y2RD = newPoint2RD.y()-m_height;
QRectF m_rect2RD = QRectF(m_x2RD, m_y2RD, m_width, m_height);
m_polygon = getRotatePolygonFromRect(m_polygon[0], m_rect2RD, m_angle);
m_anchorPointList[1]->setPoint(m_polygon[1]);
m_anchorPointList[2]->setPoint(m_polygon[2]);
m_anchorPointList[3]->setPoint(m_polygon[3]);
m_anchorPointList[4]->setPoint(m_center);
m_anchorPointList[5]->setPoint(getRotatePoint(m_center, QPointF(m_center.x(), m_center.y() - m_height * 0.6), m_angle));
}
void RotatedRectItem::setCENTER(QPointF p)
{
m_x += p.x();
m_y += p.y();
m_center += p;
m_rect = QRect(m_x, m_y, m_width, m_height);
m_polygon = getRotatePolygonFromRect(m_center, m_rect, m_angle);
m_anchorPointList[0]->setPoint(m_polygon[0]);
m_anchorPointList[1]->setPoint(m_polygon[1]);
m_anchorPointList[2]->setPoint(m_polygon[2]);
m_anchorPointList[3]->setPoint(m_polygon[3]);
m_anchorPointList[4]->setPoint(m_center);
m_anchorPointList[5]->setPoint(getRotatePoint(m_center, QPointF(m_center.x(), m_center.y() - m_height * 0.6), m_angle));
}
void RotatedRectItem::setROTATE(qreal angle)
{
m_angle = angle;
m_polygon = getRotatePolygonFromRect(m_center, m_rect, m_angle);
m_anchorPointList[0]->setPoint(m_polygon[0]);
m_anchorPointList[1]->setPoint(m_polygon[1]);
m_anchorPointList[2]->setPoint(m_polygon[2]);
m_anchorPointList[3]->setPoint(m_polygon[3]);
m_anchorPointList[5]->setPoint(getRotatePoint(m_center, QPointF(m_center.x(), m_center.y() - m_height * 0.6), m_angle));
}
QPolygonF RotatedRectItem::getRotatePolygonFromRect(QPointF center, QRectF inputRect, qreal angle)
{
QVector<QPointF> vpt;
QPointF pf = getRotatePoint(center, inputRect.topLeft(), angle);
vpt.append(pf);
pf = getRotatePoint(center, inputRect.bottomLeft(), angle);
vpt.append(pf);
pf = getRotatePoint(center, inputRect.bottomRight(), angle);
vpt.append(pf);
pf = getRotatePoint(center, inputRect.topRight(), angle);
vpt.append(pf);
pf = getRotatePoint(center, inputRect.topLeft(), angle);
vpt.append(pf);
return QPolygonF(vpt);
}
//输入点和角度,输出旋转后的点
QPointF RotatedRectItem::getRotatePoint(QPointF center, QPointF inputPoint, qreal angle)
{
double dx = center.x();
double dy = center.y();
double x = inputPoint.x();
double y = inputPoint.y();
double xx, yy;
xx = (x - dx) * cos(angle * M_PI / 180) - (y - dy) * sin(angle * M_PI / 180) + dx;
yy = (x - dx) * sin(angle * M_PI / 180) + (y - dy) * cos(angle * M_PI / 180) + dy;
return QPointF(xx, yy);
}
3.锚点图元实现
锚点图元非常重要,它负责重绘或移动图元。当锚点是四个角时,移动锚点就会重新自定义图元。当锚点是中心位置时,就会移动图元。
3.1 重写boundingRect和paint
paint根据锚点类型绘制相应的形状
QRectF AnchorPoint::boundingRect() const
{
return QRectF(m_point.x() - m_drawSize / 2., m_point.y() - m_drawSize / 2., m_drawSize, m_drawSize);
}
void AnchorPoint::paint(QPainter* painter, const QStyleOptionGraphicsItem* option, QWidget* widget)
{
m_scaleFactor = painter->transform().m11();
switch (m_anchorType)
{
case LU:
case LD:
case RU:
case RD:
case RADIUS:
{
painter->setPen(Qt::darkMagenta);
painter->drawRect(m_point.x() - m_drawSize / 2. / m_scaleFactor, m_point.y() - m_drawSize / 2. / m_scaleFactor, m_drawSize / m_scaleFactor, m_drawSize / m_scaleFactor);
break;
}
case CENTER:
case ROTATE:
{
painter->setPen(Qt::black);
painter->drawEllipse(m_point.x() - m_drawSize / 2. / m_scaleFactor, m_point.y() - m_drawSize / 2. / m_scaleFactor, m_drawSize / m_scaleFactor, m_drawSize / m_scaleFactor);
break;
}
default:
break;
}
}
3.2 重写鼠标事件
鼠标事件是为了获取鼠标的坐标,其中MouseMoveEvent是获取鼠标移动的距离,然后重绘锚点图元,并将新坐标发送给父图元重绘自定义图元。
void AnchorPoint::mouseMoveEvent(QGraphicsSceneMouseEvent* event)
{
QGraphicsItem::mouseMoveEvent(event);
if (event->buttons() == Qt::LeftButton)
{
ItemBase* item = static_cast<ItemBase*>(this->parentItem());//父类对象指向子类对象
m_itemType = item->m_itemType;
switch (m_itemType)
{
case ItemBase::RotatedRect:
{
#pragma region 旋转矩形
switch (m_anchorType)
{
case LU:
{
setCursor(Qt::ClosedHandCursor);
qreal dx = event->scenePos().x() - event->lastScenePos().x();
qreal dy = event->scenePos().y() - event->lastScenePos().y();
m_point += QPoint(dx, dy);
item->updateNewPosition(m_point, m_angle, ItemBase::LU);
break;
}
case LD:
{
setCursor(Qt::ClosedHandCursor);
qreal dx = event->scenePos().x() - event->lastScenePos().x();
qreal dy = event->scenePos().y() - event->lastScenePos().y();
m_point += QPoint(dx, dy);
item->updateNewPosition(m_point, m_angle, ItemBase::LD);
break;
}
case RU:
{
setCursor(Qt::ClosedHandCursor);
qreal dx = event->scenePos().x() - event->lastScenePos().x();
qreal dy = event->scenePos().y() - event->lastScenePos().y();
m_point += QPoint(dx, dy);
item->updateNewPosition(m_point, m_angle,ItemBase::RU);
break;
}
case RD:
{
setCursor(Qt::ClosedHandCursor);
qreal dx = event->scenePos().x() - event->lastScenePos().x();
qreal dy = event->scenePos().y() - event->lastScenePos().y();
m_point += QPoint(dx, dy);
item->updateNewPosition(m_point, m_angle,ItemBase::RD);
break;
}
case CENTER:
{
setCursor(Qt::ClosedHandCursor);
qreal dx = event->scenePos().x() - event->lastScenePos().x();
qreal dy = event->scenePos().y() - event->lastScenePos().y();
m_movePoint = QPointF(dx, dy);
item->updateNewPosition(m_movePoint, m_angle, ItemBase::CENTER);
break;
}
case ROTATE:
{
setCursor(Qt::ClosedHandCursor);
m_angle = 180 - atan2((event->scenePos().x() - item->m_center.x()), (event->scenePos().y() - item->m_center.y())) * 180 / M_PI;
item->updateNewPosition(m_point, m_angle, ItemBase::ROTATE);
break;
}
}
#pragma endregion
break;
}
}
}
}
4.参考链接
本文参考了网上的部分代码