How to save a scaled image inside QGRaphicsView using QFileDialog - qt5

I have a user interface with:
N.1 Push button (used to upload images)
N.2 QGraphicsView (left and right)
N.1 Push button that takes a print screen of the current image loaded on QGraphicsView left
Using the mouse is possible to:
1) zoom-in/zoom-out from the image
2) draw rectangles on the image.
I want to take the print screen of the image according to the zoom-in or zoom-out area I am using. However, once the file is saved it shows the entire image (wrong because I wanted only the enlarged or shrank part) with the rectangles drawn (this is correct).
According to this post QFileDialog was used in a similar way I am trying to do. I successfully used QFileDialog::getSaveFileName() to save the image. However it is not entirely solving the problem.
Below the pushbutton that takes care of taking the print screen of the image in the QGraphicsView left:
void MainWindow::on_addNewRecordBtn_clicked()
{
leftScene->clearSelection(); // Selections would also render to the file
leftScene->setSceneRect(leftScene->itemsBoundingRect()); // Re-shrink the scene to it's bounding contents
QImage image(leftScene->sceneRect().size().toSize(), QImage::Format_ARGB32); // Create the image with the exact size of the shrunk scene
image.fill(Qt::transparent); // Start all pixels transparent
QPainter painter(&image);
leftScene->render(&painter);
image.save(QFileDialog::getSaveFileName(this, tr("New Image Name"), QDir::rootPath(),
"Name (*.jpg *.jpeg *.png *.tiff *.tif)"));
}
The expected result would be saving the zoomed image (zoom.jpg for example) like this:
However when I save the image (zoom.jpg) the result that I am obtaining is constantly the entire image with the drawn features:

So if anyone needs, it is possible to take a print screen of an image no matter what the zoom in. Meaning you can zoom-in and zoom-out and take a print screen.
The following statement will do the job, grabbing the image your present (zoomed in or out status):
QImage image = ui->leftView->grab().toImage();
The only glitch is that the scroll bars horizontal and vertical (depending on the zoom) are also printed in your image. You can avoid that by setting them off right before taking the print screen and putting them back on right after.
Basically my previous function can be better written as follows:
void MainWindow::on_addNewRecordBtn_clicked()
{
leftScene->setSceneRect(leftScene->itemsBoundingRect());
// Setting off the scroll bars
ui->leftView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
ui->leftView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
QImage image = ui->leftView->grab().toImage();
image.save(QFileDialog::getSaveFileName(this, tr("New Image Name"), QDir::rootPath(),
"Name (*.jpg *.jpeg *.png *.tiff *.tif)"));
// Putting the scroll bars back on
ui->leftView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
ui->leftView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
}
Hope this will be helpful in case you encountered my same problem.

Related

How to get rounded Corner button image in QML after tiling

I have Button image with Rounded Button image. I am tiling image to get bigger button in QML . I am using parent as rectangle and image as BorderImage. After tiling I am getting rectangle on top image is visible. I need to remove the part of the rectangle so that only rounded button image (Has transparency) is Visible. Even i need to change the color of the behind rectangle so that Color animation is possible.
Please suggest efficient method to remove the behind rectangle and provide the color animation also.
I am attaching the Rounded button border image as attachment and source code for tiling the button image.
Rectangle{
id:outerBorderRect
smooth:true
anchors.fill:parent
//opacity:.25
//border.width:0
BorderImage{
id:innerBorderRect
smooth:true
anchors.fill:parent
border{left:20;top:16;right:17;bottom:20}
horizontalTileMode:BorderImage.Round
verticalTileMode:BorderImage.Round
source:"button_3.png"
}
}
A simple and semi-hack way to do this is to use the radius property in Rectangle to hide the corners of your button.
Or you could use a proper mask by using Qt's OpacityMask.
I'm not sure what kind of animation you're looking for. You'll have to provide more details for me to answer that part.

animation for zoom in and zoom out in android for imageview

