想必大家都使用过qt的自定义头像功能吧,那么图1应该不会陌生,本篇文章我就是要模拟一个这样的功能,虽然没有这么强大的效果,但是能够满足一定的需求。
首先在讲解功能之前,我先给出一篇文章,QT实现的类似QQ的头像选择框,这篇文章也是讲解头像上传功能的,而我自己的代码是从这个demo中优化而来,不仅对代码进行了重构,而且处理了快速拖动时,边框消失的问题。使用事件和双缓冲来尽量减少重新绘制的几率。接下来我会一步一步进行讲解,怎么实现图片自定义截取功能。
文章最后为大家准备了Qt资料
↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡
一、概要
首先,我给出4个类,并给出他们的解释
1、PicturePreviewPanel:图标展示框,控件基类
2、BackgroundWidget:阴影窗口,是PicturePreviewPanel子类
3、CutShape:交互图形基类,实现了拖拽和放大缩小功能
4、CutRound:圆形剪贴,父类为CutShape,实现父类的paintInit接口重绘
5、CutRectangle:矩形剪贴,父类为CutShape,实现父类的paintInit接口重绘
二、详情
理解了上述5个类之后,接下来我分别讲解下类的头文件和重要的实现接口,其中自定义图形类也可以自己在扩充
头文件代码如下,有部分注释,代码应该不难理解,开发过程中只需要声明PicturePreviewPanel类,并调用其LoadPicture接口就可以加载图片,并进行图片剪切
#include <QWidget>
class QLabel;
enum ShapeType
{
Rect,//矩形
Round,//圆形
};
//剪贴图基类 实现了基本的交互功能,并绘制了部分图案,主要的团绘制在子类实现,通过实现paintInit接口
class CutShape : public QWidget
{
public:
CutShape(QWidget * parent = nullptr);
~CutShape();
public:
QPainterPath CutRegion();
protected:
//QWidget
virtual void mousePressEvent(QMouseEvent *) Q_DECL_OVERRIDE;
virtual void mouseMoveEvent(QMouseEvent *) Q_DECL_OVERRIDE;
virtual void mouseReleaseEvent(QMouseEvent *) Q_DECL_OVERRIDE;
virtual void resizeEvent(QResizeEvent *) Q_DECL_OVERRIDE;
virtual void paintEvent(QPaintEvent *) Q_DECL_OVERRIDE;
virtual bool paintInit(QPaintEvent *, QPaintDevice *) = 0;
virtual QPainterPath Region(){ return QPainterPath(); };
protected:
ShapeType m_Type;
bool m_MouseDown = false;
bool m_IsMoving = false;
bool m_IsFirst = true;
int border = 5;
private:
QRect getResizeGem(QRect oldgeo, QPoint mousePoint, bool & ignore);
private:
bool m_EnableRepaint = true;
bool m_Left = false;
bool m_Right = false;
bool m_Bottom = false;
bool m_Top = false;
QPoint m_startPoint;
QPoint m_old_pos;
QLabel * m_Label;
QPixmap m_BufferPix;
};
class CutRectangle : public CutShape
{
public:
CutRect