Canvas Control

We'll review just one of the drawing functions, to see how canvas items are created and placed on a canvas since this tutorial is about Qt rather than good (or bad) algorithms for drawing charts.

    void ChartForm::drawHorizontalBarChart(
            const double scales[], double total, int count )
    {

To draw a horizontal bar chart we need the array of scaled values, the total value (so that we can calculate and draw percentages if required) and a count of the number of values.

        double width = m_canvas->width();
        double height = m_canvas->height();
        int proheight = int(height / count);
        int y = 0;

We retrieve the width and height of the canvas and calculate the proportional height (proheight). We set the initial y position to 0.

        QPen pen;
        pen.setStyle( NoPen );

We create a pen that we will use to draw each bar (rectangle); we set it to NoPen so that no outlines are drawn.

        for ( int i = 0; i < MAX_ELEMENTS; ++i ) {
            if ( m_elements[i].isValid() ) {
                int extent = int(scales[i]);

We iterate over every element in the element vector, skipping invalid elements. The extent of each bar (its length) is simply its scaled value.

                QCanvasRectangle *rect = new QCanvasRectangle(
                                                0, y, extent, proheight, m_canvas );
                rect->setBrush( QBrush( m_elements[i].valueColor(),
                                        BrushStyle(m_elements[i].valuePattern()) ) );
                rect->setPen( pen );
                rect->setZ( 0 );
                rect->show();

We create a new QCanvasRectangle for each bar with an x position of 0 (since this is a horizontal bar chart every bar begins at the left), a y value that starts at 0 and grows by the height of each bar as each one is drawn, the height of the bar and the canvas that the bar should be drawn on. We then set the bar's brush to the color and pattern that the user has specified for the element, set the pen to the pen we created earlier (i.e. to NoPen) and we place the bar at position 0 in the Z-order. Finally we call show() to draw the bar on the canvas.

                QString label = m_elements[i].label();
                if ( !label.isEmpty() || m_addValues != NO ) {
                    double proX = m_elements[i].proX( HORIZONTAL_BAR );
                    double proY = m_elements[i].proY( HORIZONTAL_BAR );
                    if ( proX < 0 || proY < 0 ) {
                        proX = 0;
                        proY = y / height;
                    }

If the user has specified a label for the element or asked for the values (or percentages) to be shown, we also draw a canvas text item. We created our own CanvasText class (see later) because we want to store the corresponding element index (in the element vector) in each canvas text item. We extract the proportional x and y values from the element. If either is < 0 then they have not been positioned by the user so we must calculate positions for them. We set the label's x value to 0 (left) and the y value to the top of the bar (so that the label's top-left will be at this x, y position).

                    label = valueLabel( label, m_elements[i].value(), total );

We then call a helper function valueLabel() which returns a string containing the label text. (The valueLabel() function adds on the value or percentage to the textual label if the user has set the appropriate options.)

                    CanvasText *text = new CanvasText( i, label, m_font, m_canvas );
                    text->setColor( m_elements[i].labelColor() );
                    text->setX( proX * width );
                    text->setY( proY * height );
                    text->setZ( 1 );
                    text->show();
                    m_elements[i].setProX( HORIZONTAL_BAR, proX );
                    m_elements[i].setProY( HORIZONTAL_BAR, proY );

We then create a CanvasText item, passing it the index of this element in the element vector, and the label, font and canvas to use. We set the text item's text color to the color specified by the user and set the item's x and y positions proportional to the canvas's width and height. We set the Z-order to 1 so that the text item will always be above (in front of) the bar (whose Z-order is 0). We call show() to draw the text item on the canvas, and set the element's relative x and y positions.

                }
                y += proheight;

After drawing a bar and possibly its label, we increment y by the proportional height ready to draw the next element.

            }
        }
    }

Subclassing QCanvasText

    class CanvasText : public QCanvasText
    {
    public:
        enum { CANVAS_TEXT = 1100 };

        CanvasText( int index, QCanvas *canvas )
            : QCanvasText( canvas ), m_index( index ) {}
        CanvasText( int index, const QString& text, QCanvas *canvas )
            : QCanvasText( text, canvas ), m_index( index ) {}
        CanvasText( int index, const QString& text, QFont font, QCanvas *canvas )
            : QCanvasText( text, font, canvas ), m_index( index ) {}

        int index() const { return m_index; }
        void setIndex( int index ) { m_index = index; }

        int rtti() const { return CANVAS_TEXT; }

    private:
        int m_index;
    };

    class CanvasView : public QCanvasView
    {
        Q_OBJECT
    public:
        CanvasView( QCanvas *canvas, ElementVector *elements,
                    QWidget* parent = 0, const char* name = "canvas view",
                    WFlags f = 0 )
            : QCanvasView( canvas, parent, name, f ), m_movingItem(0),
              m_elements( elements ) {}

    protected:
        void viewportResizeEvent( QResizeEvent *e );
        void contentsMousePressEvent( QMouseEvent *e );
        void contentsMouseMoveEvent( QMouseEvent *e );
        void contentsContextMenuEvent( QContextMenuEvent *e );

    private:
        QCanvasItem *m_movingItem;
        QPoint m_pos;
        ElementVector *m_elements;
    };

    void CanvasView::contentsContextMenuEvent( QContextMenuEvent * )
    {
        ((ChartForm*)parent())->optionsMenu->exec( QCursor::pos() );
    }

    void CanvasView::viewportResizeEvent( QResizeEvent *e )
    {
        canvas()->resize( e->size().width(), e->size().height() );
        ((ChartForm*)parent())->drawElements();
    }

    void CanvasView::contentsMousePressEvent( QMouseEvent *e )
    {
        QCanvasItemList list = canvas()->collisions( e->pos() );
        for ( QCanvasItemList::iterator it = list.begin(); it != list.end(); ++it )
            if ( (*it)->rtti() == CanvasText::CANVAS_TEXT ) {
                m_movingItem = *it;
                m_pos = e->pos();
                return;
            }
        m_movingItem = 0;
    }

    void CanvasView::contentsMouseMoveEvent( QMouseEvent *e )
    {
        if ( m_movingItem ) {
            QPoint offset = e->pos() - m_pos;
            m_movingItem->moveBy( offset.x(), offset.y() );
            m_pos = e->pos();
            ChartForm *form = (ChartForm*)parent();
            form->setChanged( TRUE );
            int chartType = form->chartType();
            CanvasText *item = (CanvasText*)m_movingItem;
            int i = item->index();

            (*m_elements)[i].setProX( chartType, item->x() / canvas()->width() );
            (*m_elements)[i].setProY( chartType, item->y() / canvas()->height() );

            canvas()->update();
        }
    }