qml写控件widget调用_如何用Qt实现组件供QML使用

版权声明：本文系作者原创。未经许可，不得转载。

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

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

/*imagedragwidget.h*/

#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

/*imagedragwidget.cpp*/

#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 =