Problem with derived class from QGraphicsItem and drawing

[airglide]

Hello everyone,

I've tried to create an ArrowItem (derived from QGraphicsItem) which displays an Arrow.

#include "arrowitem.h"
 
ArrowItem::ArrowItem(QGraphicsItem *parent)
    :QGraphicsItem(parent)
{
}
 
void ArrowItem::changeLine(QPointF start, QPointF end)
{
    double rSquared = 25.0;
    //Point which lies on line which indicates begining of the Arrow
    // ---|>
    QPointF onLine = 19.0/20.0*(end-start)+start;
 
    double m = (end.y()-start.y())/(end.x()-start.x());
    double mRect = -1/m;
    double b = onLine.y()- mRect*onLine.x();
    double c = qPow(mRect,2)+1.0;
    double d = 2.0*b*mRect -2.0*onLine.x() -2.0*mRect*onLine.y();
    double e = qPow(b,2) + qPow(onLine.x(),2) + qPow(onLine.y(),2) -2.0*b*onLine.y() -rSquared;
 
    double xOne = (-d + qSqrt(d*d-4.0*c*e))/(2.0*c);
    double yOne = xOne*mRect + b;
    double xTwo = (-d - qSqrt(d*d-4.0*c*e))/(2.0*c);
    double yTwo = xTwo*mRect + b;
 
    QPointF pointOne = QPointF(xOne,yOne);
    QPointF pointTwo = QPointF(xTwo,yTwo);
 
 
    triangle << pointOne << pointTwo << end << pointOne;
    line.setPoints(start, end);
 
    double distanceX;
    double width;
    double distanceY;
    double height;
 
    double left;
    double top;
 
    if(start.x() < end.x())
    {
        if(pointOne.x() > pointTwo.x())
        {
            distanceX = pointOne.x();
        }else{
            distanceX = pointOne.x();
        }
        if(end.x() > distanceX)
        {
            distanceX = end.x();
        }
        width = distanceX - start.x();
        left = start.x();
    }else{
        if(start.x() == end.x())
        {
            width = 20.0;
        }else{
            if(pointOne.x() < pointTwo.x())
            {
                distanceX = pointOne.x();
            }else{
                distanceX = pointOne.x();
            }
            if(end.x() < distanceX)
            {
                distanceX = end.x();
            }
            width = start.x() - distanceX;
            left = distanceX;
        }
    }
 
    //get height
    if(start.y() > end.y())
    {
         if(pointOne.y() < pointTwo.y())
         {
             distanceY = pointOne.y();
         }else{
             distanceY = pointTwo.y();
 
             if(end.y() < distanceY)
             {
                 distanceY = end.y();
             }
         }
         height = start.y() - distanceY;
         top = start.y();
     }else{
        if(start.y() == end.y())
        {
            height = 20.0;
        }else{
             if(pointOne.y() > pointTwo.y())
             {
                 distanceY = pointOne.y();
             }else{
                 distanceY = pointTwo.y();
 
                 if(end.y() > distanceY)
                 {
                     distanceY = end.y();
                 }
             }
             height = distanceY - start.y();
             top = distanceY;
        }
     }
 
    double penwidth = 3.0;
    prepareGeometryChange();
    rect = QRectF(left -penwidth/2,top -penwidth/2,width + penwidth,height + penwidth);
    update();
}
 
QRectF ArrowItem::boundingRect() const
{
    return rect;
}
 
void ArrowItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
{
    painter->setPen(QPen(Qt::black, 3, Qt::SolidLine, Qt::FlatCap, Qt::RoundJoin));
    painter->drawLine(line);
 
    //painter->setBrush(QBrush(Qt::black));
    painter->drawPolygon(triangle);
 
}

#include "arrowitem.h"

ArrowItem::ArrowItem(QGraphicsItem *parent)
    :QGraphicsItem(parent)
{
}

