Qt World Summit: Register Today!

[SOLVED] How to "enlarge pixels"?

  • Hi.
    What should I do if I want do draw big pixels on my PixelMap? I mean, I have a small PixelMap (20x20) and I would like to enlarge it (zoom it?) and also be able to "light up" bigger pixels that I can see, something like this:

    At this moment they are too small and it's very unconfortable to draw something: !http://img845.imageshack.us/img845/2731/litera.png(Example)!). I was trying to scale my PixelMap to from 20x20 to 120x120, but after this my Painter was still drawing small pixels - it wasn't really what I was thinking about.

    You could ask why do I want to do this, instead of just enlarging PixelMap? So I am writing simple OCR that uses neural networks and recognizes written letters. It is my first attempt and I don't want to complicate it. I need a small network and it means - small PixelMap, not many pixels.

    Please help me, this is the key code:
    @MyPaintWidget::MyPaintWidget(QWidget *parent) : QWidget(parent)
    int h = 20;
    int w = 20;

    parea = new QPixmap(w, h); 


    void MyPaintWidget::clear()

    void MyPaintWidget::paintEvent(QPaintEvent *)
    if(parea != NULL)
    QPainter painter(this);
    painter.drawPixmap(0, 0, *parea);


    void MyPaintWidget::mouseMoveEvent(QMouseEvent *mouse_e)

    QPainter painter(parea);


  • bq. but after this my Painter was still drawing small pixels

    A pixel is a pixel, and its size is defined by the display the pixel is part of, you cannot make it bigger or smaller.

    What you want to do is draw n numbers of pixels on the screen for every pixel of the image. If you scale your image to 200% then you will have 4 identical pixels for each original pixel, and thus it will look as if the pixels are bigger.

    You might want to turn smooth transformations on or off depending on what is your requirement.

    @painter.drawPixmap(0, 0, original);
    painter.drawPixmap(0, 100, original.scaled(240, 240));@


    But a pixel will always be the size of a pixel. If you want bigger - draw 4 pixels for each 1 pixel, or 16 or whatever.

    Here is a solution for your problem - set the paint event to draw the pixmap scaled to the size of the widget, and in the mouse event map the widget coordinate to the pixmap real size coordinates and draw at that location of the original pixmap.

  • This exactly what I was thinking about. But I have a problem with my mouse event - it's drawing next to my cursor. It is my first time with Qt and I am not sure what to change.

    bq. map the widget coordinate to the pixmap real size coordinates and draw at that location of the original pixmap.

    How to implement it?

  • OK, here is a quick example, it should get you going:

    @class Widget : public QWidget

    Widget(QWidget *parent = 0) : QWidget(parent), pressed(0) {
    color = Qt::black;
    pixmap = new QPixmap("h:/small.png");
    resize(240, 240);
    ~Widget() { if (pixmap) delete pixmap; }

    void paintEvent(QPaintEvent *) {
    QPainter painter(this);
    painter.drawPixmap(0, 0, pixmap->scaled(240, 240));
    painter.drawPixmap(0, 0, *pixmap);

    void mousePressEvent(QMouseEvent *e) {
        if (e->button() == Qt::RightButton)
            color = color == Qt::black ? Qt::white : Qt::black;
        else {
            pressed = 1;
    void mouseReleaseEvent(QMouseEvent *) { pressed = 0; }
    void mouseMoveEvent(QMouseEvent *e) { draw(e); }

    void draw(QMouseEvent *e) {
    if (pressed) {
    QPainter painter(pixmap);
    int x = e->pos().x() / 12;
    int y = e->pos().y() / 12;
    painter.drawPoint(x, y);

    QColor color;
    QPixmap *pixmap;
    bool pressed;


    I am loading your example image rather than creating a new one, the pixmap is enlarged 12 times to fit the widget size 240x240, thus the mouse coordinates are divided by 12 to get back to the original pixmap coordinate system. Obviosuly, to make the solution more flexible you won't hardcode those values but derive them dynamically.

  • Ok, it's clear to me now. Thank you very much!

  • Updated the example code to make drawing a little more adequate, switch to white/eraser with rightclick and to include a real size preview of the pixmap in the top left.

    Don't forget to edit your thread title to add [SOLVED] if you have no more questions.

Log in to reply