如何用Qt实现组件供QML使用

如何用Qt实现组件供QML使用

用Qt实现一个UI：一个圆形图标在圆圈内或圆圈上拖动，但不能拖出到圆圈外。当拖动到圆圈上时，高亮图标和圆圈。类似有RingLock。

1、继承QQuickPaintedItem类，该类为QQuickItem的子类。QQuickItem用于不用显示UI的供QML使用的组件；QQuickPaintedItem用于需要显示UI的供QML使用的组件。本案例中，需要画图，故而继承QQuickPaintedItem。



#ifndef IMAGEDRAGWIDGET_H
#define IMAGEDRAGWIDGET_H
#include
#include
#include
class imageDragWidget : public QQuickPaintedItem
{
Q_OBJECT
public:
explicit imageDragWidget(QQuickPaintedItem *parent = 0);
~imageDragWidget();
signals:
//鼠标按下
void dragPress();
//鼠标在圆圈内移动
void dragMoveIn();
//鼠标在圆圈上移动
void dragMoveOn();
//鼠标释放
void dragRelease();
//鼠标移出圆圈,确认关机
void dragOut();
public slots:
protected:
void paint(QPainter * painter);
void mouseMoveEvent(QMouseEvent *event);
void mousePressEvent(QMouseEvent *event);
void mouseReleaseEvent(QMouseEvent *event);
private:
//判断鼠标和圆圈的位置关系：圆圈外、圆圈上、圆圈内
int circleContain(void);
//判断鼠标和图标的位置关系：图标外、图标上、图标内
int powerContain(void);
//得到鼠标与圆心连线和圆圈的交点
QPoint GetPoint(QPoint currentPoint, QPoint circleCenter, int raduis);
private:
QPixmap *circle_defaultImg;
QPixmap *circle_boldImg;
QPixmap *power_haloImg;
QPixmap *power_solidImg;
QPixmap *power_defaultImg;
//当前圆圈图片
QPixmap *circleImg;
//圆圈图片所在矩形
QRect *circleImgRect;
//当前图标图片
QPixmap *powerImg;
//图标图片所在矩形
QRect *powerImgRect;
//当前鼠标所在位置
QPoint currentMousePoint;
//图标所在位置
QPoint powerCenterPoint;
//鼠标是否按下的标志
bool pressFlag;
//鼠标是否移出的标志
bool isOut;
//宽度缩放比例
double widthScale;
//高度缩放比例
double heightScale;
};
#endif // IMAGEDRAGWIDGET_H



