Change color of placeholder text in QLineEdit - c++

When I set the placeholder text with QLineEdit::setPlaceholderText(), it appears gray.
Is there any way to change the color to something else, for example red?

You'll have to subclass QLineEdit and paint your own placeholder in the paintEvent().
class CustomColorPlaceholderLineEdit : public QLineEdit
{
public:
CustomColorPlaceholderLineEdit(QWidget * parent = 0) : QLineEdit(parent) { color = QColor(0,0,0,128); }
void setCustomPlaceholderText(const QString &text) { this->mText = text; }
const QString &customPlaceholderText() const { return mText; }
void setCustomPlaceholderColor(const QColor &color) { this->color = color; }
const QColor &customPlaceholderColor() const { return color; }
void paintEvent(QPaintEvent *event) {
QLineEdit::paintEvent(event);
if (!hasFocus() && text().isEmpty() && !mText.isEmpty()) {
// QLineEdit's own placeholder clashes with ours.
Q_ASSERT(placeholderText().isEmpty());
QPainter p(this);
p.setPen(color);
QFontMetrics fm = fontMetrics();
int minLB = qMax(0, -fm.minLeftBearing());
QRect lineRect = this->rect();
QRect ph = lineRect.adjusted(minLB + 3, 0, 0, 0);
QString elidedText = fm.elidedText(mText, Qt::ElideRight, ph.width());
p.drawText(ph, Qt::AlignVCenter, elidedText);
}
}
private:
QString mText;
QColor color;
};

There is another a bit hacky but simple and reliable way.
connect(lineEdit, &QLineEdit::textChanged, this, &YourClass::updateLineEditStyleSheet);
void YourLineEdit::updateLineEditStyleSheet()
{
if (lineEdit->text().isEmpty()) {
lineEdit->setStyleSheet("#lineEdit { color: lightGray;"); // Set your color but remember that Qt will reduce alpha
} else {
lineEdit->setStyleSheet("#lineEdit { color: black;"); // usual color
}
}
also you can use this way to derived from QLineEdit class

If you want to use QSS instead of QPalette, try the following:
setStyleSheet("QLineEdit{"
" color: red;" //TEXT COLOR
"}"
"QLineEdit[text=\"\"]{"
" color: gray;" //TEXTHOLDER COLOR
"}");
connect(ui->lineEdit, &QLineEdit::textChanged, [=]{ style()->polish(ui->lineEdit); });
You can change the color, but bare in mind there is an alpha factor set in the placeholder from the source code (as mentioned in another comment) that cannot be removed. Therefore you will always see the placeholder darker (no white possible with this option).

You can't, at least with the current QLineEdit code.
As you can see from the source code, the placeholder text is simply taking the foreground brush of the palette and making it partially transparent, see QLineEdit::paintEvent:
if (d->shouldShowPlaceholderText()) {
if (!d->placeholderText.isEmpty()) {
QColor col = pal.text().color();
col.setAlpha(128);
QPen oldpen = p.pen();
p.setPen(col);
QRect ph = lineRect.adjusted(minLB, 0, 0, 0);
QString elidedText = fm.elidedText(d->placeholderText, Qt::ElideRight, ph.width());
p.drawText(ph, va, elidedText);
p.setPen(oldpen);
}
}
You can work with upstream into a more general solution, though. In particular I one would expect that color to be added to the palette, or in general provided by the current QStyle (for instance as a style hint).

If you want to change placeholder text color for a QLineEdit you have to customize the component's QPalette object.
QPalette p = lineEdit->palette();
p.setColor(QPalette::Mid, Qt::red); // assuming Mid is the color you want to change.
lineEdit->setPalette(p);
I don't recall exactly which QPalette::ColorRole is appropriate for changing QLineEdit's placeholder text color though.