void ArrowItem::changeLine(QPointF start, QPointF end)
{
    double rSquared = 25.0;
    //Point which lies on line which indicates begining of the Arrow
    // ---|>
    QPointF onLine = 19.0/20.0*(end-start)+start;

    double m = (end.y()-start.y())/(end.x()-start.x());
    double mRect = -1/m;
    double b = onLine.y()- mRect*onLine.x();
    double c = qPow(mRect,2)+1.0;
    double d = 2.0*b*mRect -2.0*onLine.x() -2.0*mRect*onLine.y();
    double e = qPow(b,2) + qPow(onLine.x(),2) + qPow(onLine.y(),2) -2.0*b*onLine.y() -rSquared;

    double xOne = (-d + qSqrt(d*d-4.0*c*e))/(2.0*c);
    double yOne = xOne*mRect + b;
    double xTwo = (-d - qSqrt(d*d-4.0*c*e))/(2.0*c);
    double yTwo = xTwo*mRect + b;

    QPointF pointOne = QPointF(xOne,yOne);
    QPointF pointTwo = QPointF(xTwo,yTwo);


    triangle << pointOne << pointTwo << end << pointOne;
    line.setPoints(start, end);

    double distanceX;
    double width;
    double distanceY;
    double height;

    double left;
    double top;

    if(start.x() < end.x())
    {
        if(pointOne.x() > pointTwo.x())
        {
            distanceX = pointOne.x();
        }else{
            distanceX = pointOne.x();
        }
        if(end.x() > distanceX)
        {
            distanceX = end.x();
        }
        width = distanceX - start.x();
        left = start.x();
    }else{
        if(start.x() == end.x())
        {
            width = 20.0;
        }else{
            if(pointOne.x() < pointTwo.x())
            {
                distanceX = pointOne.x();
            }else{
                distanceX = pointOne.x();
            }
            if(end.x() < distanceX)
            {
                distanceX = end.x();
            }
            width = start.x() - distanceX;
            left = distanceX;
        }
    }

    //get height
    if(start.y() > end.y())
    {
         if(pointOne.y() < pointTwo.y())
         {
             distanceY = pointOne.y();
         }else{
             distanceY = pointTwo.y();

             if(end.y() < distanceY)
             {
                 distanceY = end.y();
             }
         }
         height = start.y() - distanceY;
         top = start.y();
     }else{
        if(start.y() == end.y())
        {
            height = 20.0;
        }else{
             if(pointOne.y() > pointTwo.y())
             {
                 distanceY = pointOne.y();
             }else{
                 distanceY = pointTwo.y();

                 if(end.y() > distanceY)
                 {
                     distanceY = end.y();
                 }
             }
             height = distanceY - start.y();
             top = distanceY;
        }
     }

    double penwidth = 3.0;
    prepareGeometryChange();
    rect = QRectF(left -penwidth/2,top -penwidth/2,width + penwidth,height + penwidth);
    update();
}

QRectF ArrowItem::boundingRect() const
{
    return rect;
}

void ArrowItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
{
    painter->setPen(QPen(Qt::black, 3, Qt::SolidLine, Qt::FlatCap, Qt::RoundJoin));
    painter->drawLine(line);

    //painter->setBrush(QBrush(Qt::black));
    painter->drawPolygon(triangle);

}

To copy to clipboard, switch view to plain text mode 

I don't really get where I've made a mistake because I used the prepareGeometrychange() method before I change the boundingRect and I've called the update() method
If I create a new object of this class and call the method ArrowItem::changeLine with the starting Point (where the mousePressEvent happened) and end point (where the mousemoveEvent happened), there are pieces left on the screen.

thank you very much

airglide

[wysota]

What do you pass to changeLine()? I'm assuming you're passing two points in scene coordinates. This is not entirely correct as then boundingRect() of the line is also specified in scene coordinates instead of local item coordinates. I would suggest to treat "start" as origin of the item coordinate system. Then start changes to (0,0), end changes to (end-start), bounding rect is from (0,0) to new value for end adjusted to fit the arrow head. Finally you need to use QGraphicsItem::setPos() to move the arrow to the original value of start.

I don't want to analyze your current calculations, if I were to guess what was wrong with it is that you didn't adjust for the arrow head thus painting outside the bounding rectangle of the item. So technically speaking you should fix only that but please also consider what I have written in the beginning.

