Modify Elastic Nodes QT5 Example

Greeting,
I am using this example of graph from QT5
https://doc.qt.io/qt-5/qtwidgets-gra...s-example.html

I want to modify it's node to use QGraphicsEllipseItem so I can change the size of the ellipse because I can't modify the existing one. But I don't how to do it. Can you suggest me how to modify existing node in Elastic Nodes, or how to use QGraphicsEllipseItem for node.

Thanks in advance

The example is already using ellipses to draw the nodes, and adds the features of a drop shadow and a gradient brush to draw the ellipses with a shading to give a bit of a 3D appearance.

So all you need to do if you want to change the size of the nodes is to add a member variable to hold the radius (assuming you want the ellipses to remain as circles) and substitute that value for the fixed value of 10 used in the example:

Code:

---

void Node::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *)
{
    painter->setPen(Qt::NoPen);
    painter->setBrush(Qt::darkGray);
    painter->drawEllipse( radius - 3, radius - 3, 2 * radius, 2 * radius );    // << changed
 
    QRadialGradient gradient( -3, -3, radius );      // << changed
    if (option->state & QStyle::State_Sunken) {
        gradient.setCenter(3, 3);
        gradient.setFocalPoint(3, 3);
        gradient.setColorAt(1, QColor(Qt::yellow).lighter(120));
        gradient.setColorAt(0, QColor(Qt::darkYellow).lighter(120));
    } else {
        gradient.setColorAt(0, Qt::yellow);
        gradient.setColorAt(1, Qt::darkYellow);
    }
    painter->setBrush(gradient);
 
    painter->setPen(QPen(Qt::black, 0));
    painter->drawEllipse( -radius, -radius, 2 * radius, 2 * radius );      // << changed
}

---

You will also have to change the Node class' boundingRect(), shape(), and possibly other size-related methods to account for the different radius, and you will need to add methods or properties to allow your code to set / get the Node radius.

Next, you will have to modify the Edge class' adjust() method to adapt to the possibly different radii of the two nodes at each end of the edge so that sourcePoint and destPoint correspond to the actual edges of the source and destination ellipses. Since it looks like all other methods of the Edge class depend on the correct sourcePoint and destPoint being set in adjust(), this is probably the only modification required to that class.

If you want to use actual ellipses with different x and y radii instead of a circle with x = y = radius, then the changes to the adjust() method are a lot more complex, because then you must account for the relative orientation of the two ellipses as they move. The distances from the centers to the edges of each ellipse depends on the angle of the line connecting the centers of each ellipse. With a circle, the distance from the center to the edge is a constant (the radius), independent of the angle.

The code above is untested, so use at your own risk. You will probably need some trial and error to get it all working correctly.

Quote:

---

Originally Posted by d_stranz

The example is already using ellipses to draw the nodes, and adds the features of a drop shadow and a gradient brush to draw the ellipses with a shading to give a bit of a 3D appearance.

So all you need to do if you want to change the size of the nodes is to add a member variable to hold the radius (assuming you want the ellipses to remain as circles) and substitute that value for the fixed value of 10 used in the example:

Code:

---

void Node::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *)
{
    painter->setPen(Qt::NoPen);
    painter->setBrush(Qt::darkGray);
    painter->drawEllipse( radius - 3, radius - 3, 2 * radius, 2 * radius );    // << changed
 
    QRadialGradient gradient( -3, -3, radius );      // << changed
    if (option->state & QStyle::State_Sunken) {
        gradient.setCenter(3, 3);
        gradient.setFocalPoint(3, 3);
        gradient.setColorAt(1, QColor(Qt::yellow).lighter(120));
        gradient.setColorAt(0, QColor(Qt::darkYellow).lighter(120));
    } else {
        gradient.setColorAt(0, Qt::yellow);
        gradient.setColorAt(1, Qt::darkYellow);
    }
    painter->setBrush(gradient);
 
    painter->setPen(QPen(Qt::black, 0));
    painter->drawEllipse( -radius, -radius, 2 * radius, 2 * radius );      // << changed
}

---

You will also have to change the Node class' boundingRect(), shape(), and possibly other size-related methods to account for the different radius, and you will need to add methods or properties to allow your code to set / get the Node radius.

Next, you will have to modify the Edge class' adjust() method to adapt to the possibly different radii of the two nodes at each end of the edge so that sourcePoint and destPoint correspond to the actual edges of the source and destination ellipses. Since it looks like all other methods of the Edge class depend on the correct sourcePoint and destPoint being set in adjust(), this is probably the only modification required to that class.

If you want to use actual ellipses with different x and y radii instead of a circle with x = y = radius, then the changes to the adjust() method are a lot more complex, because then you must account for the relative orientation of the two ellipses as they move. The distances from the centers to the edges of each ellipse depends on the angle of the line connecting the centers of each ellipse. With a circle, the distance from the center to the edge is a constant (the radius), independent of the angle.

The code above is untested, so use at your own risk. You will probably need some trial and error to get it all working correctly.

---

Thanks for your help. With little modification, I managed to increase the size.

Many thanks