#include "imagedragwidget.h"
#include
imageDragWidget::imageDragWidget(QQuickPaintedItem *parent) :
QQuickPaintedItem(parent)
{
//得到屏幕尺寸
QScreen *screen = QGuiApplication::primaryScreen();
int screen_width = screen->size().width();
int screen_height = screen->size().height();
qDebug()<<"屏幕尺寸: "<//圆圈所在图片尺寸为:452*452; 图标所在图片尺寸为:350*350
//滑动图标的尺寸128*128
double widgetScale = (double)580/(double)720;
qDebug()<<"控件占屏幕比例: "<//设置控件尺寸
setContentsSize(QSize(screen_width*widgetScale, screen_width*widgetScale));
int widget_width = contentsSize().width();
int widget_height = contentsSize().height();
qDebug()<<"控件尺寸: "<//接收鼠标左键
setAcceptedMouseButtons(Qt::LeftButton);
circle_defaultImg = new QPixmap(":/images/circle_default.png");
circle_boldImg = new QPixmap(":/images/circle_bold.png");
power_haloImg = new QPixmap(":/images/power_halo.png");;
power_solidImg = new QPixmap(":/images/power_solid.png");
power_defaultImg = new QPixmap(":/images/power_default.png");
isOut = false;
circleImg = circle_defaultImg;
int circle_width = circleImg->width();
int circle_height = circleImg->height();
//设置圆圈图片在实际屏幕上的尺寸
//滑动图标的尺寸128*128
int circle_width_in_widget = widget_width - 128*widgetScale;
int circle_height_in_widget = widget_height - 128*widgetScale;
qDebug()<<"滑动圆圈尺寸: "<widthScale = (double)circle_width_in_widget/(double)circle_width;
heightScale = (double)circle_height_in_widget/(double)circle_height;
qDebug()<<"圆圈和图标宽度缩放比例为: "<circleImgRect = new QRect(0, 0, circle_width*widthScale, circle_height*heightScale);
//圆圈图片移到控件中心
circleImgRect->moveCenter(QPoint(widget_width/2, widget_height/2));
powerImg = power_defaultImg;
int power_width = powerImg->width();
int power_height = powerImg->height();
powerImgRect = new QRect(0, 0, power_width*widthScale, power_height*heightScale);
//图标图片移到控件中心
powerImgRect->moveCenter(circleImgRect->center());
powerCenterPoint = circleImgRect->center();
}
void imageDragWidget::paint(QPainter *painter)
{
painter->drawPixmap(*circleImgRect, *circleImg);
painter->drawPixmap(*powerImgRect, *powerImg);
}
void imageDragWidget::mouseMoveEvent(QMouseEvent *event)
{
if(pressFlag) {
//鼠标已按下
int power_width = powerImgRect->width();
int power_height = powerImgRect->height();
int circle_width = circleImgRect->width();
int circle_height = circleImgRect->height();
currentMousePoint = event->pos();
int flag = circleContain();
if(flag < 0) {
//鼠标在圆圈内，则图标移动到鼠标位置
powerImg = power_haloImg;
circleImg = circle_defaultImg;
powerImgRect->moveCenter(currentMousePoint);
powerCenterPoint = currentMousePoint;
isOut = false;
} else if(flag == 0) {
//鼠标在圆圈上，则图标移动到鼠标位置，同时更换图片
powerImg = power_solidImg;
circleImg = circle_boldImg;
powerImgRect->moveCenter(currentMousePoint);
powerCenterPoint = currentMousePoint;
isOut = true;
} else {
//鼠标在圆圈外
isOut = true;
if(powerContain() > 0) {
//鼠标在圆圈外且在图标外，则等同于鼠标释放。图标回到控件中心。
powerImg = power_defaultImg;
powerImgRect->moveCenter(circleImgRect->center());
pressFlag = false;
circleImg = circle_defaultImg;
} else {
//鼠标在圆圈外且不在图标外，则图标移到鼠标与控件中心连线和圆圈的交点。
powerImg = power_solidImg;
circleImg = circle_boldImg;
powerCenterPoint = GetPoint(currentMousePoint,
circleImgRect->center(), circleImgRect->width()/2);
powerImgRect->moveCenter(powerCenterPoint);
}
}
powerImgRect->setHeight(power_height);
powerImgRect->setWidth(power_width);
circleImgRect->setHeight(circle_height);
circleImgRect->setWidth(circle_width);
update();
if(pressFlag&&(!isOut)) {
//鼠标按下且在圆圈内
emit dragMoveIn();
} else if(pressFlag&&isOut){
//鼠标按下且在圆圈上
emit dragMoveOn();
} else if((!pressFlag)&&(isOut)){
//鼠标在圆圈外且在图标外，则等同于鼠标释放。
emit dragRelease();
}
if(isOut&&(!pressFlag)) {
//鼠标在圆圈外且在图标外，确认关机。
emit dragOut();
}
}
}
void imageDragWidget::mousePressEvent(QMouseEvent *event)
{
currentMousePoint = event->pos();
if(powerContain() <= 0) {
//鼠标进入到图标内，则表示按下
pressFlag = true;
int power_width = powerImgRect->width();
int power_height = powerImgRect->height();
powerImg = power_haloImg;
powerImgRect->setHeight(power_height);
powerImgRect->setWidth(power_width);
update();
emit dragPress();
}
}