How do i set zoom in and zoom out when click on imageview?I want my program to react when user click on imageview must get large to some extent and can move imageview on that screen and sometime it reduce the size along when it move on touch anywhere on the screen .when click again is go resume original size what do i do?
As far as I know there are two ways.
The first way:
Make a new folder in res called 'anim'. Than make a xml file inside, for example zoomin.xml. Afterwards put the following code inside.
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1"
android:toXScale="5"
android:fromYScale="1"
android:toYScale="5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
android:fillAfter="true">
</scale>
Make another one for zoom out, but with reversed values.
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="5"
android:toXScale="1"
android:fromYScale="5"
android:toYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
android:fillAfter="true">
</scale>
You can change the values according to your needs. I think that they are self-explanatory.
And now in your java code.
ImageView imageView = (imageView)findViewById(R.id.yourImageViewId);
Animation zoomin = AnimationUtils.loadAnimation(this, R.anim.zoomin);
Animation zoomout = AnimationUtils.loadAnimation(this, R.anim.zoomout);
imageView.setAnimation(zoomin);
imageView.setAnimation(zoomout);
Now you only need to keep track which is the current state. And for each state execute this lines of codes:
imageView.startAnimation(zoomin);
and
imageView.startAnimation(zoomout);
For example:
imageView.setOnClickListener(new OnClickListener(){
public void onClick(View v) {
if(!pressed) {
v.startAnimation(zoomin);
pressed = !pressed;
} else {
v.startAnimation(zoomout);
pressed = !pressed;
}
}
});
The other way is described here : http://developer.android.com/training/animation/zoom.html.
You can make this by following this guide easily
http://developer.android.com/training/animation/zoom.html
shortly you should use third imageview which is invisible when the user touches any imageview you want, you can display it by using animation in the imageview which is invisible.

PySide: Resizable scene in QGraphicsView

I'm trying to find a way to mark the border of a QGraphicsScene, and make it resizable inside a QGraphicsView, to create something similar to Microsoft Paint.
In other words, my current QGraphicsView looks like this:
But my image is only this big, as indicated by the red box:
I want my QGraphicsView to be like this (the little black boxes are cornergrabbers for resizing the canvas):
Functionally, I want it to be similar to MS Paint:
The canvas (scene) is resizable, and the scrollbars on the window (view) appear when needed. The blue background color (solid gray background) appears behind the canvas.
How would I go about accomplishing this?
To try to get the grey background, I've been experimenting with QGraphicsView.setBackgroundBrush() and QGraphicsScene.setBackgroundBrush(). I've learned that QGraphicsView's background brush completely overrides QGraphicsScene's background brush if one is set. Even if I only set the background brush for QGraphicsScene, that background brush extends over the image's original boundaries.
Here is a link to my test code.
Help is appreciated!
I have to struggle with your constructors...dunno if it works on Windows, but have to make it to work with Linux. Try :
def setPixmap(self, pixmap):
if self.pixmap_item:
self.removeItem(self.pixmap_item)
self.pixmap_item = self.addPixmap(pixmap)
self.setPixBackGround()
def setPixBackGround(self):
# put Background rect for image
pixR = self.pixmap_item.pixmap().rect()
bgRectangle = self.addRect(pixR.x()-10, pixR.y()-10,
pixR.width()+20, pixR.height()+20)
# set color and Z value to put it behind image
bgColor = QColor(58, 176, 176)
bgRectangle.setBrush(bgColor)
bgRectangle.setZValue(-.1)
# take coordinates for brabbers
bgR = bgRectangle.rect()
grab1R = QRect(-5,-5,10,10)
# put grabbers as wish...
grab1 = self.addRect(grab1R)
grab1.setPos(bgR.topLeft())
grab2 = self.addRect(grab1R)
grab2.setPos(bgR.topRight())
# ....etc....

How to resize image to a fixed height and width without losing aspect ratio in winjs?

I have an image area in my application with width:530px and height:510px. I want to place images in that area but the images comes in different different sizes. how to crop or scale the image without losing aspect ratio to fill that area. Is there any native methods available in winjs?
You have a few options for that.
One is to use the ViewBox control that WinJS provides you. The ViewBox can only have a single child (so you would have your tag as its only child perhaps or a div that contains your img) and it will scale that child (using CSS transforms) up to fit into its container (without changing the aspect ratio). It's pretty slick.
Another option is to set the image as the CSS background-image property of a container (such as a div) and set the background-size property to contain. This will stretch the image up to the size of the container.
A final option that you have to resort to if your case is a bit special is not such a bad option after all. In the updateLayout method of your page, you can refer to the element and explicitly set its CSS properties to fit. At that point you'll know all about the layout and can easily do the math to figure out what size image should be. Here's some code from one of my projects where I do this. Notice that I'm comparing the aspect ratio of the screen and the image to determine whether I should size to the width or the height. Unlike your situation (I'm guessing), my code makes sure the image fills the screen and excess is clipped. I'm guessing you want your img to be contained.
function setImagePosition() {
var img = q(".viewCamera #viewport img");
if (outerWidth/outerHeight > img.naturalWidth/img.naturalHeight) {
img.style.width = format("{0}px", outerWidth);
img.style.height = "";
img.style.top = format("{0}px", (outerHeight - img.clientHeight) / 2);
img.style.left = "0px";
} else {
img.style.width = "";
img.style.height = format("{0}px", outerHeight);
img.style.top = "0px";
img.style.left = format("{0}px", (outerWidth - img.clientWidth) / 2);
}
}
Hope that helps!
Are you referring to scaling HTML images? If so, you can set either one, width or height. Whichever you set, the other will scale and keep image aspect ratio.

