So, this is my problem: I have this very big image, and I want to show only a specific part of it. After the user pressing a specific key I want the image to move, showing another part of it. The transition from one part of the image to another have to be smooth, animated.
I tried using a QLabel to show the image but it always shows the center of the image, and I do not really know how to make the animation. What would you guys suggest?
Interesting question. Here is something I just tested and seems to work.
Add a QGraphicsView with dimensions the dimensions of the part of the image you want to display, eg 100x100. Create a QGraphicsScene and add it to the view:
QGraphicsScene* pScene = new QGraphicsScene(this);
ui->graphicsView->setScene(pScene);
Now add your image into the scene. In my case I has an image in my resource file. The trick is to set the sceneRect to the position you want to display. I wanted to display an 100x100 part of the image starting from 0,300 :
pItem = pScene->addPixmap(QPixmap::fromImage(QImage(":/photos/image")));
pScene->setSceneRect(0,300,100,100);
In order to test the smooth moving I added a button which when clicked is triggering a slot called move. This slot simply updates the sceneRect. In my simple example I just move the image 100 pixels right. In a real world scenario you could also move it diagonally or vertically and check the image limits.
void move()
{
for (unsigned i=currentX; i<currentX + 100; i++)
{
ui->graphicsView->scene()->setSceneRect(i,300,100,100);
qApp->processEvents();
}
currentX += 100;
}
Notice the currentX variable. It is nothing more than the last image position. Also we must call the processEvents in order to "see" the image moving smoothly.
You could use QPixmap::copy( int x, int y, int width, int height ) to copy a region of the image and display that.
Few options:
Try using a Q3CanvasSprite (within in a Q3Canvas). It is designed more for splitting one image into multiple ones but not for animating between them. You could try abusing it and declaring (say) 100 frames (10 per digit, which would be used as animation steps) or just use the move() method.
Try QGraphicsPixmapItem::setOffset() (within a QGraphicsScene). This might be overkill as QGraphicsScene is made for large number of images).
I'm not sure, but maybe this can be done with QStateMachine and QAbstractAnimation.
Related
i have an application in qt that loads an image. The user can set a cross by moving the slider with setPixel(). If he decrements the slider, the cross should become smaller and the original pixel should be displayed.
But unfortunately nothing happens when I decrement the slider. The cross keeps its maximum size.
The function, that sets the Pixel
void ImageViewer::applyExampleAlgorithm(int kreuzBreite)
{
if(image!=NULL)
{
for(int i=0;i<((kreuzBreite*std::min(image->width(), image->height())/ 100) / 2);i++)
{
image->setPixelColor(image->width()/2+i,image->height()/2,QColor(255,0,0,0));
image->setPixelColor(image->width()/2-i,image->height()/2,QColor(255,0,0,0));
image->setPixelColor(image->width()/2,image->height()/2+i,QColor(255,0,0,0));
image->setPixelColor(image->width()/2,image->height()/2-i,QColor(255,0,0,0));
}
}
updateImageDisplay();
renewLogging();
}
My Slider
QSlider *slider1 = new QSlider(Qt::Horizontal,0);
slider1->setRange(0,100);
connect(slider1, SIGNAL(valueChanged(int)),this, SLOT(applyExampleAlgorithm(int)));
As you can see, the value changes, but my cross does not.
I think I have to save the original pixel and rewrite it, as soon as the red cross disappears at this point. But I dont really know how.
When the slider value decreases, your function only "draw" a smaller red cross in the bigger one that was drawn before. You can store the original image in a different variable. Then, before drawing the red cross, restore to the original image.
I have wrote a class which will be responsible for the image buttons handling:
#include "ImageButton.h"
ImageButton::ImageButton()
{
// main constructor
}
ImageButton::ImageButton(wxWindow* parent, const wxString& buttonPath)
: wxStaticBitmap(parent, wxID_ANY, wxBitmap(buttonPath, wxBITMAP_TYPE_PNG), wxPoint(0, 0), wxDefaultSize)
{
Refresh();
}
ImageButton::~ImageButton()
{
// ...
}
This is very beginning and basic. However, I have just found out that there is probably no possibility to resize the image (not changing it's dimensions).
This is how the image looks like:
What I'd like to achieve right here is tell wxStaticBitmap to display only one close square button at the time (so then I could make a mouse over/click event handlers for it). Setting it's size won't work here and thats not what I want.
Is it possible to crop the image at certain dimensions in this situation?
You can create two images from it. One of the ways to do it is to use wxImage::Resize (first make a copy of the original image). Second way is to use wxBitmap::GetSubBitmap (you need to convert the wxImage to wxBitmap - this can be done by simple assignment). It really depends what you want to achieve and what is more convenient to you.
I'm having trouble with Qt.
I'm writing an app that takes a PNG file from database, and allows you to apply multiple layers (each representing a different set of multiple-choice elements (also from database) for different areas of the base PNG), and displays the result within QGraphicsView Widget. However, when I merge the original image with an element, the original gets smaller and gets a "border" around it.
Examples:
Original image - http://i.imgur.com/6kI2M2y.png (sans black area)
The black element is another PNG, in which there's the element and it's surrounded by transparency.
Result after few merges - http://i.imgur.com/wx8UmmK.png
What the hell? The QGraphicsView is 520x520 and doesn't touch any other Widget. I have to get the app to be able to merge the contents of QGraphicsView multiple times without any kind of movement/resizing, as there will be lots and lots of undecided clicking between various elements and layers.
The app works like this: I have two dynamicly generated arrays of buttons with images taken from database, let's say the Base list and Elements list. When I click a button in the Base list, it's loaded into the main QGraphicsView. Now I am supposed to be able to add elements onto that loaded image by clicking buttons on the other list. I do that by getting the content of QGraphicsView widget and drawing the element using a QPainter.
void MainWindow::on_pushButton_clicked() //placeholder for merging testing
{
QPixmap element("C:\\Users\\Petersaber\\Desktop\\warstwa1.png");
QPixmap base = QPixmap::grabWidget(ui->QGraphicsView);
base= oryginal.scaled(QSize(520,520),Qt::KeepAspectRatio, Qt::SmoothTransformation); //resized to QGV
element= element.scaled(QSize(520,520),Qt::KeepAspectRatio, Qt::SmoothTransformation); //resized for QGV
QPainter painter(&base);
painter.drawPixmap(0,0,element);
//the error happens somewhere later from this point
QGraphicsScene* sceneElement = new QGraphicsScene();
QGraphicsPixmapItem* dodany = new QGraphicsPixmapItem(base);
sceneElement->addItem(dodany);
ui->QGraphicsView->setScene(sceneElement);
ui->QGraphicsView->fitInView(sceneElement->sceneRect(),Qt::KeepAspectRatio);
ui->QGraphicsView->show();
}
My guess is that for some reason it takes more than just what's INSIDE of the QGraphicsView, it also takes the 1-2 pixels around it, but why? How to prevent that? I have no idea. I'm a total newbie to Qt, I've only started two days ago.
edit: I am wrong. That's not how it works. The error happens AFTER the merging. Wtf?
It happens regardless of what size the merged images are. After every merge, two white pixels and 1px border always appear between the merged image and the QGraphicsView edge.
edit: I've discovered that the 2px margin is hard-coded into QGraphicsView::fitInView(). I have no idea how to work around that. I've found pieces of code, such as this,
QRectF removeMargin11945(const QRectF& sceneRect, const QSize& viewerSize){
const int bugMargin = 2;
const double mx = sceneRect.width()/viewerSize.width()*bugMargin;
const double my = sceneRect.height()/viewerSize.height()*bugMargin;
return sceneRect.adjusted(mx, my, -mx, -my);
}
, but I don't know how to implement that
I'm new to Qt development so I've being trying to research a solution to a user interface I need to design. My project is to simulate players in an online game moving around a global map. To represent the map I need to display a 2D grid, with each space in the grid representing a region of a map. I then need to display the location of each player in the game. The back-end is all fully working, with the map implemented as a 2D array. I'm just stuck on how to display the grid.
The research I have done has led me to believe a QGraphicsView is the best way to do this, but I can't seem to find a tutorial relevant to what I need. If anyone has any tips on how to implement this it would be much appreciated.
Thanks, Dan
A 2D Grid is nothing more than a set of horizontal and vertical lines. Suppose you have a 500x500 map and you want to draw a grid where the distance between the lines in both directions is 50. The sample code that follows shows you how you can achieve it.
// create a scene and add it your view
QGraphicsScene* scene = new QGraphicsScene;
ui->view->setScene(scene);
// Add the vertical lines first, paint them red
for (int x=0; x<=500; x+=50)
scene->addLine(x,0,x,500, QPen(Qt::red));
// Now add the horizontal lines, paint them green
for (int y=0; y<=500; y+=50)
scene->addLine(0,y,500,y, QPen(Qt::green));
// Fit the view in the scene's bounding rect
ui->view->fitInView(scene->itemsVBoundingRect());
You should check the QGraphicsView and the QGraphicsScene documentation as well as the corresponding examples. Also you can watch the graphics view training videos or some graphics view related videos from the Qt developer days.
Well if you have a constant grid size or even a limited number of grid sizes what i like to do is to draw a grid block in gimp or any other program and then set that as the background brush (draw only bottom and right side of the block) qt will repeat the image and will give you a full grid. I think this is good for performance too.
This is the grid image i used in one of my programs it's 10x10 pixels.
Then call QGraphicsScene setBackgroundBrush as the follwing:
scene->setBackgroundBrush(QBrush(QPixmap(":/grid/grid10.png")));
The more native way is this:
scene = self.getScene() # Your scene.
brush = QBrush()
brush.setColor(QColor('#999'))
brush.setStyle(Qt.CrossPattern) # Grid pattern.
scene.setBackgroundBrush(brush)
borderColor = Qt.black
fillColor = QColor('#DDD')
rect = QRectF(0.0, 0.0, 1280, 720) # Screen res or whatever.
scene.addRect(rect,borderColor,fillColor) # Rectangle for color.
scene.addRect(rect,borderColor,brush) # Rectangle for grid.
Sorry by PyQt...
Suppose a scene is set to the graphicsview then simply below one line will show the grid.
ui->graphicsView->scene()->setBackgroundBrush(Qt::CrossPattern);
There several other values can be passed for ex: Qt::Dense7Pattern
These are members of enum BrushStyle, just click on any used value in Qt creator and it will take you to the enum declaration where you can see all other possible values.
PS:
A scene can be set like this:
ui->graphicsView->setScene(new QGraphicsScene());
I'm creating a image visualizer that open large images(2gb+) in Qt.
I'm doing this by breaking the large image into several tiles of 512X512. I then load a QGraphicsScene of the original image size and use addPixmap to add each tile onto the QGraphic Scene. So ultimately it looks like a huge image to the end user when in fact it is a continuous array of smaller images stuck together on the scene.First of is this a good approach?
Trying to load all the tiles onto the scene takes up a lot of memory. So I'm thinking of only loading the tiles that are visible in the view. I've already managed to subclass QGraphicsScene and override its drag event thus enabling me to know which tiles need to be loaded next based on movement. My problem is tracking movement on the scrollbars. Is there any way I can create an event that get called every time the scrollbar moves. Subclassing QGraphicsView in not an option.
QGraphicsScene is smart enough not to render what isn't visible, so here's what you need to do:
Instead of loading and adding pixmaps, add classes that wrap the pixmap, and only load it when they are first rendered. (Computer scientists like to call this a "proxy pattern"). You could then unload the pixmap based on a timer. (They would be transparently re-loaded if unloaded too soon.) You could even notify this proxy path of the current zoom level, so that it loads lower resolution images when they will be rendered smaller.
Edit: here's some code to get you started. Note that everything that QGraphicsScene draws is a QGraphicsItem, (if you call ::addPixmap, it's converted to a ...GraphicsItem behind the scenes), so that's what you want to subclass:
(I haven't even compiled this, so "caveat lector", but it's doing the right thing ;)
class MyPixmap: public QGraphicsItem{
public:
// make sure to set `item` to nullptr in the constructor
MyPixmap()
: QGraphicsItem(...), item(nullptr){
}
// you will need to add a destructor
// (and probably a copy constructor and assignment operator)
QRectF boundingRect() const{
// return the size
return QRectF( ... );
}
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option,
QWidget *widget){
if(nullptr == item){
// load item:
item = new QGraphicsPixmapItem( ... );
}
item->paint(painter, option, widget);
}
private:
// you'll probably want to store information about where you're
// going to load the pixmap from, too
QGraphicsPixmapItem *item;
};
then you can add your pixmaps to the QGraphicsScene using QGraphicsScene::addItem(...)
Although an answer has already been chosen, I'd like to express my opinion.
I don't like the selected answer, especially because of that usage of timers. A timer to unload the pixmaps? Say that the user actually wants to take a good look at the image, and after a couple of seconds - bam, the image is unloaded, he will have to do something in order the image to reappear. Or may be you will put another timer, that loads the pixmaps after another couple of seconds? Or you will check among your thousand of items if they are visible? Not only is this very very irritating and wrong, but that means that your program will be using resources all the time. Say the user minimizes you program and plays a movie, he will wonder why on earth my movie is freezing every couple of seconds...
Well, if I misunderstood the proposed idea of using timers, execuse me.
Actually the idea that mmutz suggested is better. It reminded me of the Mandelbrot example. Take a look at it. Instead of calculating what to draw you can rewrite this part to loading that part of the image that you need to show.
In conclusion I will propose another solution using QGraphicsView in a much simpler way:
1) check the size of the image without loading the image (use QImageReader)
2) make your scene's size equal to that of the image
3) instead of using pixmap items reimplement the DrawBackground() function. One of the parameters will give you the new exposed rectangle - meaning that if the user scrolls just a little bit, you will load and draw only this new part(to load only part of an image use setClipRect() and then read() methods of the QImageReader class). If there are some transformations you can get them from the other parameter(which is QPainter) and apply them to the image before you draw it.
In my opinion the best solution will be to combine my solution with the threading shown in the Mandelbrot example.
The only problem that I can think of now is if the user zooms out with a big scale factor. Then you will need a lot of resources for some time to load and scale a huge image. Well I see now that there is some function of the QImageReader that I haven't tried yet - setScaledSize(), which maybe do just what we need - if you set a scale size and then load the image maybe it won't load first the entire image – try it. Another way is just to limit the scale factor, a thing that you should do anyway if you stick to the method with the pixmap items.
Hope this helps.
Unless you absolutely need the view to be a QGraphicsView (e.g. because you place other objects on top of the large background pixmap), I'd really recommend just subclassing QAbstractScrollArea and reimplementing scrollContentsBy() and paintEvent().
Add in a LRU cache of pixmaps (see QPixmapCache for inspiration, though that one is global), and make the paintEvent() pull used pixmaps to the front, and be set.
If this sounds like more work than the QGraphicsItem, believe me, it's not :)