Results 1 to 3 of 3

Thread: Modify Elastic Nodes QT5 Example

  1. #1
    Join Date
    Jul 2019
    Posts
    2
    Thanks
    1
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default 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

  2. #2
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Modify Elastic Nodes QT5 Example

    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:

    Qt Code:
    1. void Node::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *)
    2. {
    3. painter->setPen(Qt::NoPen);
    4. painter->setBrush(Qt::darkGray);
    5. painter->drawEllipse( radius - 3, radius - 3, 2 * radius, 2 * radius ); // << changed
    6.  
    7. QRadialGradient gradient( -3, -3, radius ); // << changed
    8. if (option->state & QStyle::State_Sunken) {
    9. gradient.setCenter(3, 3);
    10. gradient.setFocalPoint(3, 3);
    11. gradient.setColorAt(1, QColor(Qt::yellow).lighter(120));
    12. gradient.setColorAt(0, QColor(Qt::darkYellow).lighter(120));
    13. } else {
    14. gradient.setColorAt(0, Qt::yellow);
    15. gradient.setColorAt(1, Qt::darkYellow);
    16. }
    17. painter->setBrush(gradient);
    18.  
    19. painter->setPen(QPen(Qt::black, 0));
    20. painter->drawEllipse( -radius, -radius, 2 * radius, 2 * radius ); // << changed
    21. }
    To copy to clipboard, switch view to plain text mode 

    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.
    Last edited by d_stranz; 5th July 2019 at 18:17.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  3. The following user says thank you to d_stranz for this useful post:

    Annabela_cortez (7th July 2019)

  4. #3
    Join Date
    Jul 2019
    Posts
    2
    Thanks
    1
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default Re: Modify Elastic Nodes QT5 Example

    Quote Originally Posted by d_stranz View Post
    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:

    Qt Code:
    1. void Node::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *)
    2. {
    3. painter->setPen(Qt::NoPen);
    4. painter->setBrush(Qt::darkGray);
    5. painter->drawEllipse( radius - 3, radius - 3, 2 * radius, 2 * radius ); // << changed
    6.  
    7. QRadialGradient gradient( -3, -3, radius ); // << changed
    8. if (option->state & QStyle::State_Sunken) {
    9. gradient.setCenter(3, 3);
    10. gradient.setFocalPoint(3, 3);
    11. gradient.setColorAt(1, QColor(Qt::yellow).lighter(120));
    12. gradient.setColorAt(0, QColor(Qt::darkYellow).lighter(120));
    13. } else {
    14. gradient.setColorAt(0, Qt::yellow);
    15. gradient.setColorAt(1, Qt::darkYellow);
    16. }
    17. painter->setBrush(gradient);
    18.  
    19. painter->setPen(QPen(Qt::black, 0));
    20. painter->drawEllipse( -radius, -radius, 2 * radius, 2 * radius ); // << changed
    21. }
    To copy to clipboard, switch view to plain text mode 

    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

Similar Threads

  1. Interconnected nodes
    By mut in forum Qt Programming
    Replies: 1
    Last Post: 16th July 2017, 17:59
  2. Replies: 6
    Last Post: 3rd August 2012, 07:48
  3. elastic node re-engineering
    By sajis997 in forum Newbie
    Replies: 5
    Last Post: 6th August 2011, 01:05
  4. elastic nodes example
    By sajis997 in forum Newbie
    Replies: 2
    Last Post: 3rd August 2011, 16:08
  5. elastic QGraphicsItem (layout problem)
    By petar in forum Newbie
    Replies: 9
    Last Post: 11th November 2009, 18:12

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.