Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Typing on a QWidget



  • I currently have a plan for a canvas/drawing QWidget.

    One feature I would like is for me to be able to type text on it and be able to change the font and size of the text. I've written the other parts of the program with Qpainter, so that there is functionality to draw shapes and images. But what could I use that could bring up a textbox for the user to type text into that starts at that spot, I imagine one way would be to use a dialog box but is there something is sleeker and doesn't require leaving the current QWidget


  • Lifetime Qt Champion

    Hi
    There is nothing that would allow in-place editing and formatting as far as i know.

    However, using QTextDocument/QTextEdit as a render (aka)

    QTextEdit te("This is a rich text");
    te.resize(100, 100);
    QPixmap pix = QPixmap::grabWidget (&te, te.rect()); // this you draw/update after edit/remove on delete
    
    

    and then a mini list system of "textobjects" x,y,image, Text
    that you paint over what you draw with QPainter

    then override mousepress/add to and loop your list to be able to click them.
    (and pop a dialog )

    that allows you to draw formatted text in various sizes and change its properties.

    This would be a basic solution. In place draw while typing would require a very custom widget.(IMHO)


  • Lifetime Qt Champion

    Hi,

    Are you implementing something like QGraphicsTextItem ?


  • Lifetime Qt Champion

    @SGaist
    Good catch ! Actually for the whole Widget :)



  • Honestly not entirely sure what the implementation could be, but the ideal thing would be when i click on the screen it just allows me to type there, a bit like how you could on a photo editor like photoshop.

    @mrjj
    I think QTextEdit is one way to do it,but I'm just trying to see if there's a more seemless way of doing it. Perhaps even a flashing line where the next character will be inputted.

    @SGaist
    Possibly, but does it allow me to write in real time and display? I've been using QPainter so far, and the various draw methods. So I was thinking it would probably be just using drawText.


  • Lifetime Qt Champion

    Yes it does. You can check its implementation.



  • This post is deleted!


  • Would I have to use QGraphicsView for this then?
    Ideally I would like to use it inside a paintEvent method that I have that paints all the other objects and images.


  • Lifetime Qt Champion

    Usually on painting application, you have a dedicated functionality for that. It seems that you want to have everything done by a single class. Is that the case ?



  • I think so, I have a class called canvas, that inherits from QWidget, and in there. I have a method to detect mouse clicks and a paintEvent method. All my painting is done in there.


  • Lifetime Qt Champion

    You might want to consider splitting things a bit. Having one mega class that does everything is usually a bad sign.

    The Graphics View framework might give you some ideas as well as the plug and paint example.



  • Ok, I'll have a look, there are only just the 2 methods for registering mouse clicks and doing the paintevent in my canvas class. With the graphics view framework, does that mean I can still use paintevent and painter.draw___?



  • This post is deleted!


  • Is QLineEdit also an option? In terms of typing text on a custom QWidget?


  • Lifetime Qt Champion

    @jkwok678

    Yes it could be but not that easy to get working smoothly but yes it works
    but it was not that easy to place correctly on a "canvas".
    Also you need to have some sort of Text obejct simply to keep track of Text posistions etc.
    Else when use click on some painted text, how can you place the lineEdit on top of it ?
    Also, you need erase area/redraw area pr key stroke to make it "live"

    I think i would change my "canvas" to be based on QGraphicsItem
    https://doc.qt.io/qt-5/qgraphicsitem.html
    Since it has Paint and mouse event function just like QWidget
    and you can reuse most of the code for canvas.
    Then you can just use QGraphicsTextItem with your new canvas
    and get the wanted text editing.

    That said, you might have some surprises with coordinate system, etc as that is not the same as for
    QWidgets. So it might take some reading to use the QGraphicXX framework.
    But it would give you in place edit

    Try out
    https://doc.qt.io/qt-5/qtwidgets-graphicsview-diagramscene-example.html
    (its in creator)
    and see if you think it would be worth the effort.

    class SimpleItem : public QGraphicsItem
    {
    public:
        QRectF boundingRect() const override
        {
            qreal penWidth = 1;
            return QRectF(-10 - penWidth / 2, -10 - penWidth / 2,
                          20 + penWidth, 20 + penWidth);
        }
    
    // like paintEvent for Widgets
        void paint(QPainter *painter, const QStyleOptionGraphicsItem *option,
                   QWidget *widget) override     {
            painter->drawRoundedRect(-10, -10, 20, 20, 5, 5); <<< note the coordinates. its NOT 0,0 in top/left but in center. Unlike with QWids. just so you are aware of this.
        }
    };
    

Log in to reply