[airglide]

yes, your right, I'm calling changleLine with scene coordinates. Is it not better to try that my left upper corner is always (0/0)? Because start isn't always my left upper corner

I've tried to find my mistake with QRectF but haven't found one that solves my problem

The points of the triangle (pointOne, pointTwo) are correct I've checked that and the QRectF too

#include "arrowitem.h"
 
ArrowItem::ArrowItem(QGraphicsItem *parent)
    :QGraphicsItem(parent)
{
}
 
void ArrowItem::changeLine(QPointF start, QPointF end)
{
    double penwidth = 3.0;
 
    double radius = 5.0;
    //Point which lies on line which indicates begining of the Arrow
    // ---|>
    QPointF onLine = 19.0/20.0*(end-start)+start;
    QPointF pointOne;
    QPointF pointTwo;
 
    double width;
    double height;
 
    double top;
    double left;
 
    if((start.x() != end.x()) && (start.y() != end.y()))
    {
        double m = (end.y()-start.y())/(end.x()-start.x());
        double mRect = -1/m;
        double b = onLine.y()- mRect*onLine.x();
        double c = qPow(mRect,2)+1.0;
        double d = 2.0*b*mRect -2.0*onLine.x() -2.0*mRect*onLine.y();
        double e = qPow(b,2) + qPow(onLine.x(),2) + qPow(onLine.y(),2) -2.0*b*onLine.y() -qPow(radius,2);
 
        double xOne = (-d + qSqrt(d*d-4.0*c*e))/(2.0*c);
        double yOne = xOne*mRect + b;
        double xTwo = (-d - qSqrt(d*d-4.0*c*e))/(2.0*c);
        double yTwo = xTwo*mRect + b;
 
        pointOne = QPointF(xOne,yOne);
        pointTwo = QPointF(xTwo,yTwo);
 
        double distanceX;
        double distanceY;
 
        //get width & left
        if(start.x() < end.x())
        {
            if(pointOne.x() > pointTwo.x())
            {
                distanceX = pointOne.x();
            }else{
                distanceX = pointTwo.x();
            }
            if(end.x() > distanceX)
            {
                distanceX = end.x();
            }
            width = distanceX - start.x();
            left = start.x();
        }else{
                if(pointOne.x() < pointTwo.x())
                {
                    distanceX = pointOne.x();
                }else{
                    distanceX = pointTwo.x();
                }
                if(end.x() < distanceX)
                {
                    distanceX = end.x();
                }
                width = start.x() - distanceX;
                left = distanceX;
        }
 
        //get height & top
        if(start.y() > end.y())
        {
             if(pointOne.y() < pointTwo.y())
             {
                 distanceY = pointOne.y();
             }else{
                 distanceY = pointTwo.y();
             }
 
             if(end.y() < distanceY)
             {
                distanceY = end.y();
             }
 
             height = start.y() - distanceY;
             top = distanceY;
         }else{
            if(pointOne.y() > pointTwo.y())
            {
                distanceY = pointOne.y();
            }else{
                distanceY = pointTwo.y();
            }
 
            if(end.y() > distanceY)
            {
                distanceY = end.y();
            }
            height = distanceY - start.y();
            top = start.y();
         }
 
    }else{
        if(start.x() == end.x())
        {
            pointOne = QPointF(onLine.x() + radius, onLine.y());
            pointTwo = QPointF(onLine.x() - radius, onLine.y());
 
            width = 2.0*radius;
            left = pointTwo.x();
 
            if(start.y() > end.y())
            {
                height = start.y()-end.y();
                top = end.y();
            }else{
                height= end.y()-start.y();
                top = start.y();
            }
 
 
        }else{
            pointOne = QPointF(onLine.x(), onLine.y() + radius);
            pointTwo = QPointF(onLine.x(), onLine.y() - radius);
 
            height = 2.0*radius;
            top = pointTwo.y();
 
            if(start.x() < end.x())
            {
                left = start.x();
                width = end.x()-start.x();
            }else{
                left = end.x();
                width = start.x()-end.x();
            }
        }
    }
 
    triangle << pointOne << pointTwo << end << pointOne;
    line.setPoints(start, end);
 
    prepareGeometryChange();
    rect = QRectF(left -penwidth/2,top -penwidth/2,width + penwidth,height + penwidth);
 
    update();
}
 
