The realization of QML axis and curve adding _QML

The previous article introduced the use of Qpainter interface to draw a drag circle, through the official introduction:

Graphics in Qt 5 are primarily done either through the imperative Qpainter API, or through Qt ' s declarative UI language, QT Quick, and its scene graph Back-end.

We know that using the QT Quick module in QT5 can also achieve simple drawing. However, when we need to implement the axis in the QML, the feeling of using Qtquick to achieve a bit powerless. But don't be upset, look at this qquickpainteditem:

The Qquickpainteditem class provides a way the Qpainter API in the QML Scene Graph.

Qt Daniel should take into account the Qtquick, with this dongdong, you can play your imagination on the QML.

I inherited the Qquickpainteditem and implemented its paint method, drawing axes and adding curves in this method. The code is as follows:

void Qaxis::p aint (qpainter *painter) {m_painter = painter;
    Update the coordinate label and its position if (M_xautoscale) Updatexlabels () as the range of value of the axis changes;

    if (M_yautoscale) updateylabels ();

    Initxystate ();

    M_painter->setrenderhint (qpainter::antialiasing);
    Qmap<qstring, Curve*>::const_iterator cur; For (Cur=m_curvelist.begin (), Cur!=m_curvelist.end (); cur++) {for (int j=0; J<cur.value ()->getdata Size ();
            J + +) {qpointf tmp = Cur.value ()->getposdata (j);
            M_painter->setpen (Cur.value ()->getpointpen ());

            M_painter->drawellipse (tmp.x ()-1, Tmp.y ()-1, 2, 2); Draw Curve Title if (j = = Cur.value ()->getdatasize ()-1) {if (Cur.value ()
                    ; Gettitleshow ()) {Qpen pen;
                    Pen.setcolor (qt::red);

                    M_painter->setpen (pen);
           Double x = tmp.x () +8;         Double y = tmp.y ();
                    if (x > m_xposmax-20) x = x-25;

                    if (y > m_yposmax-20) y = y-25;
                M_painter->drawtext (qpointf (x, y), Cur.value ()->gettitle ());
            } break;
            } m_painter->setpen (Cur.value ()->getlinepen ());
        M_painter->drawline (Cur.value ()->getposdata (j), Cur.value ()->getposdata (j+1)); }
    }
}

To display axes in QML:

Import Qtquick 2.3 Import Qtquick.window 2.0 Import qtquick.controls 1.1//import QtQuick.Controls.Styles 1.1 Import QTQM
    L 2.2 Import Com.robinson.qaxis 1.0 Applicationwindow {Id:mainwindow visible:true WIDTH:SCREEN.WIDTH/2
            HEIGHT:SCREEN.HEIGHT/2 Qaxis {id:qaxis anchors.fill:parent component.oncompleted: {
            Setdirection ("Down");
            Setxvaluerange (0, 10);

            Setyvaluerange (0, 10);
            Setxlabels ("0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10");

            Setylabels ("0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10");
            Setautoscale ("X", true);

            Setautoscale ("Y", true);
            AddCurve ("Testcurve");
            Setgridshow (TRUE);
            AddData ("Testcurve", 0, 0);
            AddData ("Testcurve", 2, 2);
        AddData ("Testcurve", 5, 3);
    }///Make the Axis adaptive window size onWidthChanged:qAxis.setAxisSize (mainwindow.width, mainwindow.height); OnHeightChanged:qAxis.setAxisSIze (Mainwindow.width, mainwindow.height);
 }

Finally look at the effect of the picture:

SOURCE Download Address 1:http://download.csdn.net/detail/zbc415766331/9090579

SOURCE Download Address 2:https://github.com/robinsonsir/qmlqaxis