(C++/CLI) Testing Mouse Position in a Rectangle Relevent to Parent

I've been messing around with the Graphics class to draw some things on a panel. So far to draw, I've just been using the Rectangle Structure. On a panel, by clicking a button, it makes a rectangle in a random place and adds it to an array of other rectangles (They're actually a class called UIElement, which contains a Rectangle member). When this panel is clicked, it runs a test with all the elements to see if the mouse is inside any of them, like this:
void GUIDisplay::checkCollision()
{
Point cursorLoc = Cursor::Position;
for(int a = 0; a < MAX_CONTROLS; a++)
{
if(elementList[a] != nullptr)
{
if(elementList[a]->bounds.Contains(cursorLoc))
{
elementList[a]->Select();
//MessageBox::Show("Click!", "Event");
continue;
}
elementList[a]->Deselect();
}
}
m_pDisplay->Refresh();
}
The problem is, when I click the rectangle, nothing happens.
The UIElement class draws its rectangles in the following bit of code. However, I've modified it a bit, because in this example it uses the DrawReversibleFrame method to do the actually drawing, as I was using Graphics.FillRectangle method. When I changed it, I noticed DrawReversibleFrame drew in a different place than FillRectangle. I believe this is because DrawReversibleFrame draws with its positions relative to the window, while FillRectangle does it relative to whatever Paint event its in (Mines in a panel's Paint method.) So let me just show the code:
void UIElement::render(Graphics^ g)
{
if(selected)
{
Pen^ line = gcnew Pen(Color::Black, 3);
//g->FillRectangle(gcnew SolidBrush(Color::Red), bounds);
ControlPaint::DrawReversibleFrame(bounds, SystemColors::Highlight, FrameStyle::Thick);
g->FillRectangle(gcnew SolidBrush(Color::Black), bounds);
//g->DrawLine(line, bounds.X, bounds.Y, bounds.Size.Width, bounds.Size.Height);
}
else
{
ControlPaint::DrawReversibleFrame(bounds, SystemColors::ControlDarkDark, FrameStyle::Thick);
//g->FillRectangle(gcnew SolidBrush(SystemColors::ControlDarkDark), bounds);
}
}
I add in both DrawReverisbleFrame and FillRectangle so that way I could see the difference. This is what it looked like when I clicked the frame drawn by DrawReversibleFrame:
The orange frame is where I clicked, the black is where its rendering. This shows me that the Rectangle's Contains() method is look for the rectangle relevant to the window, and not the panel. That's what I need fixed :)
I'm wondering if this is happening because the collision is tested outside of the panels Paint method. But I don't see how I could implement this collision testing inside the Paint method.
UPDATE:
Ok, so I just discovered that it appears that what DrawReversibleFrame and FillRectangle draw are always a certain distance apart. I don't quite understand this, but someone else might.
Both Cursor::Position and DrawReversableFrame operate in screen coordinates. That is for the entire screen, everything on your monitor, and not just your window. FillRectangle on the other hand operates on window coordinates, that is the position within your window.
If you take your example where you were drawing with both and the two boxes are always the same distance apart, and move your window on the screen then click again, you will see that the difference between the two boxes changes. It will be the difference between the top left corner of your window and the top left corner of the screen.
This is also why when you check to see what rectangle you clicked isn't hitting anything. You are testing the cursor position in screen coordinates against the rectangle coordinates in window space. It is possible that it would hit one of the rectangles, but it probably won't be the one you actually clicked on.
You have to always know what coordiante systems your variables are in. This is related to the original intention of Hungarian Notation which Joel Spolsky talks about in his entry Making Wrong Code Look Wrong.
Update:
PointToScreen and PointToClient should be used to convert coordinates between screen and window coordinates.