highlight QGraphicsItem

[user4592357]

@kenchan
as you can see in code, i set a boolean in hover event and in paint() check - if it's hovered draw outline, but it doesn't. i also tried to call update() inside hoverEnterEvent - still no luck

[kenchan]

@user4592357
What don't you understand about how to draw it?
If you want an outline around a line the easiest way is to draw a thin line on top of a thicker line using the same two points.
You draw the thick one first then you draw the thin one on top. If you want to make absolutely sure that the thin one is on top you can set the z value of it to be above the thick one.

[kenchan]

@user4592357
And does you hovered flag actually get set?

[kenchan]

@user4592357
Are you adding the pen thickness to your bounding rect?
Also, I think you must call prepareGeometyChange() if you change the shape or size of the bounding box etc.
You usually call this in a setting function that results in a change in shape. In your case you probably want to do it in your event function.

[user4592357]

@kenchan
z value of what? QLine?

[kenchan]

@user4592357
Ah, sorry that is a property of your graphics item :-) no, I think just the draw order should work for the painter.

[kenchan]

@user4592357
So, did you have any luck with it yet?

[user4592357]

@kenchan
no this is what i get:

no hover:

after hover:

code:

    def paint(self, painter, option, widget):
        pen = QPen(Qt.red)
        if self.__hovered:
            # what should go here?
            self.__hovered = False
            pen.setColor(Qt.white)
            pen.setWidth(8)
            painter.setPen(pen)
            painter.drawLine(QPoint(0, 0), QPoint(100, 100))
            painter.drawLine(QPoint(0, 100), QPoint(100, 0))

        pen.setWidth(4)
        painter.setPen(pen)

        line = QLine(QPoint(0, 0), QPoint(100, 100))
        painter.drawLine(line)
        painter.drawLine(QPoint(0, 100), QPoint(100, 0))

    def boundingRect(self):
        return QRectF(0, 0, 108, 108)

    def hoverEnterEvent(self, event):
        # self.setGraphicsEffect(QGraphicsColorizeEffect())
        self.__hovered = True
        self.update()
        self.prepareGeometryChange()

    def hoverLeaveEvent(self, event):
        self.setGraphicsEffect(None)

[kenchan]

@user4592357
Hmm so that red thing is your thin line version?

[user4592357]

@kenchan
yes

[kenchan]

@user4592357
so, it is drawing it but in the wrong place?

[kenchan]

@user4592357
you are still not reseting the hover flag in hoverleave so it is always on, right?

[user4592357]

@kenchan
i reset it after drawing the white line.
it is drawing above red line instead of around it

[kenchan]

@user4592357
Well I am sorry to say that i just made a test using the same ideas in C++ and it works just fine for me and I don't have to call update :-).
So are we seeing a Python issue here or is it your paint function ?

[user4592357]

@kenchan
can you please share the code? maybe i am missing something?

[kenchan]

@user4592357
It is in an app for testing my QGraphicsItems but I can share the code for the subclass.
As a matter of interest what settings do you use for the QGraphicsScene and View? maybe the drawing is being influenced by those settings?

[kenchan]

@user4592357
Looking at your paint code, I think it is wrong. I think you should separate the line drawing into two if sections.

One draws both lines when hovering and the other draws just one line when not. That is how my code is. I tried it your way and I only saw the the thick lines.

[kenchan]

@user4592357

Here is my code, i hope it helps.

EDIT: added the code for the shape() member function;
Using a path stroker with the same line thickness as the thin line.
Also, made the highlight line 50% transparent.

The header

class TestItem : public QGraphicsItem
{
public:
    bool hovering;
public:
    explicit TestItem(QGraphicsItem * parent = 0);

    void setHovering(bool flag);
    QRectF boundingRect() const;
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
   QPainterPath shape() const;

    virtual void hoverEnterEvent(QGraphicsSceneHoverEvent * event);
    virtual void hoverLeaveEvent(QGraphicsSceneHoverEvent * event);

};

The code

TestItem::TestItem(QGraphicsItem * parent) : QGraphicsItem(parent)
{
    setAcceptHoverEvents(true);
    hovering = false;
}

void TestItem::setHovering(bool flag)
{
    hovering = flag;

}

QRectF TestItem::boundingRect() const
{
    if(hovering)
        return QRectF(-4, -4, 106, 106);
    else
        return QRectF(-2,-2, 102, 102);
}

void TestItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    QPen pen1(QBrush(QColor(0,255,0,128)),8,Qt::SolidLine,Qt::RoundCap);
    QPen pen2(QBrush(QColor(255,0,0)),2,Qt::SolidLine,Qt::RoundCap);

    if(hovering)
    {
        painter->setPen(pen1);
        painter->drawLine(0.0,0.0,100.0,100.0);
        painter->drawLine(0.0,100.0,100.0,00.0);

        painter->setPen(pen2);
        painter->drawLine(0.0,0.0,100.0,100.0);
        painter->drawLine(0.0,100.0,100.0,00.0);
    }
    else
    {
        painter->setPen(pen2);
        painter->drawLine(0.0,0.0,100.0,100.0);
        painter->drawLine(0.0,100.0,100.0,00.0);
    }
}

QPainterPath TestItem::shape() const
{
    QPainterPath path;
    path.moveTo(0,0);
    path.lineTo(100,100);
    path.moveTo(0,100);
    path.lineTo(100,0);
    QPen pen(QBrush(QColor(255,0,0)),2,Qt::SolidLine,Qt::RoundCap);
    QPainterPathStroker stroker(pen);
    return stroker.createStroke(path);
}

void TestItem::hoverEnterEvent(QGraphicsSceneHoverEvent * event)
{
    prepareGeometryChange();
    setHovering(true);
}

void TestItem::hoverLeaveEvent(QGraphicsSceneHoverEvent * event)
{
    prepareGeometryChange();
    setHovering(false);
}

[kenchan]

@user4592357
I edited the code a bit to make it thicker gave it round caps and made the bounding rect a tad bigger. It was leaving crud behind after it was removed :-)
looks nicer now.

[user4592357]

@kenchan
thnaks.

i was missing the call to prepareGeometryChange() in hoverLeaveEvent

by the way i noticed that when i hover over the bottom (in picture) item, it "goes up". when i hover over the top item, it "goes down".

this happens only after first time hovering. after that they don't move.

what is the reason?