#Meefte solution is quite good given the situation that Qt gives placeholder the same color as for the text, except it adds 50% opacity. So, there is little choice to set placeholder color to be different than the text. However, even this solution could be improved by making sure that you would not need to set some other variable than the default one Qt provides you.
The need to use default placeholderText() might arise from the situation when you have lots of QLineEdit controls which are already promoted to some control overriding QLineEdit behavior, and placeholderText() is already set through code or through Qt Creator, i.e. it would be a bit painful to introduce another dynamic property. However, if you did not promote to some child control, then it would be a necessity to do so in order to use such solution.
class CustomColorPlaceholderLineEdit : public QLineEdit
{
public:
CustomColorPlaceholderLineEdit(QWidget * parent = 0) : QLineEdit(parent) { color = QColor(0,0,0,128); }
const QString &customPlaceholderText() const { return mText; }
void setCustomPlaceholderColor(const QColor &color) { this->color = color; }
const QColor &customPlaceholderColor() const { return color; }
void paintEvent(QPaintEvent *event)
{
if(color.isValid() && text().isEmpty() && (!placeholderText().isEmpty() || !mText.isEmpty()))
{
if(!placeholderText().isEmpty())
{
// In this way, placeholderText() is taken into local variable 'mText' care. Whenever placeholderText() will change, there it will be taken care of.
mText = placeholderText();
// This will ensure Qt will not draw placeholder for us.
setPlaceholderText("");
}
// By this, we make sure Qt will paint QLineEdit default parts properly.
QLineEdit::paintEvent(e);
// And now #Meefte code is reused here.
QPainter p(this);
p.setPen(color);
QFontMetrics fm = fontMetrics();
int minLB = qMax(0, -fm.minLeftBearing());
QRect lineRect = this->rect();
QRect ph = lineRect.adjusted(minLB + 3, 0, 0, 0);
QString elidedText = fm.elidedText(mText, Qt::ElideRight, ph.width());
p.drawText(ph, Qt::AlignVCenter, elidedText);
return; // No need to paint again.
}
// Default Qt's painting behavior for QLineEdit.
QLineEdit::paintEvent(e);
}
private:
QString mText;
QColor color;
};

QT still has this problem)
I solved it like this:
bool CustomLineEdit::event(QEvent *event)
{
bool eventResult = QLineEdit::event(event);
if (event->type() == QEvent::StyleChange) {
QPalette pal = palette();
pal.setColor(QPalette::PlaceholderText, Qt::red);
setPalette(pal);
}
return eventResult;
}

Related

Show QWidget as focused

I've got four QLineEdit placed inside of a QLineEdits, where I want the first the parent to look as if it is in focus when any of the containing ones is selected. Note: I don't want the focus to actually change, just the "focus frame" (the thin blue border) to appear on the parent LineEdit.
I've tried to draw a rect, but while it works on Windows I'm running into issues of the drawn rectangle not looking like a proper rectangle on ex. Linux, where it is supposed to be rounded. Is there a way to fix this OR, if possible, just make it draw itself as focused despite focus not being on it?
Here's my attempt at drawing a custom rect, but haven't been able to make it successfully mirror the OS style properly.
if (childHasFocus) {
QPainter painter(this);
QLineEdit textBox;
QColor color = textBox.palette().color(QPalette::Highlight);
painter.setPen(color);
QRect rect;
rect.setTopLeft(QPoint(0,0));
rect.setWidth(this->width() - 1);
rect.setHeight(this->height() - 1);
painter.drawRect(rect);
}
EDIT: Added an image of the desired look. Note that I'm trying to get it to look like other LineEdits focusframe independent of OS, so hardcoding a blue rectangle won't work due to ex. Linux having a rounded focusframe.
Desired look:
Here's how to do it. Its a very basic class that draws the focus frame if any of the childs have focus. On focus change, we do an update (which can probably be optimized a bit to avoid unnecessary repaints).
Screenshot:
class IPEdit : public QWidget
{
public:
IPEdit(QWidget *parent = nullptr)
: QWidget(parent)
{
delete layout();
auto l = new QHBoxLayout(this);
setFocusProxy(&a);
setAttribute(Qt::WA_Hover);
for (auto *w : {&a, &b, &c, &d}) {
l->addWidget(w);
w->installEventFilter(this);
}
}
bool eventFilter(QObject *o, QEvent *e) override
{
if (e->type() == QEvent::FocusIn || e->type() == QEvent::FocusOut) {
update();
}
return QWidget::eventFilter(o, e);
}
void paintEvent(QPaintEvent *e) override
{
QStyleOptionFrame opt;
opt.initFrom(this);
opt.frameShape = QFrame::StyledPanel;
opt.state |= QStyle::State_Sunken;
// clear mouseOver and focus state
// update from relevant widgets
opt.state &= ~(QStyle::State_HasFocus | QStyle::State_MouseOver);
const auto widgets = {&a, &b, &c, &d};
for (const QWidget *w : widgets) {
if (w->hasFocus()) {
opt.state |= QStyle::State_HasFocus;
}
}
opt.rect = contentsRect();
QPainter paint(this);
paint.setClipRegion(e->region());
paint.setRenderHints(QPainter::Antialiasing);
style()->drawControl(QStyle::CE_ShapedFrame, &opt, &paint, this);
}
private:
QLineEdit a;
QLineEdit b;
QLineEdit c;
QLineEdit d;
};
QlineEdit class is also a qwidget, use the setFocus method
https://doc.qt.io/qt-6/qwidget.html#setFocus

