In my customized QWidget paintEvent method, I want to draw a circle with a circle shaped image icon. The source image is loaded from file and then automatically casted into circle using QPainter composition. How to do it? Thank you!
void DotGraphView::paintNodes(QPainter & painter)
{
painter.setPen(Qt::blue);
painter.drawEllipse(x, y, 36, 36);
QPixmap icon("./image.png");
QImage fixedImage(64, 64, QImage::Format_ARGB32_Premultiplied);
QPainter imgPainter(&fixedImage);
imgPainter.setCompositionMode(QPainter::CompositionMode_SourceIn);
imgPainter.drawPixmap(0, 0, 64, 64, icon);
imgPainter.setCompositionMode(QPainter::CompositionMode_SourceIn);
imgPainter.setBrush(Qt::transparent);
imgPainter.drawEllipse(32, 32, 30, 30);
imgPainter.end();
painter.drawPixmap(x, y, 64, 64, QPixmap::fromImage(fixedImage));
}
The above code does not work. The output display is not a circle shaped image.
I don't know if I understood correctly, but this might do what you want:
#include <QtGui/QApplication>
#include <QLabel>
#include <QPixmap>
#include <QBitmap>
#include <QPainter>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
// Load the source image.
QPixmap original(QString("/path/here.jpg"));
if (original.isNull()) {
qFatal("Failed to load.");
return -1;
}
// Draw the mask.
QBitmap mask(original.size());
QPainter painter(&mask);
mask.fill(Qt::white);
painter.setBrush(Qt::black);
painter.drawEllipse(QPoint(mask.width()/2, mask.height()/2), 100, 100);
// Draw the final image.
original.setMask(mask);
// Show the result on the screen.
QLabel label;
label.setPixmap(original);
label.show();
return a.exec();
}
Cache the result in your QWidget subclass and blit to the screen the required bounding rect in your paint event when requested.
You can do this relatively simply with a clipping path:
QPainter painter(this);
painter.setPen(Qt::blue);
painter.drawEllipse(30, 30, 36, 36);
QPixmap icon("./image.png");
QImage fixedImage(64, 64, QImage::Format_ARGB32_Premultiplied);
fixedImage.fill(0); // Make sure you don't have garbage in there
QPainter imgPainter(&fixedImage);
QPainterPath clip;
clip.addEllipse(32, 32, 30, 30); // this is the shape we want to clip to
imgPainter.setClipPath(clip);
imgPainter.drawPixmap(0, 0, 64, 64, icon);
imgPainter.end();
painter.drawPixmap(0, 0, 64, 64, QPixmap::fromImage(fixedImage));
(I'd cache the pixmaps if you do this often.)
Related
I want to make QLabel with the image circle:
Code:
QLabel *label = new QLabel(this);
QPixmap avatarPixmap(":/Icon/default_avatar.png");
label->setPixmap(avatarPixmap);
label->setStyleSheet("border: 0.5px solid red; border-radius: 50%; background-clip: padding;");
It only rounds the QLabel, not the image. How to fix it? Thanks.
Update:
The only way is to override the paintEvent for QLabel
Code:
void AccountImage::paintEvent(QPaintEvent *event)
{
QPixmap pixmap(":/Icon/default_avatar.png");
QBrush brush(pixmap);
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
painter.setBrush(brush);
painter.drawRoundedRect(0, 0, width(), height(), 100, 100);
QLabel::paintEvent(event);
}
The image is rounded but not properly scaled. Any ideas?
try to set mask on the label like:
int w = // set the width here
int h = // set the height here
QRect *rct = new QRect(0, 0, w, h);
QRegion *reg = new QRegion(*rct, QRegion::Ellipse);
label->setMask(*reg);
see: http://doc.qt.io/archives/qt-4.8/qwidget.html#setMask
The solution by overriding QLabel paintEvent method.
Code:
void AccountImage::paintEvent(QPaintEvent *event)
{
QPixmap pixmap(":/Icon/my_avatar.png");
QPixmap scaled = pixmap.scaled(width(), height(), Qt::KeepAspectRatioByExpanding, Qt::SmoothTransformation);
QBrush brush(scaled);
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
painter.setBrush(brush);
painter.drawRoundedRect(0, 0, width(), height(), 100, 100);
QLabel::paintEvent(event);
}
Result:
I've trying to draw a circle with the center transparent using Qt in paintEvent.
I have this code:
void CircleWidget::paintEvent(QPaintEvent * event)
{
QPainter painter;
QPixmap pix1(width(), height());
QPixmap pix2(width()/2, height()/2);
QBitmap mask1(pix1.size());
QBitmap mask2(pix2.size());
mask1.fill(Qt::color0);
mask2.fill(Qt::color0);
pix1.setMask(mask1);
pix2.setMask(mask2);
if (painter.begin(&pix1))
{
painter.setPen(Qt::NoPen);
painter.setRenderHint(QPainter::Antialiasing);
painter.setBrush(QBrush(QColor(0xff, 0x0, 0x0)));
painter.drawEllipse(0, 0, width(), height());
painter.end();
if (painter.begin(&pix2))
{
painter.setPen(Qt::NoPen);
painter.setRenderHint(QPainter::Antialiasing);
painter.setBrush(QBrush(QColor(0x0, 0xff, 0xff)));
painter.drawEllipse(0, 0, width()/2, height()/2);
painter.end();
if (painter.begin(this))
{
painter.drawPixmap(0, 0, pix1);
painter.setCompositionMode(QPainter::CompositionMode_Clear);
painter.drawPixmap(width()/4, height()/4, pix2);
painter.end();
}
}
}
}
But, the result is this:
Do you have any idea? Thanks a lot.
i.e. if I specify some cubic lines from example specified in Qt5 tutorial:
QPainterPath path;
path.addRect(20, 20, 60, 60);
path.moveTo(0, 0);
path.cubicTo(99, 0, 50, 50, 99, 99);
path.cubicTo(0, 99, 50, 50, 0, 0);
QPainter painter(this);
painter.fillRect(0, 0, 100, 100, Qt::white);
painter.setPen(QPen(QColor(79, 106, 25), 1, Qt::SolidLine,
Qt::FlatCap, Qt::MiterJoin));
painter.setBrush(QColor(122, 163, 39));
painter.drawPath(path);
which constructs this set of curves
Now I'd like to render only a part of those curves on QImage specified by some region with starting point=[20px,50px] with width=80px and height=50px so resulting would look like this:
Or if it is possible, to render with 3x zoom, so resulting QImage would look the same but had size=[240px,150px]
I am new to Qt, so could someone please showed me a working code example?
You can transform the painter coordinate system:
QPainter painter(this);
painter.scale(3, 3); // zoom 3 times
painter.translate(-20, -50); // offset origin to 20x50
// ... render stuff
This has an advantage over the other answer, because it will be rendered as if you provided larger coordinates, instead of rendering it small and then enlarging the raster image, which will degrade image quality. Also, it is possible that Qt will optimize it to not render outside of the image, so it will render less, and you don't need to crop and throw results away.
Result:
Compare that to an upscaled raster:
I've got a code example for you. But it isn't that hard to find out how. You just have to read the documentation, all is easy to find. Qt's documentation is really great.
QApplication a(argc, argv);
QImage img(100, 100, QImage::Format_ARGB32);
QPainterPath path;
path.addRect(20, 20, 60, 60);
path.moveTo(0, 0);
path.cubicTo(99, 0, 50, 50, 99, 99);
path.cubicTo(0, 99, 50, 50, 0, 0);
QPainter painter(&img);
painter.fillRect(0, 0, 100, 100, Qt::white);
painter.setPen(QPen(QColor(79, 106, 25), 1, Qt::SolidLine,
Qt::FlatCap, Qt::MiterJoin));
painter.setBrush(QColor(122, 163, 39));
painter.drawPath(path);
painter.end();
QPixmap pixmap( QPixmap::fromImage(img).copy(20, 50, 80, 50).scaled(240,150) );
// option 1, use a QLabel ( only for simple cases )
QLabel label;
label.setPixmap( pixmap );
label.show();
// option 2, use a QGraphicsScene ( far more flexible )
QGraphicsView view;
QGraphicsScene scene;
scene.addPixmap( pixmap );
scene.setSceneRect( img.rect() );
view.setScene(&scene);
view.show();
return a.exec();
I'm using the following code to set the background Image but as size of image is small I want to stretch the size to fit the screen or if the image is larger than screen in that case too I need the same.
Im using Gtk+3.2
#include <gtk/gtk.h>
int main( int argc, char *argv[])
{
GtkWidget *window;
GtkWidget *layout;
GtkWidget *image;
GtkWidget *button;
gtk_init(&argc, &argv);
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
gtk_window_set_default_size(GTK_WINDOW(window), 290, 200);
gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
layout = gtk_layout_new(NULL, NULL);
gtk_container_add(GTK_CONTAINER (window), layout);
gtk_widget_show(layout);
image = gtk_image_new_from_file("/home/my_background_image.jpg");
gtk_layout_put(GTK_LAYOUT(layout), image, 0, 0);
button = gtk_button_new_with_label("Button");
gtk_layout_put(GTK_LAYOUT(layout), button, 150, 50);
gtk_widget_set_size_request(button, 80, 35);
g_signal_connect_swapped(G_OBJECT(window), "destroy",
G_CALLBACK(gtk_main_quit), NULL);
gtk_widget_show_all(window);
gtk_main();
return 0;
}
I dont think you really need layout for setting background image.
You can overload "draw" signal and in handler you can paint background image.
The following code will work for you.
gboolean GtkDrawing::window_draw_cb (GtkWidget * widget, cairo_t * cr, cairo_surface_t* m_bgImage)
{
gint root_width,root_height;
cairo_set_source_surface (cr,m_bgImage, 0, 0);
gtk_window_get_size (GTK_WINDOW(widget), &root_width, &root_height);
cairo_rectangle (cr, 0, 0,root_width, root_height);
cairo_fill (cr);
//Enable Below code to draw child widget after background rendering
//gtk_widget_draw (childwidget, cr);
//cairo_fill (cr);
return TRUE;
}
cairo_surface_t* m_bgImage=cairo_image_surface_create_from_png("/home/my_background_image.png");
g_signal_connect (G_OBJECT (window), "draw", G_CALLBACK(GtkDrawing::window_draw_cb), m_bgImage);
In the above handler function, to stretch the image you can modify cairo_rectangle parameters.
I dont exactly understand what renderer is. Can I have multiple renderers or is there always just one?
For example, how can I draw a rectangle with a certain color on a background with a different color using a renderer?
I believe the answer lies in the functions SDL_RenderDrawRect() and SDL_RenderFillRect(). Am I right?
I know how surfaces and bliting works but I dont know what exactly the renderer symbolizes.
If someone could show me how to draw a rectangle, I think i will understand how renderers work.
So far I have this:
#include <SDL.h>
int main(int argc, char* argv[]) {
//Initialization
SDL_Init(SDL_INIT_EVERYTHING);
//Window
SDL_Window *MainWindow = SDL_CreateWindow("My Game Window",
SDL_WINDOWPOS_CENTERED,
SDL_WINDOWPOS_CENTERED,
640, 480,
SDL_WINDOW_SHOWN
);
//Renderer
SDL_Renderer *Background = SDL_CreateRenderer(MainWindow, -1, 0);
SDL_SetRenderDrawColor(Background, 255, 255, 255, 255);
SDL_RenderClear(Background);
SDL_Delay(3000);
//Clean up
SDL_DestroyWindow(MainWindow);
SDL_Quit();
return 0;
}
for the first part of your question see this SO question.
as to why your code doesnt do much:
you are correct that you need to use either SDL_RenderDrawRect(), or SDL_RenderFillRect().
SDL_RenderDrawRect will draw an unfilled rectangle. SDL_RenderFillRect will be filled (hopefully that is obvious).
With SDL_renderer you need to call SDL_RenderPresent to copy the "scene" to the screen.
...
//Renderer
SDL_Renderer* renderer = SDL_CreateRenderer(MainWindow, -1, 0);
SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255);
SDL_RenderClear(renderer); // fill the scene with white
SDL_SetRenderDrawColor(renderer, 255, 0, 0, 255); // the rect color (solid red)
SDL_Rect rect(0, 0, 100, 50); // the rectangle
SDL_RenderFillRect(renderer, &rect);
SDL_RenderPresent(renderer); // copy to screen
SDL_Delay(3000);
...