My problem is the following:
I have a QGraphicsScene, there is a QPixmap on it. I would like to rotate that pixmap around a center point, would work like a clock actually.
I've tried these:í
QPixmap pointer_pixmap("/home/peter/desktop/myimg2.png");
QTransform transform;
QGraphicsPixmapItem *pointer = new QGraphicsPixmapItem(pointer_pixmap);
pointer->setOffset(174,190);
pointer->setTransformOriginPoint(QPoint(174-pointer_pixmap.width(), 190-pointer_pixmap.height()));
transform.translate((174-pointer_pixmap.width())/2,(190-pointer_pixmap.height())/2);
transform.rotate(60);
transform.translate(-((174-pointer_pixmap.width())/2),-((190-pointer_pixmap.height())/2));
pointer_pixmap = pointer_pixmap.transformed(transform);
item->addItem(pointer);
pointer->setPixmap(pointer_pixmap);
It looks like the translation doesn't have any effect on my pixmap. Why's that?
You should rotate the QGraphicsPixmapItem, not the pixmap itself.
Use QGraphicsItem::setTransformOriginPoint to define the transform origin point and QGraphicsItem::setRotation to rotate the item.
Related
I'm new to Qt and I'm having some problem with QWidget rotation.
I have a QPixmap inside a QLabel.
What I want is to animate it with a continuous rotation by 90 degrees.
I know QPropertyAnimation and I know how to use it, but I'm struggling with How to use it for rotating a QWidget. Is there any simple way to use achieve my goal and rotate the entire QLabel or the QPixmap inside it with an animation?
Thank you.
This is the demo for rotation of QLabel/QPixmap with animation.
it's not necessary to use QPropertyAnimation. Because there is no rotate property for QLabel or QPixmap. So used QVariantAnimation make QPixmap rotate as animation and use QPixmap::transformed to rotate it. If you want well to control the animation of the pixmap, highly recommend QGraphicsPixmapItem with QPropertyAnimation
class RotateMe : public QLabel {
Q_OBJECT
public:
explicit RotateMe(QWidget* parent = Q_NULLPTR) :
QLabel(parent),
pixmap(100, 100),
animation(new QVariantAnimation )
{
resize(200, 200);
pixmap.fill(Qt::red);
animation->setDuration(10000);
animation->setStartValue(0.0f);
animation->setEndValue(90.0f);
connect(animation, &QVariantAnimation::valueChanged, [=](const QVariant &value){
qDebug()<<value;
QTransform t;
t.rotate(value.toReal());
setPixmap(pixmap.transformed(t));
});
animation->start();
}
private:
QPixmap pixmap;
QVariantAnimation *animation;
};
You can implement the rotation in two ways:
1) Create a collection of static images each of which represents the original pixmap rotated by some angle. With a timer you can change your label's pixmap with one from your collection. This will imitate the animated rotation.
2) Use a single pixmap and override your label's QLabel::painEvent() where you should rotate the QPainter object with QPainter::rotate() function each time you redraw the label.
I'm working on a Qt application made with a main QGraphicsView.
This view can show and switch between differents QgraphicsScenes. This application needs to always have an overlay in front of each scenes, so the best way to do this overlay is by setForegroundBrush() method of QGraphicsView.
But my overlay is a tiled-image, where I could edit the opacity and the scale of the source image.
Here's the code written in my QGraphicsView class constructor :
QString imgPath("path/to/image.png");
QPixmap map(imgPath);
QPainter painter(this);
QRectF zone(0,0,map.width(),map.height());
painter.drawPixmap(zone,map,zone);
QBrush brush = painter.brush();
brush.setStyle(Qt::TexturePattern);
setForegroundBrush(brush);
But doesn't work, nothing is shown.
I tested a simple QBrush with a QPixmap and works fine, but I need to use QPainter to be able to edit the opacity of my image.
Finally I think the easiest way to have a tiled image in QGraphicsView foreground is by reimplmenting the drawForeground(QPainter *painter, const QRectF &rect).
void Frontend::drawForeground(QPainter *painter, const QRectF &rect){
float alpha = 0.15;
float scale = 2;
QString imgPath("path/to/image.png");
QPixmap img(imgPath);
painter->scale(scale,scale);
painter->setOpacity(alpha);
painter->drawTiledPixmap(rect,img);
}
You cannot paint on the widget outside of its paintEvent method. Perhaps you wanted to have the painter work on the pixmap (painter(&map)) instead of the widget (painter(this))?
You could also add an overlay by:
Painting it in the reimplemented paintEvent of your derived scene, making sure that you paint not on the scene, but on its viewport(). There are convenience methods that are called by the view's paintEvent, such as drawBackground and drawForeground.
Painting it in a generic QWidget overlay.
I have several answers that demonstrate how to get overlays over widgets in generaly, and also on scene views.
I am using QGraphicsTextItem to paint the text on the scene. Text is painted along the path (QGraphicsPathItem), wich is parent of my QGraphicsTextItem - so the text rotation is changed to be along the path element and is sticked to it while zooming the view. But the font size of QGraphicsTextItem is also changing while zooming the view - this is what I am trying to avoid. Of I set QGraphicsItem::ItemIgnoresTransformations flag to the QGraphicsTextItem it stops rotating while it's parent (QGraphicsPathItem) does.
I do understand that I have to re-implement QGraphicsTextItem::paint function, but I am stuck with the coordination system. Here is the code (Label class inherits public QGraphicsTextItem):
void Label::paint( QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget )
{
// Store current position and rotation
QPointF position = pos();
qreal angle = rotation();
// Store current transformation matrix
QTransform transform = painter->worldTransform();
// Reset painter transformation
painter->setTransform( QTransform() );
// Rotate painter to the stored angle
painter->rotate( angle );
// Draw the text
painter->drawText( mapToScene( position ), toPlainText() );
// Restore transformation matrix
painter->setTransform( transform );
}
The position (and rotation) of my text on the screen is unpredictable :(
What am I doing wrong? Thank you very much in advance.
I solved a problem this way - for drawing a line/circle/rectangle/path, which I want to be transformed, I use an appropriate QGraphicsLine/Ellipse/Rect/PathItem. For drawing the text (which I do NOT want to be transformed) I use QGraphicsSimpleTextItem. I set text's flag to ignore transormations and set it's parent to Line/Ellipse/Rect/Path item. The Line/Ellipse/Rect/Path item transforms, but text does not - this is what I wanted. I can also rotate text and set it's position.
Thank you very much for answers.
The following solution worked perfectly for me:
void MyDerivedQGraphicsItem::paint(QPainter *painter, const StyleOptionGraphicsItem *option, QWidget *widget)
{
double scaleValue = scale()/painter->transform().m11();
painter->save();
painter->scale(scaleValue, scaleValue);
painter->drawText(...);
painter->restore();
...
}
We can also multiply the scaleValue by other mesures we want to keep its size constant outside the save/restore environment.
QPointF ref(500, 500);
QPointF vector = scaleValue * QPointF(100, 100);
painter->drawLine(ref+vector, ref-vector);
I had this issue once. Instead of ignoring transformations, you need to scale down the items you don't want to be zoomed in in your zoom-in function.
When you zoom in, if you change the scale by ds for example, scale the items by 1.0 / ds
You might need to change their positions though.
I hope this helps.
Edit: I hope I understood the question right.
How would you suggest to handle svg with QPixmap?
The construct QPixmap(":/myfile.svg"); then call of scaled() does not work. The QPixmap gets pixelised.
Thx.
Now there is much simpler way without needing of SVG module
QIcon("filepath.svg").pixmap(QSize())
So simple and works fine. Atleast in my case it worked.
You should use SVGRenderer to render it onto a QImage. From there you can convert to a QPixmap with QPixmap::convertFromImage.
Something like that:
QSvgRenderer renderer(svg_file_name);
QPixmap pm(width, height);
pm.fill(fill_color);
QPainter painter(&pm);
renderer.render(&painter, pm.rect());
On Qt5.12 i managed to display SVG icons without pixellisation in a QLabel:
QPixmap logoPixmap(":my-logo.svg"); // set your logo here
auto logoLabel = new QLabel(this);
logoLabel->setPixmap(logoPixmap);
logoLabel->setScaledContents(true);
logoLabel->setFixedSize(176, 61); // set your size here
I have a QGraphicsView and a QGraphicsScene connected like this:
graphicsScene->setSceneRect(this->graphicsView->rect());
graphicsView->setScene(this->Scene);
Then I load an image and add it to the scene:
QPixmap pixmap;
pixmap.load(fileName);
pixmap = pixmap.scaled(this->graphicsView->size());
QGraphicsPixmapItem* item = this->Scene->addPixmap(pixmap);
Now, as described in the documentation, the image corner is at (0,0), which is not the corner of the graphicsScene. I know I can position the resulting pixmap by doing:
item->setPos(this->Scene->sceneRect().x(), this->Scene->sceneRect().y());
However, I can't seem to make sense of the coordinates of the rect's of the scene or the view. Can anyone explain how I would move the pixmap to the corner of the scene/view?
Thanks,
David
EDIT: Here is the full form constructor. The QGraphicsView was created in Qt Designer and is inside of a GridLayout:
Form::Form(QWidget *parent)
: QWidget(parent)
{
setupUi(this);
QGraphicsScene* scene = new QGraphicsScene;
scene->setSceneRect(this->graphicsView->rect());
this->graphicsView->setScene(scene);
QPixmap pixmap;
pixmap.load("image.png");
pixmap = pixmap.scaled(this->graphicsView->size());
scene->addPixmap(pixmap);
}
I also tried this:
QGraphicsScene* scene = new QGraphicsScene;
this->graphicsView->setScene(scene);
QPixmap pixmap;
pixmap.load("/home/doriad/glasses.jpg");
QGraphicsPixmapItem * item = scene->addPixmap(pixmap);
this->graphicsView->fitInView (item);
but the image appears tiny, rather than filling up the view like I would expect. Can anyone explain this?
The full project and image are available here: daviddoria.com/Uploads/qt/QPixmapPosition
Don't worry about scaling the pixmap yourself or even translating it, let the view do it for you.
Use graphicsView->fitInView(pixmap); but you should read the documentation for :
Qt's Graphics View Framework
void QGraphicsView::setSceneRect (QRectF )
void QGraphicsView::translate ( qreal dx, qreal dy )
void QGraphicsView::fitInView ( const QGraphicsItem * item, ... )
The way that QGraphicsScene and QGraphicsView interact is that you can have a single scene with at least one or more views.
A good example I like to think of is a zoomed in view of part of a map with a mini view of the entire map in the corner. There are two views, one of part of the map and one of the entire map, with one scene, the map itself.
So you put items in your scene and all the items in the scene are drawn relative in size to each other. The "scene rect" of your view, by default, scales to fit the items in the view until one unit in the scene is one pixel in the view or until it needs to zoom out to fit all the items in your scene.
If you call fitInView(someItem) it should scale your view of the scene so that the item specified fills it up and translates the view so that it is centered. If you need to translate or scale it more use the translate or scale functions in QGraphicsView.
When you are jumping between coordinate systems of your scene and view with your QRect's or QPoint's, use the helper functions: mapToScene and mapFromScene from QGraphicsView.
Try this:
QGraphicsScene* scene = new QGraphicsScene;
scene->setSceneRect(graphicsView->sceneRect());
QPixmap pixmap;
pixmap.load("/home/doriad/glasses.jpg");
pixmap=pixmap.scaledToWidth(this->graphicsView->width());
QGraphicsPixmapItem * item = scene->addPixmap(pixmap);
graphicsView->setScene(scene);
By default, the pixmap will be at (0,0) in the scene, and the scene will be at (0,0) in the view. QWidgets are sized by pixels. If you had a QGraphicsView the size of the screen and the resolution is 1440 x 900, you can position objects in that view from (0,0) or the top left corner of the screen, to (1440,900) the bottom right corner of the screen. Most QGraphicsItems are placed with reference to their top left corner. So placing a pixmap at (0,0) aligns the top left corner of the pixmap with the top left corner of the scene it's placed in. If your pixmap 'hangs off the bottom' of your view, try using:
pixmap=pixmap.scaledToHeight(this->graphicsView->height());
If you use the function:
this->graphicsView->fitInView (item);
The graphicsView will only scroll to the point where your item fits in the view.
I downloaded David's code and ran it two ways. Click the links to see the results.
1) with pixmap=pixmap.scaledToHeight(this->graphicsView->height());
2) with pixmap=pixmap.scaledToHeight(200);
I don't know enough to explain why this is happening, but I thought it would be a useful data point.
It turns out the problem was that the GraphicsView was in a layout. In my example, the resizing of the image was done in the Form constructor. Apparently this is before the layout takes its shape? I moved the code to a pushButton and when I click it the image is sized how I would expect.
I got the image to stay sized to the GraphicsView in the Layout by subclassing QGraphicsView and reimplementing :
class CustomGraphicsView: public QGraphicsView
{
Q_OBJECT
{
void resizeEvent ( QResizeEvent * event )
{
emit resized();
}
signals:
void resized();
}
Then I connect this resized() signal to a slot that simply calls this->View->fitInView (this->ImageToTraceItem);
David