How to paint object by overriding paintEvent in Qt?

In my QGraphicsView, I have many QGraphicsItem. I want to search specific QGraphicsItem out of all the items present in view and highlight the matched item. For highlighting item, I am trying to use paintEvent.
So I am calling paintEvent, but not understanding how to heighlight border of the matched object ?
Should I need co-ordinates of that matched object ?
I tried like this:
foreach(QGraphicsItem* currentItem, _scene->items())
{
pEvent = false;
QGraphicsRectItem* rItem = qgraphicsitem_cast<QGraphicsRectItem*>(currentItem);
if(rItem)
{
// some logic to get i->Name()
QString name1 = i->Name();
QString name2 = "reN"; // I want to find reN named item in view
if(name1 == name2)
{
pEvent = true;
qDebug()<<"Object Found ";
this->repaint();
break;
}
}
}
void myClass::paintEvent(QPaintEvent *event) {
Q_UNUSED(event);
qDebug()<<"In paint event ";
if(pEvent)
{
QPainter qp(this);
drawBody(&qp);
}
}
void myClass::drawBody(QPainter *qp) {
Q_UNUSED(qp);
// want logic for heighlighting border of the item
}
I understand from your problem that you are overridng QGraphicsView in MyClass since paintEnent is defined QWidgets classes.
To solve your problem, if I understand correctly. It's necessary to save the QGraphicsRectItem coordinates:
QRectF rectF = item.boundingRect();
then use the following in the function drawBody:
qp.save();
const float width = 5;
QPen pen;
pen.setWidth(width );
pen.setColor("green");
painter->drawRect(rectF.x(), rectF().y(),
rectF().width(), rectF().height());
qp.restore();

How do I change the state of a QProgressBar?

