I have some small graphicsitems on a canvas which need to display some text. When there is a line break, the vertical line spacing is unnecessarily large, which makes the text be drawn outside the graphic items. I have been searching for a way to set the line spacing (or maybe height) on a QGraphicsTextItem but no luck.
I have tried;
setHtml("<div line-height=100%>some text</div>")
etc.
The code where a need to set the inter line apace is:
class GraphicText(QtGui.QGraphicsTextItem):
def __init__(self, text='', font=None, editable=False, text_width = None, **kw):
super(GraphicText, self).__init__(**kw)
if editable:
self.setTextInteractionFlags(QtCore.Qt.TextEditorInteraction)
else:
self.setTextInteractionFlags(QtCore.Qt.NoTextInteraction)
if font:
self.setFont(font)
self.setText(text, text_width)
def setText(self, text = '', text_width = None):
cw = self.textWidth()
try:
width = text_width or (cw if cw>0 else False) or self.parentItem().boundingRect().width()-4
except AttributeError:
width = 100
self.setTextWidth(width)
self.setHtml(text)
rect = self.boundingRect()
self.setPos(-rect.width() / 2, -rect.height() / 2) # center
This is Python/PySide, but otherwise the API is pretty much the same as for C++. The HTML is currently passed into the init method as parameter 'text'. The parent of the QGraphicsTextItem is a QGraphicsItem.
Please help, this is really an eyesore.
Cheers, Lars.
This behavior is not reproduced when the line break is caused by <br> in the item's html code. Auto line break using "test1 test2" content and setTextWidth is also working fine. But when the line break is caused by <p></p> tags, the unnecessarily large line height shows up. I assume that this is your case. It can be easily fixed:
item->document()->setDefaultStyleSheet("p { margin: 0; }");
Note that you need to call it before setting item's content. This command doesn't affect current content.
Related
I am trying to code a text editor from scratch in C++ using Qt/QML. For drawing the text I use a Canvas with a Context2D , which looks roughly like this:
function drawString(text, x, y, font) {
var ctx = getContext("2d");
ctx.font = font;
ctx.fillStyle = "black";
ctx.fillText(qsTr(text), x, y);
ctx.stroke();
}
In order to graphically represent a selected area, I want to invert the selecion, for instance place a black rectangle over an area and make the text white.
For this I will use ctx.globalCompositeOperation = "xor"
So the problem I ran into is: when I draw a text with the function above in black, and then afterwards paint the same text in the same location in white I would expect this canvas to be white again. Instead there is still some kind of outline of the text visible (like there is a shadow).
I already tried switching off all shadow parameters but it didn't solve my problem.
Here is a screenshot so you get a better idea of what it looks like:
Nevermind, I found the problem myself. The antialiasing property was set to true, which caused the effect. By setting it to false the text doesn't look as pretty but the shadow is gone.
I'm using PySide/PyQt, but this is a general Qt question.
Is there a way to set up a QFormLayout so that labels are centered vertically without having to explicitly create the QLabel's and set their vertical size policy to expanding first? When the widget in column 2 is taller than my label, I want my label to be centered vertically with the widget, rather than aligned with it's top...
Here's an example script that demonstrates the problem. I've colored the labels red to better demonstrate their size behavior.
from PySide import QtCore, QtGui
app = QtGui.QApplication([])
widget = QtGui.QWidget()
widget.setStyleSheet("QLabel { background-color : red}")
layout = QtGui.QFormLayout()
layout.setFieldGrowthPolicy(QtGui.QFormLayout.AllNonFixedFieldsGrow)
layout.setLabelAlignment(QtCore.Qt.AlignCenter)
editor1 = QtGui.QLineEdit()
editor1.setFixedSize(300, 100)
editor2 = QtGui.QLineEdit()
editor2.setFixedSize(300, 100)
layout.addRow('Input', editor1)
layout.addRow('Longer Named Input', editor2)
widget.setLayout(layout)
widget.show()
app.exec_()
Here's the outcome:
Here's an example that demonstrates the desired result by explicitly creating QLabel's and giving them an expanding size policy:
from PySide import QtCore, QtGui
app = QtGui.QApplication([])
widget = QtGui.QWidget()
widget.setStyleSheet("QLabel { background-color : red}")
layout = QtGui.QFormLayout()
layout.setFieldGrowthPolicy(QtGui.QFormLayout.AllNonFixedFieldsGrow)
layout.setLabelAlignment(QtCore.Qt.AlignCenter)
editor1 = QtGui.QLineEdit()
editor1.setFixedSize(300, 100)
editor2 = QtGui.QLineEdit()
editor2.setFixedSize(300, 100)
label1 = QtGui.QLabel('Input')
expand = QtGui.QSizePolicy.Expanding
label1.setSizePolicy(expand, expand)
label2 = QtGui.QLabel('Longer Named Input')
label2.setSizePolicy(expand, expand)
layout.addRow(label1, editor1)
layout.addRow(label2, editor2)
widget.setLayout(layout)
widget.show()
app.exec_()
And here's that outcome...
I've tried QFormLayout.setLabelAlignment() which doesn't appear to help. The docs even mention that setLabelAlignment only does the horizontal alignment of the labels (and even then doesn't appear to do centered, just left or right).
As an aside, this lead me to also try to set the horizontal alignment to centered, but that proved even harder since the labels don't expand horizontally to fill the space (small labels don't expand to match the biggest label). The only way I could get horizontally centered labels was to explicitly find the width of the biggest label, after showing the widget, then set all other labels to have the same width...
labels = [layout.itemAt(i*2).widget() for i in range(layout.rowCount())]
max_width = max(label.width() for label in labels)
for w in labels:
w.setFixedWidth(max_width)
w.setAlignment(QtCore.Qt.AlignCenter)
Which results in this:
Is there anything I'm missing at the QFormLayout level that will center the labels? Do I have to make QLabels and set to expanding or turn on expanding after the fact (like below)? Thanks for any ideas!
expand = QtGui.QSizePolicy.Expanding
labels = [layout.itemAt(i*2).widget() for i in range(layout.rowCount())]
for w in labels:
w.setSizePolicy(expand, expand)
"[2] Labels can only be aligned left (by default) or right" - I don't believe this is true.
Your code doesn't run for me, so I can't test your exact code. However, this method works for other widgets: notice the use of | to separate the various positional commands.
label2.setAlignment(PyQt5.QtCore.Qt.AlignLeft|PyQt5.QtCore.Qt.AlignVCenter)
I get this is a few years old, so you've probably come up with another way, but this method works well for me.
I don't think there is an elegant solution to your problem.
From QFormLayout's source code:
void QFormLayoutPrivate::arrangeWidgets(const QVector<QLayoutStruct>& layouts, QRect &rect)
{
// [...]
if (label) {
int height = layouts.at(label->vLayoutIndex).size;
if ((label->expandingDirections() & Qt::Vertical) == 0) {
/*
If the field on the right-hand side is tall,
we want the label to be top-aligned, but not too
much. So we introduce a 7 / 4 factor so that it
gets some extra pixels at the top.
*/
height = qMin(height,
qMin(label->sizeHint.height() * 7 / 4,
label->maxSize.height()));
}
[1] QSize sz(qMin(label->layoutWidth, label->sizeHint.width()), height);
int x = leftOffset + rect.x() + label->layoutPos;
[2] if (fixedAlignment(q->labelAlignment(), layoutDirection) & Qt::AlignRight)
[ ] x += label->layoutWidth - sz.width();
[ ] QPoint p(x, layouts.at(label->vLayoutIndex).pos);
// ### expansion & sizepolicy stuff
label->setGeometry(QStyle::visualRect(layoutDirection, rect, QRect(p, sz)));
}
// [...]
}
What do we see here?
[1] Labels do not stretch horizontally
[2] Labels can only be aligned left (by default) or right
So you have to either somehow manually synchronize labels' widths (e.g. set fixed one) or abandon QFormLayout and use QGridLayout instead.
1) How can I wrap text in a QGraphicsTextItem to fit a fixed rectangle, with width and height ?
Right now I am experimenting with creating a text, getting its bounding rectangle, and resizing it to fit the box - but I can't get wrapping.
class TTT: public QGraphicsTextItem {
TTT() {
{
setPlainText("abcd");
qreal x = m_itemSize.width()/boundingRect().width();
qreal y = m_itemSize.height()/boundingRect().height();
scale(x, y);
}
void paint(QPainter* painter, const QStyleOptionGraphicsItem* option, QWidget* widget) {
// experiment with clip regions
// text gets covered by hole in clip
QRegion r0(boundingRect().toRect());
QRegion r1(QRect(5, 5, 10, 10), QRegion::Ellipse);
QRegion r2 = r0.subtracted(r1);
painter->setClipRegion(r2);
painter->setBrush(Qt::yellow);
painter->drawRect(boundingRect());
QGraphicsTextItem::paint(painter, option, widget);
}
}
What makes wrapping happen, how can I trigger it ?
Right now, as I keep typing, the box is automatically expanding.
2) Is it possible to wrap the text in a QGraphicsItem / QGraphicTextItem subclass in a shape that is not a rectangle ?
(Something like in the image above)
I tried to use clipRegion, see code above, but I guess it is not the right way to go, clipping cuts the text but did not wrap.
Maybe it would... If I could figure out how to wrap text in the first place ?
Qt 4.8
You did not specify Qt version but try:
void QGraphicsTextItem::setTextWidth(qreal width)
Sets the preferred width for the item's text. If the actual text is wider than >the specified width then it will be broken into multiple lines.
If width is set to -1 then the text will not be broken into multiple lines >unless it is enforced through an explicit line break or a new paragraph.
The default value is -1.
In answer to 1) I'd opt not to use the QGraphicsTextItem, but draw the text directly in your QGraphicsItem's paint function using the drawText overloaded function, which takes a QTextOption parameter.
Using this, you can set the WrapMode, for example, with a call to
QTextOption::setWrapMode(QTextOption:: WordWrap)
As for 2) with a non-rectangular shape, I don't think Qt will do this for you.
Doing it yourself you can use QFontMetrics, to work out just how much text would fit in each line, depending upon where it lies within its bounding item.
Alternatively, you could adapt the concept of a text-to-path method.
Anybody know how I could wrap the text in reverse order, from bottom to top?
I attached an example image.
[][http://i.stack.imgur.com/RVsIG.jpg]
Instead of breaking the line after it is full and having an incomplete line at the end, I need to brake somehow from bottom to top, so bottom lines are full and top line is incomplete.
I would not recommend using exotic CSS attributes which aren't even in Chrome & Firefox yet. The best cross-browser solution is to handle this in Javascript when the document loads. Here's a sketch of how to do that:
$(function() {
$(".title").each(function(i,title) {
var width = 0;
var originalHeight = $(title).height();
var spacer = $('<div style="float:right;height:1px;"/>').prependTo(title);
while (originalHeight == $(title).height()) {
spacer.width( ++width );
}
spacer.width( --width );
});
});
Working JSFiddle is here: http://jsfiddle.net/zephod/hfuu3m49/1/
6 years later, but fret not! I have found a pure CSS solution!
Turns out you can achieve this result with flexbox, but it's not obvious or very straight forward. This is what I started out with:
I want the header to be "bottom-heavy", the same effect as you describe in the question.
I began by splitting up my string by whitespace and giving them each a <span> parent. By using flex-wrap: wrap-reverse, and align-content: flex-start. You will achieve this:
Oh no! Now the order is messed up! Here comes the trick. By reversing both the order in which you add spans to the HTML and the direction order of flex with 'flex-direction: row-reverse', you actually achieve the "pyramid-shaped" upwards overflow effect you desire.
Here is my (simplified) code, using react and react-bootstrap:
<Row className='d-flex flex-wrap-reverse flex-row-reverse align-content-start'>
{props.deck.name
.split(' ')
.reverse()
.map(word => (
<span className='mr-1'>{word}</span>
))}
</Row>
There is no general css solution for it. You must have to utilize help of any language.
This is one of the solution using PHP:
<?php
$str= "This is what I want to achieve with your help";
$str = strrev($str);
$exp = str_split($str,18);
$str = implode(">rb<", $exp);
echo strrev($str);
?>
Well, if that is depending on the text, then you can try something like a word replacer. For example
var words = "This is what I want to achieve";
var newWords.replace("what", "what <br />"); // note the line break
document.write(newWords);
Here is a fiddle for you: http://jsfiddle.net/afzaal_ahmad_zeeshan/Ume85/
Otherwise, I don't think you can break a line depending on number of characters in a line.
Wrap and Nowrap will be rendered by the client-browser, so you can not force the browser to wrap from bottom to top. but you can do that with javascript or asp.
This is not a formal solution for this problem. But see if this helps.
The HTML CODE
<div id="mydiv">
I can imagine the logic behind the code having to detect what is the last line, detect the div size, and the font size... then measure how many characters it can fit and finally go to the above line and insert the break where necessary. Some font families might make this harder, but trial and error should solve the issue once the basic code is set..
</div>
CSS:
#mydiv
{
width:1000px;
line-height:18px;
font-size:20px;
text-align:justify;
word-break:break-all;
}
Here setting the div width around 50 times that of the font-size will give you the precise result. Other width values or font values might slightly disorient the last line, giving some blank space after the last character.(Could not solve that part, yet).
JQuery:
$(document).ready(function(){
//GET the total height of the element
var height = $('#mydiv').outerHeight();
//Get the height of each line, which is set in CSS
var lineheight = $('#mydiv').css('line-height');
//Divide The total height by line height to get the no of lines.
var globalHeight = parseInt(height)/parseInt(lineheight);
var myContent = $('#mydiv').html();
var quotient = 0;
//As long as no of lines does not increase, keep looping.
while(quotient<=globalHeight)
{
//Add tiny single blank space to the div's beginning
$('#mydiv').html(' '+myContent);
//Get the new height of line and height of div and get the new no of lines and loop again.
height = $('#mydiv').outerHeight();
lineheight = $('#mydiv').css('line-height');
quotient = parseInt(height)/parseInt(lineheight);
myContent = $('#mydiv').html();
}
//get the final div content after exiting the loop.
var myString = $('#mydiv').html();
//This is to remove the extra space, which will put the last chars to a new line.
var newString = myString.substr(1);
$('#mydiv').html(newString);
});
If you already know where you want your breaks to take place just use simple HTML breaks to break your content and have it display the way you want.
<p>This is what<br/>
want to acheive with your help</p>
If you set the breaks manually (and you know where you want them to break) then create them yourself.
You could also try setting separate css width adjustments based on the dimensions of the screen you are seeing the breaking you are not liking and set an #media reference to make the div width smaller to break the text so it doesn't run unevenly across the top of certain size devices.
Use display: inline-block; on the text div.
Is it possible to adjust QListWidget height and width to it's content?
sizeHint() always returns 256, 192 no matter what its content is.
QListWidgetItem's sizeHint() returns -1, -1, so I can not get content width.
Problem the same as here - http://www.qtcentre.org/threads/31787-QListWidget-width , but there is no solution.
import sys
from PyQt4.QtGui import *
class MainWindow(QWidget):
def __init__(self, parent=None):
QWidget.__init__(self, parent)
list = QListWidget()
list.addItem('111111111111111')
vbox = QVBoxLayout(self)
vbox.addWidget(list)
app = QApplication(sys.argv)
myapp = MainWindow()
myapp.show()
sys.exit(app.exec_())
sizeHint() always returns 256, 192 no
matter what its content is.
Thats because this is the size of the QListWidget, the viewport, not the items. sizeHintForColumn() will give you the max size over all items, so you can resize the widget like this:
list.setMinimumWidth(list.sizeHintForColumn(0))
If you don't want to force minimum width, then subclass and provide this as the size hint instead. E.g.:
class ListWidget(QListWidget):
def sizeHint(self):
s = QSize()
s.setHeight(super(ListWidget,self).sizeHint().height())
s.setWidth(self.sizeHintForColumn(0))
return s
Using takois answer I played around with the sizeHintForColumn or sizeHintForRow and found that you have to add slightly larger numbers, because there might be some style dependent margins still. ekhumoros comment then put me on the right track.
In short the full size of the list widget is:
list.sizeHintForColumn(0) + 2 * list.frameWidth()
list.sizeHintForRow(0) * list.count() + 2 * list.frameWidth())
According to the comment by Violet it may not work in Qt 5.
Also be aware that setting the size to the content, you don't need scrollbars, so I turn them off.
My full example for a QListWidget ajusted to its content size:
from PySide import QtGui, QtCore
app = QtGui.QApplication([])
window = QtGui.QWidget()
layout = QtGui.QVBoxLayout(window)
list = QtGui.QListWidget()
list.addItems(['Winnie Puh', 'Monday', 'Tuesday', 'Minnesota', 'Dracula Calista Flockhart Meningitis', 'Once', '123345', 'Fin'])
list.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
list.setVerticalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
list.setFixedSize(list.sizeHintForColumn(0) + 2 * list.frameWidth(), list.sizeHintForRow(0) * list.count() + 2 * list.frameWidth())
layout.addWidget(list)
window.show()
app.exec_()
In order to effectively use sizeHint, you have to override it, at least in c++. In my experience, the default implementations for widgets can be pretty useless when you want a specific behavior. Attempts to force what you want with spacers or layouts end in disaster. If you can derive from QListWidget and override sizeHint, you can iterate through your items and find the longest string, then do some kind of magic to determine how wide it should be.
That's what I'd do, anyway.
First you should get your largest string in the list, that is easy to obtain.
After you get that string, do the following:
QFontMetrics * fm = new QFontMetrics(widget->font());
QRect rect;
rect = fm->boundingRect(string);
rect.width() has the width in pixels of the largest string
rect.height() has it's height.
Set the QListWidget width to that rect's width (plus the margins)
and it's height to that rect's height times the number of items
I didn't test the code, but hope it puts you on the right track
QListWidget *valList;
valList = new QListWidget(this);
valList->setSizePolicy (QSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored));
valList->setMinimumSize (QSize(1111, 111));
You need to get the QHeaderView of your QListWidget and adjust its resize mode.
Read this documentation for more information
http://doc.qt.nokia.com/latest/qheaderview.html#ResizeMode-enum