最近在做一个关于坐标的界面，
花了两天用qml画出来了，这里贴出来分享一下；
c++类OrdinateItem；
ordinateItem.h文件
#ifndef ORDINATEITEMS_H
#define ORDINATEITEMS_H
#include <QQuickItem>
namespace UtAbCapb {
class OrdinateItem : public QQuickItem//这里必须继承QQuickItem，因为要用到它的很多属性
{
Q_OBJECT
Q_PROPERTY(int scaleViewPostion READ scaleViewPostion WRITE setScaleViewPostion NOTIFY scaleViewPostionChanged)
Q_PROPERTY(int lineWidth READ lineWidth WRITE setLineWidth NOTIFY lineWidthChanged)
Q_PROPERTY(QString lineColor READ lineColor WRITE setLineColor NOTIFY lineColorChanged)
Q_PROPERTY(int rulerTotal READ rulerTotal WRITE setRulerTotal NOTIFY rulerTotalChanged)
enum scaleVP{
RightVP=0,
LeftVP
};
public:
OrdinateItem();//构造
private:
void init();//初始化
public:
int scaleViewPostion(); // 刻度显示位置（0:默认左边，1:右边）
void setScaleViewPostion(int vp); //设置刻度显示位置
int lineWidth(); // 画线线宽（默认3）
void setLineWidth(int width); //设置线宽
QString lineColor(); // 画线颜色
void setLineColor(QString color); //设置画线颜色
int rulerTotal(); // 总刻度数（默认4）
void setRulerTotal(int count); //设置刻度数
QSGNode *updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *);//更新节点
signals:
void scaleViewPostionChanged(); //刻度显示位置变化信号
void lineWidthChanged(); //线宽变化
void lineColorChanged(); //线颜色变化
void rulerTotalChanged(); //刻度总是变化
void rulerUnitChanged(); //刻度初始位置信号
public slots:
private:
int m_scale_vp; // 刻度显示位置
int m_line_width; // 线宽
QString m_line_color; // 线颜色
int m_ruler_count; // 刻度大小
};
}
#endif // ORDINATEITEMS_H
ordinateItem.cpp文件
#include "ordinateitem.h"
#include <QSGGeometryNode>
#include <QSGFlatColorMaterial>
#include <QDebug>
namespace UtAbCapb {
OrdinateItem::OrdinateItem()
{
setFlag(ItemHasContents, true);//设置标识
this->init();
}
void OrdinateItem::init()//初始化刻度，线宽，颜色等
{
m_scale_vp = LeftVP;
m_line_width = 1;
m_line_color = "#C5AD63";
m_ruler_count = 35;//纵坐标刻度35
}
int OrdinateItem::scaleViewPostion()
{
return m_scale_vp;
}
void OrdinateItem::setScaleViewPostion(int vp)
{
m_scale_vp = vp;
}
int OrdinateItem::lineWidth()
{
return m_line_width;
}
void OrdinateItem::setLineWidth(int width)
{
m_line_width = width;
}
QString OrdinateItem::lineColor()
{
return m_line_color;
}
void OrdinateItem::setLineColor(QString color)
{
m_line_color = color;
}
int OrdinateItem::rulerTotal()
{
return m_ruler_count;
}
void OrdinateItem::setRulerTotal(int count)
{
if(count>=10 && count<120){
m_ruler_count = count;
update();
}
}
QSGNode *OrdinateItem::updatePaintNode(QSGNode *oldNode, QQuickItem::UpdatePaintNodeData *)
{
float max_x = (width()>30)? 20 : width();//定义获取宽度，这里获取的是qml中设定的宽度
float max_y = height();//获取高度因为继承了QQuickItem
float rulerUnit = (max_y-10)/m_ruler_count;//卡尺比例
float scal_h = max_x;//毫米刻度，
float scal_m = max_x*0.8;//分米刻度
float scal_l = max_x*0.5;//厘米刻度
int totalCount = m_ruler_count*2 + 4;//刻度总数
QSGGeometryNode *node = 0;//定义node，用于场景图中的所有渲染内容
node = static_cast<QSGGeometryNode *>(oldNode);
QSGGeometry *geometry;//定义geometry，为图形提供低级存储
QSGFlatColorMaterial *material;//定义material，提供了一种在场景图中绘制纯色几何图形的方法
if(!node) {
node = new QSGGeometryNode;
geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), totalCount);//默认2d绘图。创建一个没有几何和材质的新的几何节点
geometry->setDrawingMode(GL_LINES);//绘图模式，GL画线
geometry->setLineWidth(m_line_width);//设置线宽
material = new QSGFlatColorMaterial;//实例
material->setColor(QColor(m_line_color));//设置颜色
node->setGeometry(geometry);//将geometry添加到node
node->setFlag(QSGNode::OwnsGeometry);//
node->setMaterial(material);//将此几何节点的材质设置为material
} else {
geometry = node->geometry();
material = static_cast<QSGFlatColorMaterial *>(node->material());
geometry->allocate(totalCount);
}
//定义vertices，获取的是geometry,2D的顶点数据指针
QSGGeometry::Point2D *vertices = geometry->vertexDataAsPoint2D();
int max = (m_scale_vp == LeftVP)? max_x : 0;//显示的位置
vertices[0].set(max, 0);//画直线从0开始画到max_y
vertices[1].set(max, max_y);//根据的是屏幕分辨率高度
float x0=0;
float y0=max_y;
float x;
float y;
int cout =1;
for(int i=0;i<=m_ruler_count;i++){
int itype = (i%5==0 && i%10==0)? 0 :((i%5==0 && i%10!=0)? 1 : 2); //0:max,1:mid,2:min
switch (itype) {
case 0:
x0 = 0;
x = scal_h;
y = y0;
break;
case 1:
x0 = (m_scale_vp == LeftVP)? scal_h*0.2 : 0;
x = (m_scale_vp == LeftVP)? scal_h : scal_m;
y = y0;
break;
case 2:
x0 = (m_scale_vp == LeftVP)? scal_l : 0;
x = (m_scale_vp == LeftVP)? scal_h : scal_l;
y = y0;
break;
default:
break;
}
vertices[++cout].set(x0, y0);//画线起始点
vertices[++cout].set(x, y);//终止点
y0 = y0 - rulerUnit;
}
node->markDirty(QSGNode::DirtyGeometry);
return node;
}
}
在主函数main中：
qmlRegisterType<OrdinateItem>("OrdinateItem.com", 1, 0, "OrdinateItem");//注册到qml中
在qml中引用：
import OrdinateItem.com 1.0
然后可以用了；
OrdinateItem{ id: ordId; width: 20; height: parent.height*0.4; rulerTotal: 35; anchors.bottom: horId.top;
//scaleViewPostion: 1
MouseArea{ anchors.fill: parent;
property point clickPos: "0,0"
onPressed: {
clickPos = Qt.point(mouse.x,mouse.y);
}
onPositionChanged: {
//鼠标偏移量
var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
coordId.x = coordId.x+delta.x;
coordId.y = coordId.y+delta.y;
}
}
}