I have a custom dialog that imitates and embellishes QProgressDialog with some additional application-specific information and enables pausing/resuming the worker thread running in the background. Ultimately what I'm looking for is the ability to change the appearance of the QProgressBar to reflect the paused state as described in this question.
Oddly enough QWinTaskbarProgress seems to support this exact functionality as of Qt 5.2, but a plain QProgressBar does not, in Qt4 or Qt5. I'm okay with fiddling around in the Qt source code, but I've dug around in the Qt source code and I can't figure out where the actual state of the form control is queried/provided, so I can't figure out what I need to change. Maybe it's not there because this is strictly a Windows thing, but maybe not?
Using CSS to override the StyleSheet as recommended in the docs (and here) results in a very ugly progress bar, completely different in appearance from the stock Windows 7 progress bar.
Normal:
Stylesheet:
I don't want to use this option.
The simple way is setting QGraphicsColorizeEffect to the progress bar.
Like this:
QProgressBar* progress = new QProgressBar;
progress->setGraphicsEffect(new QGraphicsColorizeEffect);
Result on Win7:
Umm...the result looks like fine, but we can make it better, only change the chunk colour.
Here is the final result:
Reimplement QGraphicsEffect::draw to specific & customize the colourize effect area:
class Colorize : public QGraphicsEffect {
public:
explicit Colorize(QObject *parent = Q_NULLPTR) :
QGraphicsEffect(parent),
strength(1),
color(Qt::red),
effectRect()
{ }
quint32 strength;
QColor color;
QRectF effectRect;
protected:
void draw(QPainter* painter) {
QPoint offset;
const QPixmap pixmap = sourcePixmap(Qt::LogicalCoordinates, &offset);
draw(painter, offset, pixmap, QRect());
}
void draw(QPainter *painter, const QPointF &dest, const QPixmap &src, const QRectF &srcRect) const
{
if (src.isNull())
return;
QImage srcImage;
QImage destImage;
if (srcRect.isNull()) {
srcImage = src.toImage();
srcImage = srcImage.convertToFormat(srcImage.hasAlphaChannel() ? QImage::Format_ARGB32_Premultiplied : QImage::Format_RGB32);
destImage = QImage(srcImage.size(), srcImage.format());
} else {
QRect rect = srcRect.toAlignedRect().intersected(src.rect());
srcImage = src.copy(rect).toImage();
srcImage = srcImage.convertToFormat(srcImage.hasAlphaChannel() ? QImage::Format_ARGB32_Premultiplied : QImage::Format_RGB32);
destImage = QImage(rect.size(), srcImage.format());
}
destImage.setDevicePixelRatio(src.devicePixelRatioF());
// do colorizing
QPainter destPainter(&destImage);
grayscale(srcImage, destImage, srcImage.rect());
destPainter.setCompositionMode(QPainter::CompositionMode_Screen);
destPainter.fillRect(effectRect, color);
destPainter.end();
// alpha blending srcImage and destImage
if(0 < strength && strength < 1){
QImage buffer = srcImage;
QPainter bufPainter(&buffer);
bufPainter.setOpacity(strength);
bufPainter.drawImage(0, 0, destImage);
bufPainter.end();
destImage = buffer;
}
if (srcImage.hasAlphaChannel())
destImage.setAlphaChannel(srcImage.alphaChannel());
painter->drawImage(dest, destImage);
}
};
Calculate the grove rect of the progress bar:
QRectF getGrooveRect() const {
StyleOptionProgressBar option;
option.initFrom(this); // this ⇒ progress bar
return style()->subElementRect(QStyle::SE_ProgressBarGroove, &option, this);
}
...
class StyleOptionProgressBar : public QStyleOptionProgressBar {
public:
using QStyleOptionProgressBar::QStyleOptionProgressBar;
void initFrom(const ColorizeProgressBar* w) {
init(w);
minimum = w->minimum();
maximum = w->maximum();
progress = w->value();
text = w->text();
textAlignment = w->alignment();
textVisible = w->isTextVisible();
orientation = w->orientation();
invertedAppearance = w->invertedAppearance();
}
};
Complete source on Github.
BTW, Referred Qt source code

QTreeView Item Hover/Selected background color based on current color