QRectF ArrowItem::boundingRect() const
{
    return rect;
}
 
void ArrowItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
{
    painter->setPen(QPen(Qt::black, 3, Qt::SolidLine, Qt::FlatCap, Qt::RoundJoin));
    painter->drawLine(line);
 
    //painter->setBrush(QBrush(Qt::black));
    painter->drawPolygon(triangle);
}

#include "arrowitem.h"

ArrowItem::ArrowItem(QGraphicsItem *parent)
    :QGraphicsItem(parent)
{
}

void ArrowItem::changeLine(QPointF start, QPointF end)
{
    double penwidth = 3.0;

    double radius = 5.0;
    //Point which lies on line which indicates begining of the Arrow
    // ---|>
    QPointF onLine = 19.0/20.0*(end-start)+start;
    QPointF pointOne;
    QPointF pointTwo;

    double width;
    double height;

    double top;
    double left;

    if((start.x() != end.x()) && (start.y() != end.y()))
    {
        double m = (end.y()-start.y())/(end.x()-start.x());
        double mRect = -1/m;
        double b = onLine.y()- mRect*onLine.x();
        double c = qPow(mRect,2)+1.0;
        double d = 2.0*b*mRect -2.0*onLine.x() -2.0*mRect*onLine.y();
        double e = qPow(b,2) + qPow(onLine.x(),2) + qPow(onLine.y(),2) -2.0*b*onLine.y() -qPow(radius,2);

        double xOne = (-d + qSqrt(d*d-4.0*c*e))/(2.0*c);
        double yOne = xOne*mRect + b;
        double xTwo = (-d - qSqrt(d*d-4.0*c*e))/(2.0*c);
        double yTwo = xTwo*mRect + b;

        pointOne = QPointF(xOne,yOne);
        pointTwo = QPointF(xTwo,yTwo);

        double distanceX;
        double distanceY;

        //get width & left
        if(start.x() < end.x())
        {
            if(pointOne.x() > pointTwo.x())
            {
                distanceX = pointOne.x();
            }else{
                distanceX = pointTwo.x();
            }
            if(end.x() > distanceX)
            {
                distanceX = end.x();
            }
            width = distanceX - start.x();
            left = start.x();
        }else{
                if(pointOne.x() < pointTwo.x())
                {
                    distanceX = pointOne.x();
                }else{
                    distanceX = pointTwo.x();
                }
                if(end.x() < distanceX)
                {
                    distanceX = end.x();
                }
                width = start.x() - distanceX;
                left = distanceX;
        }

        //get height & top
        if(start.y() > end.y())
        {
             if(pointOne.y() < pointTwo.y())
             {
                 distanceY = pointOne.y();
             }else{
                 distanceY = pointTwo.y();
             }

             if(end.y() < distanceY)
             {
                distanceY = end.y();
             }

             height = start.y() - distanceY;
             top = distanceY;
         }else{
            if(pointOne.y() > pointTwo.y())
            {
                distanceY = pointOne.y();
            }else{
                distanceY = pointTwo.y();
            }

            if(end.y() > distanceY)
            {
                distanceY = end.y();
            }
            height = distanceY - start.y();
            top = start.y();
         }

    }else{
        if(start.x() == end.x())
        {
            pointOne = QPointF(onLine.x() + radius, onLine.y());
            pointTwo = QPointF(onLine.x() - radius, onLine.y());

            width = 2.0*radius;
            left = pointTwo.x();

            if(start.y() > end.y())
            {
                height = start.y()-end.y();
                top = end.y();
            }else{
                height= end.y()-start.y();
                top = start.y();
            }


        }else{
            pointOne = QPointF(onLine.x(), onLine.y() + radius);
            pointTwo = QPointF(onLine.x(), onLine.y() - radius);

            height = 2.0*radius;
            top = pointTwo.y();

            if(start.x() < end.x())
            {
                left = start.x();
                width = end.x()-start.x();
            }else{
                left = end.x();
                width = start.x()-end.x();
            }
        }
    }

    triangle << pointOne << pointTwo << end << pointOne;
    line.setPoints(start, end);

    prepareGeometryChange();
    rect = QRectF(left -penwidth/2,top -penwidth/2,width + penwidth,height + penwidth);
    
    update();
}

