I tried to add a gradient background on my main QWidget by adding (background-image:url(images/background.png) to its stylesheet but I noticed HUGE performance drops and I haven't written any code yet.
background image is a gradient , 16bit 1x800 px png.
So my question is, how can I add a nice gradient to my QWidgets / QFrames without slowing down the program? Using only the designer.
Try this:
QPalette thePalette = this->palette();
QLinearGradient gradient(0, 0, 0, 50);
gradient.setColorAt(0, QColor(227,177,27));
gradient.setColorAt(0.25, QColor(170,177,167));
gradient.setColorAt(1, Qt::white);
QBrush brush(gradient);
thePalette.setBrush(QPalette::Window, brush);
setPalette(thePalette);
and modify freely the colors and the positions. Although that this is code, it might be useful.
Related
Target: make my widget rounded, using QWidget::setMask
At first, I want to make a mask using QRegion, but later I found that, make a rounded Rect based on region is a not simple way.
So I decided to use QBitmap.
QBitmap pixmap(size());//create image
QPainter pixmapPainter(&pixmap);
QPainterPath path;
path.addRoundedRect(0, 0, width(), height(), m_borderRadius, m_borderRadius);//fill rounded rect
pixmapPainter.fillPath(path, Qt::color1);
QWidget::setMask(pixmap.mask());
Result is:
But when I change my type to QPixmap and add the fill method
QBitmap pixmap(size());//
pixmap.fill(Qt::transparent);//
QPainter pixmapPainter(&pixmap);
pixmapPainter.setRenderHint(QPainter::Antialiasing, true);
QPainterPath path;
path.addRoundedRect(0, 0, width(), height(), m_borderRadius, m_borderRadius);//
pixmapPainter.fillPath(path, Qt::white);
QWidget::setMask(pixmap.mask());
It shows me:
What's wrong with my first code?
As the comment by G.M. explains, the bitmap needs to be cleared first.
Also, a widget mask is not really the best choice here. A widget mask is intended for defining the areas where your widget will take mouse input. On most window systems, it will also cause transparency. But the edges will be aliased and not pretty. In order to make a non-rectangular widget with nice edges, one should use translucent widget background and anti-aliased painting - in addition to the widget mask for the mouse input.
This is shown and explained in Qt's shapedclock example.
In my paintEvent method for a custom widget for a game I'm writing, After calling the various model objects' render() methods to render them to the widget, I am trying to render the "Hi-Score" text. Here's the general code for just the text drawing:
painter.fillRect(event->rect(), QColor(0, 0, 0));
painter.drawImage(QRectF(event->rect().x(), event->rect().y() + 30, 512, 512), getGameBoardImage());
//...rendering other model components
painter.setBrush(QBrush(QColor(255, 255, 255)));
//painter.setFont(getGameFont());
painter.setFont(QFont("Times New Roman", 16, QFont::Bold));
painter.drawText(0, 0, "HI-SCORE");
I 'was' trying to draw the text in a custom font loaded from resource (I found an answer on here for that) but it wouldn't even display, even with a white brush. I thought maybe it was because it was because I didn't 'set' a font, but setting it to Times New Roman doesn't display anything either. What might I be doing wrong? As you can see the background is a black background with the game board painted on top but leaving a small buffer at the top and bottom. Do I need to do something special to display the text? Please don't suggest using a QLabel because I am trying to keep it all in one widget if possible. If I must, I will split the Hi-Score and 1-Ups into 2 other label sets with specialty fonts.
you code look ok, but you are drawing at 0,0 which is the top left corner of the widget canvas AND the text is actually there but not visible...
draw instead at
painter.drawText(margin, y+margin, "HI-SCORE");
where y is the high of the font used to draw the text and margin is you know a little margin border to make it look better something like 5 units
update
you can get the value of the text you are painting doing somthing like
QFont font("times", 25);
QFontMetrics fm(font);
int pixelsW{fm.width("HI-SCORE")};
int pixelsH{fm.height()};
I have tried to change border color of Qwidget for two days but Doesn't work.
so I refered to another code which is posted on the stackoverflow about moving widget. it worked perpectly but I can't change border color using QPropertyAnimation. give some tips for this problem.
QPropertyAnimation *animation = new QPropertyAnimation(ui.defectView, "border-color");
animation->setDuration(2000);
animation->setStartValue(QColor(0, 0, 0));
animation->setEndValue(QColor(240, 240, 240));
animation->start();
There is no QWidget property called "border-color". All it's properties are shown in QWidget documentation. But you can change this color using QSS and animate it. Also consider custom paintEvent depending on your needs.
I am fairly new to Qt and have been doing a lot of reading and practicing exercises.
I have searched for this one quite a lot but I could not find any examples.
I have a QPixmap object to which I load a .png image.
I need to create a copy of this QPixmap with a dark mask applied to it.
Basically I want this QPixmap's image to be covered with a layer of solid black of which the opacity is set to 50%.
I know how to set the opacity of a QPixmap's image but how can I add a layer of solid black with opacity on it?
Thank you!
You can use a QPainter and you a semi-transparent QBrush to paint that dark layer onto your QPixmap.
Assuming pic is a QPixmap loaded with your image:
QPainter p(&pic);
QBrush b(QColor(0,0,0,128)); // adjust color and alpha to taste
p.setBrush(b);
p.drawRect(0, 0, 200, 200);
Effect (before/after):
vs
The opaque black border can be removed by setting an semi-transparent pen before painting.
Copy the pixmap before applying the "mask" if you want to preserve the original.
I'm trying to draw a semi-transparent rectangle on top of an image to act as a highlight. Unfortunately, nothing I try seems to be able to perform the transparency effect I want. Instead I just get solid filled rectangles, with no transparency.
Here's what I'm doing right now:
void PageView::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
QImage img=...;
painter.drawImage(0, 0, img);
...
// draw a light blue, transparent rectangle to highlight
QRect rect=...;
painter.fillRect(rect, QColor(128, 128, 255, 128));
...
}
Unfortunately, for me, this draws a solid blue rectangle, instead of the semi-transparent one I expect due to giving the QBrush an alpha value.
I've also tried drawing to an intermediate QImage or QPixMap, playing around with painter.setCompositionMode(...). No luck so far.
Thus my question: How can I convince Qt to draw a semi-transparent rectangle to my PageView?
EDIT: If it's relevant, I'm building this under Qt 4.8.1 on Windows.
The code works for me with a slight modification as it does not compile as you have it:
painter.fillRect(rect, QBrush(QColor(128, 128, 255, 128)));
NOTE:
The OP was painting the semi transparent rectangle in a loop causing the same area to be painted multiple times. This will result in an additive effect which will eventually cause that area to look the same as a solid fill.