In my project I have several QTreeView widgets displaying data. The background color of the items in the QTreeView changes depending on the data's type and association with other items.
Here is how those background colors are set:
QColor warning;
warning.setRgb(255, 86, 86);
model->itemFromIndex(index)->setData(warning, Qt::BackgroundRole);
This works, but I also want to have different background colors when an item is selected/hovered. I opted to use a stylesheet.
QTreeView::item:selected{background-color: #bedcf0;} //light blue
QTreeView::item:hover:selected{background-color: #94c8ea;} //darker blue
QTreeView::item:hover:!selected{background-color: #e6e6e6;} //gray
This provides the look I want, but only for items that have a white default background. If an item has a custom background color (set via Qt::BackgroundRole) then these hover and selected colors completely override the current background color.
What I want to happen is have every item darken a set amount when hovered/selected, based on the current background color. This is tough because QStandardItem::setProperty() doesn't exist.
Thanks for your time!
So I was able to solve this myself. (pointless bounty, idk why I handed over the 50 rep before checking if it worked.)
What I did was subclass QStyledItemDelegate and reimplement the paint() function.
.h
class MyStyledItemDelegate : public QStyledItemDelegate
{
Q_OBJECT
public:
explicit MyStyledItemDelegate(QObject *parent = 0){}
virtual void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;
}
In this paint function I was able to check the index's UserRoles for a custom flag to decide the color I wanted. I can use QStyle::State_Selected and QStyle::State_MouseOver to check if the index is selected or hovered.Using that information, I was able to write the logic to determine the colors I wanted. After that I had to draw in the background, icon, and text manually.
.cpp
void MyStyledItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
//background
QColor bgColor;
int bgColorType(0);
bgColorType = index.data(Qt::UserRole+9).toInt();//custom flag I set to determine which color i want
//color logic
if(bgColorType == 0)
bgColor = QColor(Qt::transparent);//default is transparent to retain alternate row colors
else if(bgColorType == 1)
bgColor = qRgba(237, 106, 106, 255);//red
else if(bgColorType == 2)
bgColor = qRgba(241, 167, 226, 255);//pink
//etc...
QStyleOptionViewItem opt(option);
if(option.state & QStyle::State_Selected)//check if item is selected
{
//more color logic
if(bgColorType == 0)
bgColor = qRgba(190, 220, 240, 255);
else
bgColor = qRgba(bgColor.red()-25, bgColor.green()-25, bgColor.blue()-25, 255);
//background color won't show on selected items unless you do this
opt.palette.setBrush(QPalette::Highlight, QBrush(bgColor));
}
if(option.state & QStyle::State_MouseOver)//check if item is hovered
{
//more color logic
bgColor = qRgba(bgColor.red()-25, bgColor.green()-25, bgColor.blue()-25, 255);
if(option.state & QStyle::State_Selected)//check if it is hovered AND selected
{
//more color logic
if(bgColorType == 0)
{
bgColor = qRgba(148, 200, 234, 255);
}
//background color won't show on selected items unless you do this
opt.palette.setBrush(QPalette::Highlight, QBrush(bgColor));
}
}
//set the backgroundBrush to our color. This affects unselected items.
opt.backgroundBrush = QBrush(bgColor);
//draw the item background
option.widget->style()->drawPrimitive(QStyle::PE_PanelItemViewItem, &opt, painter);
//icon
QRect iconRect = option.rect;
iconRect.setLeft(iconRect.left()+3);//offset it a bit to the right
//draw in icon, this can be grabbed from Qt::DecorationRole
//altho it appears icons must be set with setIcon()
option.widget->style()->drawItemPixmap(painter, iconRect, Qt::AlignLeft | Qt::AlignVCenter, QIcon(index.data(Qt::DecorationRole).value<QIcon>()).pixmap(16, 16));
//text
QRect textRect = option.rect;
textRect.setLeft(textRect.left()+25);//offset it a bit to the right
//draw in text, this can be grabbed from Qt::DisplayRole
option.widget->style()->drawItemText(painter, textRect, Qt::AlignLeft | Qt::AlignVCenter, option.palette, true, index.data(Qt::DisplayRole).toString());
}
Once that's done, I just apply the delegate to my QTreeView with myTreeView->setItemDelegate(new MyStyledItemDelegate(myTreeView));
No stylesheets, background role changes, or eventFilters required.
So I have an answer. Maybe you can tell me if it's ok for you and/or we can talk about it.
I created a custom QTreeView and QStandardItem, overwritemouseMoveEvent(QMouseEvent *event) and set setMouseTracking(true); of my tree.
I got the item under the mouse with: static_cast<QStandardItemModel*>(model())->itemFromIndex(indexAt(event->pos()))
With that I can get with item is hovered. Then in my custom item I have a function hovered() and normal(). When the item is hovered, the method hovered is called. When the mouse move, it put the item back to normal and rehovered it if it's still on it.
The code:
HoveredTreeView.cpp:
#include "HoverTreeView.h"
#include <QDebug>
#include <QMouseEvent>
#include <QStandardItemModel>
HoverTreeView::HoverTreeView(QWidget *parent)
: QTreeView(parent)
{
setMouseTracking(true);
}
void HoverTreeView::mouseMoveEvent(QMouseEvent *event)
{
while (!_hoveredItems.empty())
{
HoverStandardItem* oldItem = _hoveredItems.pop();
oldItem->normal();
}
auto *item = static_cast<QStandardItemModel*>(model())->itemFromIndex(indexAt(event->pos()));
HoverStandardItem* realItem = static_cast<HoverStandardItem*>(item);
if (item) {
realItem->hovered();
_hoveredItems.push(realItem);
}
}
HoveredTreeView.h:
#ifndef HOVERTREEVIEW_H
#define HOVERTREEVIEW_H
#include <QStack>
#include <QTreeView>
#include "HoverStandardItem.h"
class HoverTreeView : public QTreeView
{
public:
HoverTreeView(QWidget *parent = nullptr);
public slots:
void mouseMoveEvent(QMouseEvent *event);
QStack<HoverStandardItem*> _hoveredItems;
};
#endif // HOVERTREEVIEW_H
HoveredStandardItem.cpp:
#include "HoverStandardItem.h"
HoverStandardItem::HoverStandardItem(QColor const& backgroundColor, const QString &text)
: QStandardItem(text)
, _backgroundColor(backgroundColor)
{
setData(backgroundColor, Qt::BackgroundColorRole);
}
void HoverStandardItem::hovered()
{
QColor hoveredColor(_backgroundColor);
unsigned int darker = 20;
hoveredColor.setRgb(hoveredColor.red() - darker, hoveredColor.green() - darker, hoveredColor.blue() - darker);
setData(hoveredColor, Qt::BackgroundColorRole);
}
void HoverStandardItem::normal()
{
setData(_backgroundColor, Qt::BackgroundColorRole);
}
HoveredStandardItem.h:
#ifndef HOVERSTANDARDITEM_H
#define HOVERSTANDARDITEM_H
#include <QStandardItem>
class HoverStandardItem : public QStandardItem
{
public:
HoverStandardItem(const QColor &backgroundColor, QString const& text = "");
void hovered();
void normal();
private:
QColor _backgroundColor;
};
#endif // HOVERSTANDARDITEM_H
I tested it in a MainWindow. Here the constructor:
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
QStandardItemModel *model = new QStandardItemModel(this);
QColor warning[3] = {
{QColor(255, 86, 86)},
{QColor(86, 255, 86)},
{QColor(86, 86, 255)}
};
for (int j = 0 ; j < 3 ; ++j) {
QStandardItem *parentItem = model->invisibleRootItem();
for (int i = 0; i < 4; ++i) {
QStandardItem *item = new HoverStandardItem(warning[j], QString("item %0 %1").arg(j).arg(i));
parentItem->appendRow(item);
parentItem = item;
}
}
ui->treeView->setModel(model);
}

Change the color of an svg in qt

I have a svg loaded in the resources, but it is black. How do I change the color to white?
This is how you can do it in Qt, don´t forget to add the xml and svg modules to your qt project (*.pro file). This code snippet changes the color by modifying the "fill" attribute of any "path" element but you could use it to modify any attribute of any element.
void SetAttrRecur(QDomElement &elem, QString strtagname, QString strattr, QString strattrval);
void ChangeSVGColor()
{
// open svg resource load contents to qbytearray
QFile file("myfile.svg");
file.open(QIODevice::ReadOnly);
QByteArray baData = file.readAll();
// load svg contents to xml document and edit contents
QDomDocument doc;
doc.setContent(baData);
// recurivelly change color
SetAttrRecur(doc.documentElement(), "path", "fill", "white");
// create svg renderer with edited contents
QSvgRenderer svgRenderer(doc.toByteArray());
// create pixmap target (could be a QImage)
QPixmap pix(svgRenderer.defaultSize());
pix.fill(Qt::transparent);
// create painter to act over pixmap
QPainter pixPainter(&pix);
// use renderer to render over painter which paints on pixmap
svgRenderer.render(&pixPainter);
QIcon myicon(pix);
// Use icon ....
}
void SetAttrRecur(QDomElement &elem, QString strtagname, QString strattr, QString strattrval)
{
// if it has the tagname then overwritte desired attribute
if (elem.tagName().compare(strtagname) == 0)
{
elem.setAttribute(strattr, strattrval);
}
// loop all children
for (int i = 0; i < elem.childNodes().count(); i++)
{
if (!elem.childNodes().at(i).isElement())
{
continue;
}
SetAttrRecur(elem.childNodes().at(i).toElement(), strtagname, strattr, strattrval);
}
}
Since the SVG format is XML based, and XML is just ASCII text... you could load the SVG resource in to a QString, call QString::replace("\"#000000\"", "\"#ffffff\""), and then pass the modified QString in to your QSVGRenderer.
If your SVG is black, there is an extremely easy way to do it: QGraphicsEffect
#include <QGraphicsItem>
#include <QGraphicsColorizeEffect>
QGraphicsItem *item;
QGraphicsColorizeEffect *effect;
item = new QGraphicsItem;
effect = new QGraphicsColorizeEffect;
effect->setColor(Qt::white);
effect->setStrength(1);
item->setGraphicsEffect(effect)
This doesn't work with white SVGs, but given that almost any website that provides icons does so in black, this is pretty neat.
As long as you don't need it on Mac, this should work:
http://doc-snapshot.qt-project.org/4.8/qwidget.html#setGraphicsEffect
http://doc-snapshot.qt-project.org/4.8/qgraphicscolorizeeffect.html
EDIT: Or if you need to support Mac, do the svg rendering and effects inside a QGraphicsView.
http://doc-snapshot.qt-project.org/4.8/qgraphicsitem.html#setGraphicsEffect
Setup your colorize effect to color it white, and set it to the svgWidget.
Hope that helps.
solution for pyqt5. You can easily convert it to c++
def QIcon_from_svg(svg_filepath, color='black'):
img = QPixmap(svg_filepath)
qp = QPainter(img)
qp.setCompositionMode(QPainter.CompositionMode_SourceIn)
qp.fillRect( img.rect(), QColor(color) )
qp.end()
return QIcon(img)
You can use a ColorOverlay, as described in the end of this question:
Qt QML LevelAdjust shows strange edge effects when applied to svg source
It doesn't change the SVG per say, but it creates a colored layer which will have the same shape as your drawing (assuming your drawing's background is transparent).
#ifndef SVG_ITEM_H
#define SVG_ITEM_H
#include <QObject>
#include <QPen>
#include <QQuickItem>
#include <QQuickPaintedItem>
#include <QSvgRenderer>
class SVG_Item : public QQuickPaintedItem
{
Q_PROPERTY(QString source READ source WRITE setSource NOTIFY sourceChanged)
Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
Q_PROPERTY(QPen stroke READ stroke WRITE setStroke NOTIFY strokeChanged)
Q_PROPERTY(bool debuging READ debuging WRITE setdebuging)
Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor NOTIFY backgroundColorChanged)
Q_OBJECT
public:
explicit SVG_Item(QQuickItem *parent = nullptr);
void paint(QPainter *painter) Q_DECL_OVERRIDE;
QString source() const;
QColor color() const;
QPen stroke() const;
bool debuging() const;
QColor backgroundColor() const;
signals:
void sourceChanged(QString source);
void colorChanged(QColor color);
void strokeChanged(QPen stroke);
void backgroundColorChanged(QColor backgroundColor);
public slots:
void setSource(QString source);
void setColor(QColor color);
void setStroke(QPen stroke);
void setdebuging(bool debuging);
void setBackgroundColor(QColor backgroundColor);
private:
QString m_source;
QColor m_color;
QPen m_stroke;
QString svgContent;
QSvgRenderer *renderer;
bool changed;
bool m_debuging;
QColor m_backgroundColor;
QColor m_test;
};
#endif // SVG_ITEM_H
#include "svg_item.h"
#include <QSvgRenderer>
#include <QDebug>
#include <QPainter>
#include <QSvgGenerator>
SVG_Item::SVG_Item(QQuickItem *parent) : QQuickPaintedItem(parent)
{
changed = false;
renderer = NULL;
m_debuging = false;
m_backgroundColor = Qt::transparent;
}
void SVG_Item::paint(QPainter *painter)
{
painter->fillRect(0,0,this->width(),this->height(),m_backgroundColor);
if(m_source != "")
{
if(changed)
{
if(renderer != NULL)
{
renderer->deleteLater();
}
renderer = new QSvgRenderer(svgContent.toLocal8Bit());
}
if(renderer != NULL)
renderer->render(painter);
}
}
void SVG_Item::setSource(QString source)
{
if(source.startsWith("qrc"))
source = source.remove(0,3);
if (m_source == source)
return;
QFile readFile(source);
if(!readFile.exists())
{
qWarning("file not found");
}
readFile.open(QFile::ReadOnly);
svgContent = readFile.readAll();
setColor(color());
//readData.replace()
m_source = source;
emit sourceChanged(m_source);
}
void SVG_Item::setColor(QColor color)
{
changed = true;
QString fillStr = "fill:%1";
fillStr = fillStr.arg(color.name());
svgContent = svgContent.replace(QRegExp("fill:[# 0-9 a b c d e f A B C D E F]+"), fillStr);
if(!svgContent.contains(QRegExp("fill:[# 0-9 a b c d e f A B C D E F]+")))
{
QString style = "<path \n style=\"fill:%1;fill-opacity:1\"";
style = style.arg(color.name());
svgContent = svgContent.replace("<path",style);
style = "<rect \n style=\"fill:%1;fill-opacity:1\"";
style = style.arg(color.name());
svgContent = svgContent.replace("<rect",style);
style = "<circle \n style=\"fill:%1;fill-opacity:1\"";
style = style.arg(color.name());
svgContent = svgContent.replace("<circle",style);
style = "<ellipse \n style=\"fill:%1;fill-opacity:1\"";
style = style.arg(color.name());
svgContent = svgContent.replace("<ellipse",style);
style = "<polygon \n style=\"fill:%1;fill-opacity:1\"";
style = style.arg(color.name());
svgContent = svgContent.replace("<polygon",style);
}
//
this->update();
if (m_color == color)
return;
m_color = color;
emit colorChanged(m_color);
}
void SVG_Item::setStroke(QPen stroke)
{
changed = true;
if (m_stroke == stroke)
return;
m_stroke = stroke;
emit strokeChanged(m_stroke);
}
void SVG_Item::setdebuging(bool debuging)
{
m_debuging = debuging;
}
void SVG_Item::setBackgroundColor(QColor backgroundColor)
{
if (m_backgroundColor == backgroundColor)
return;
m_backgroundColor = backgroundColor;
emit backgroundColorChanged(m_backgroundColor);
}
QString SVG_Item::source() const
{
return m_source;
}
QColor SVG_Item::color() const
{
return m_color;
}
QPen SVG_Item::stroke() const
{
return m_stroke;
}
bool SVG_Item::debuging() const
{
return m_debuging;
}
QColor SVG_Item::backgroundColor() const
{
return m_backgroundColor;
}
Pretty old thread but also so viewed so I have the need to answer for those like me that still are using qt5 and the answer is not working because in qt5 doc.documentElement() returns a const element. There is the simple changes you need to make to make it work:
void SetAttrRecur(QDomElement &elem, QString strtagname, QString strattr,
QString strattrval)
{
// if it has the tagname then overwritte desired attribute
if (elem.tagName().compare(strtagname) == 0)
{
elem.setAttribute(strattr, strattrval);
}
// loop all children
for (int i = 0; i < elem.childNodes().count(); i++)
{
if (!elem.childNodes().at(i).isElement())
{
continue;
}
QDomElement docElem = elem.childNodes().at(i).toElement(); //<-- make const "variable"
SetAttrRecur(docElem, strtagname, strattr, strattrval);
}
}
QIcon ChangeSVGColor(QString iconPath, QString color)
{
// open svg resource load contents to qbytearray
QFile file(iconPath);
if(!file.open(QIODevice::ReadOnly))
return {};
QByteArray baData = file.readAll();
// load svg contents to xml document and edit contents
QDomDocument doc;
doc.setContent(baData);
// recurivelly change color
QDomElement docElem = doc.documentElement(); //<-- make const "variable"
SetAttrRecur(docElem, "path", "fill", color);
// create svg renderer with edited contents
QSvgRenderer svgRenderer(doc.toByteArray());
// create pixmap target (could be a QImage)
QPixmap pix(svgRenderer.defaultSize());
pix.fill(Qt::transparent);
// create painter to act over pixmap
QPainter pixPainter(&pix);
// use renderer to render over painter which paints on pixmap
svgRenderer.render(&pixPainter);
QIcon myicon(pix);
return myicon;
}
If white is the only color you need, then a simple solution would be to change the color of the original SVG image with an image editor (e.g. Inkscape). Of course, if you need use the image with many different colors, that wont be a reasonable solution.