自定义QGraphicsItem实现平移、改变尺寸和旋转

我们在使用QGraphicsView框架的时候，经常需要自定义QGraphicsItem，并且需要实现Item的平移、改变大小和旋转的效果。接下来介绍他们的一种实现方式

1. 平移

平移效果如下图所示：

实现方式有两种方法：

1. 使用QGraphicsItem本身的移动标志实现。

this->setFlag(QGraphicsItem::ItemIsMovable, true);

2. 通过重写鼠标的相关事件实现。

这里需要重写下面三个函数：

void mousePressEvent(QGraphicsSceneMouseEvent *event) override;
void mouseMoveEvent(QGraphicsSceneMouseEvent *event) override;
void mouseReleaseEvent(QGraphicsSceneMouseEvent *event) override;

这里只贴出关键部分实现代码：

void mousePressEvent(QGraphicsSceneMouseEvent *event)
{
   
       
	// 获取场景坐标和本地坐标
    QPointF scenePos = event->scenePos();
    QPointF pos = event->pos();
	
	// 保存当前的一些信息
    m_pos = pos;
    m_pressedPos = scenePos;
    m_startPos = this->pos();
    return QGraphicsItem::mousePressEvent(event);
}

void mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
   
   
	// 获取场景坐标和本地坐标
    QPointF scenePos = event->scenePos();
    QPointF pos = event->pos();

	// 计算偏移
	qreal xInterval = scenePos.x() - m_pressedPos.x();
    qreal yInterval = scenePos.y() - m_pressedPos.y();

	// 设置在场景中位置
    this->setPos(m_startPos + QPointF(xInterval, yInterval));
    this->update();
}

这里 mousePressEvent 中保存了鼠标点击时的状态信息，包括鼠标点击时Item的本地坐标，场景坐标和该Item所在场景的坐标。 函数 mouseMoveEvent 中，获取鼠标移动的场景坐标位置计算偏移并设置新的Item的位置，从而实现平移效果。

2. 改变尺寸

改变尺寸效果如下图所示：

这里同样时通过重写 mousePressEvent 、 mouseMoveEvent 和 mouseReleaseEvent 实现。

关键部分代码如下：

void mousePressEvent(QGraphicsSceneMouseEvent *event)
{
   
       
	// 获取场景坐标和本地坐标
    QPointF scenePos = event->scenePos();
    QPointF pos = event->pos();
	
	// 保存当前的一些信息
    m_pos = pos;
    m_pressedPos = scenePos;
    m_startPos = this->pos();
    return QGraphicsItem::mousePressEvent(event);
}

void UICanvasItemBase::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
   
   
    // 获取场景坐标和本地坐标
    QPointF scenePos = event->scenePos();
    QPointF loacalPos = event->pos();

	// 是否允许改变大小
    if (!m_isResizeable)
        return;
        
    // 是否为等比例修改大小
	qreal ratio = m_ratioValue;
    qreal itemWidth = abs(loacalPos.x()) * 2 - m_nInterval - m_nEllipseWidth;
    qreal itemHeight = abs(loacalPos.y()) * 2 - m_nInterval - m_nEllipseWidth;
    if (m_isRatioScale)
        itemHeight = itemWidth * 1.0 / ratio;

    // 设置图片的最小大小为10
    if (itemWidth < 10 || itemHeight < 10)
        return;

    m_size = QSize(itemWidth, itemHeight);
    this->update();
}

因为我这里的绘制的大小主要是通过 m_size ，改变 m_size 就是更改了 QGraphicsItem 的显示尺寸。本例子中的坐标系的中心点就是 m_size 的中心点。因此 itemWidth 的计算值为表示为：
qreal itemWidth = abs(loacalPos.x()) * 2 - m_nInterval - m_nEllipseWidth;
loacalPos.x() 为本地坐标系的 x 轴坐标， *2 正好为实际的宽度，这里的 m_nInterval 和 m_nEllipseWidth 表示图片和选择框之间的间距和拖拽手柄的半径。

3. 旋转

旋转效果如下图所示：

本篇文章讲述的旋转方法步骤如下：

1. 计算上一次鼠标移动和本次鼠标移动位置之间的角度。
2. 计算旋转的方向。
3. 根据计算的角度和方向，计算真正的选中角度（顺时针为正，逆时针为负），为 QGraphicsItem 本身设置变换矩阵。

那么如何计算角度和方向呢？？

• 通过向量的 点乘 ，计算角度。单位向量点乘的值，正好为角度的余弦。
• 通过向量的 叉乘 ，计算旋转的方向。叉乘的结果为与这两个向量垂直的向量，可以通过Z轴结果判断，如果结果为正表示顺时针，结果为负表示逆时针。

关键部分代码如下：

void mousePressEvent(QGraphicsSceneMouseEvent *event)
{
   
       
	m_transform = this->transform();
	
	// 获取场景坐标和本地坐标
    QPointF scenePos = event->scenePos();
    QPointF pos = event->pos();
	
	// 保存当前的一些信息
    m_pos = pos;
    m_pressedPos = scenePos;
    m_startPos = this->pos();
    return QGraphicsItem::mousePressEvent(event);
}

void UICanvasItemBase::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
   
   
    // 获取场景坐标和本地坐标
    QPointF scenePos = event->scenePos();
    QPointF loacalPos = event->pos();
	
	// 获取并设置为单位向量
    QVector2D startVec(m_pos.x() - 0, m_pos.y() - 0);
    startVec.normalize();