QRectF ArrowItem::boundingRect() const
{
    return rect;
}

void ArrowItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
{
    painter->setPen(QPen(Qt::black, 3, Qt::SolidLine, Qt::FlatCap, Qt::RoundJoin));
    painter->drawLine(line);

    //painter->setBrush(QBrush(Qt::black));
    painter->drawPolygon(triangle);
}

To copy to clipboard, switch view to plain text mode 

That shouldn't make a difference but I'm using the Item as a child of a bigger item.

[wysota]

yes, your right, I'm calling changleLine with scene coordinates. Is it not better to try that my left upper corner is always (0/0)? Because start isn't always my left upper corner

I didn't say anything about start being your top-left corner. I said it is the origin (the point where your item is "attached" to its parent item). The item can have negative coordinates, e.g. it's quite common that the origin is in the centre of the item.

I've tried to find my mistake with QRectF but haven't found one that solves my problem

The points of the triangle (pointOne, pointTwo) are correct I've checked that and the QRectF too

Your boundingRect calculation is incorrect, that's for sure. I changed your paint() routine to draw the boundingRect() of the item and if I create a line that is almost horizontal (e.g. from 30, 30 to 300, 32) the arrow head extends past the bounding rect.

[d_stranz]

You know, you could probably eliminate almost all of these complex calculations if you simply made a "standard" arrow of unit size (e.g. length 1.0 and arrowhead size as whatever fraction of that makes a pleasing triangle) pointing from left to right on the X axis. This would be done once in the item constructor.

Then in your change arrow method, use the start and end points to calculate the angle of the line with respect to the x axis and set the rotation transformation accordingly. If the whole arrowhead should scale for larger distances between start and end, then set the scale transformation too.

You basically have almost no geometry calculation at all: an arccosine to determine the angle, and a couple of ratios to determine scale factors. Your bounding rect is simply determined by rotating the upper left and lower right points by the angle of the arrow.

[airglide]

thanks for clearafing the first one, you were right with the second one, I've fixed that but the real problem wasn't that, I made a silly mistake,

triangle << pointOne << pointTwo << end << pointOne;

triangle << pointOne << pointTwo << end << pointOne;

To copy to clipboard, switch view to plain text mode 

it added the new points to the old one's and because of that i had all this triangles which were correctly repainted

thank you for your help )

@d_stanz
yes, you're right. It was only a prototype but it made me crazy because it didn't work. I'll consider this when i'll design the real class, thanks

[d_stranz]

In fact, you don't have to implement any of the transformations I described in the arrow class itself. All the arrow class has to do is to draw a "unit arrow" pointing from left to right.

The scene (or whatever graphics item contains the arrow as a child) is responsible for transforming it to the right size, pointing in the right direction. You create the arrow shaft and head in the constructor with unit dimensions, and paint them that way in the paint() method. The QPainter instance that comes into the paint() method has already been transformed to draw the arrow the way it is supposed to appear on screen.

So your arrow class simplifies to just the paint() method, and the bounding rect is simply the constant bounds of the unit arrow. You don't have to implement any behavior that responds to changes in size or direction - that's the responsibility of the scene or parent item.

All you have to decide is where the origin of your arrow will be. Where is (0,0) on the unit arrow? At the start of the line, tip of the arrowhead, or somewhere in between? This might depend on how you anticipate using the arrow - will it be used to point at something, or away from something? If it points at something, then you probably want the origin to be at the tip, otherwise it should be at the start of the line. Whichever you decide, it would be nice to add some convenience functions to return the QPoints corresponding to each end of the arrow so if you use it to connect two things, you can easily get both ends and convert them to screen positions.