I am trying to use mask on my QWidget. I want to overlay existing widget with row of buttons - similar to Skype
Notice that these buttons don't have jagged edges - they are nicely antialiased and widget below them is still visible.
I tried to accomplish that using Qt Stylesheets but on pixels that should be "masked out" was just black colour - it was round button on black, rectangular background.
Then I tried to do this using QWidget::mask(). I used following code
QImage alpha_mask(QSize(50, 50), QImage::Format_ARGB32);
alpha_mask.fill(Qt::transparent);
QPainter painter(&alpha_mask);
painter.setBrush(Qt::black);
painter.setRenderHint(QPainter::Antialiasing);
painter.drawEllipse(QPoint(25,25), 24, 24);
QPixmap mask = QPixmap::fromImage(alpha_mask);
widget.setMask(mask.mask());
Sadly, it results in following effect
"Edges" are jagged, where they should be smooth. I saved generated mask so I could investigate if it was the problem
it wasn't.
I know that Linux version of Skype does use Qt so it should be possible to reproduce. But how?
One possible approach I see is the following.
Prepare a nice high resolution pixmap with the circular button icon over transparent background.
Paint the pixmap on a square widget.
Then mask the widget leaving just a little bit of margin beyond the border of the circular icon so that the widget mask jaggedness won't touch the smooth border of the icon.
I managed to get a nice circular button with not so much code.
Here is the constructor of my custom button:
Button::Button(Type t, QWidget *parent) : QPushButton(parent) {
setIcon(getIcon(t));
resize(30,30);
setMouseTracking(true);
// here I apply a centered mask and 2 pixels bigger than the button
setMask(QRegion(QRect(-1,-1,32,32),QRegion::Ellipse));
}
and in the style sheet I have the following:
Button {
border-radius: 15px;
background-color: rgb(136, 0, 170);
}
With border-radius I get the visual circle and the mask doesn't corrupt the edges because it is 1 pixel away.
You are using the wrong approach for generating masks. I would generate them from the button images themselves:
QImage image(widget.size(), QImage::Format_Alpha8);
widget.render(&image);
widget.setMask(QBitmap::fromImage(image.createMaskFromColor(qRgba(0, 0, 0, 0))));
Related
When I am using QScatterSeries, I can very easily draw point at (x, y). However, instead of points I would like to draw short lines, like in the figure below. How can I get about doing so?
I tried using RectangleMarker, but it just draws a fat square. I would prefer a thin line about 2px wide and 20px in height.
Is there a way I can add custom marker shapes?
Here are the code and the settings I use to transform my points into lines :
//create scatter series to draw point
m_pSeries1 = new QtCharts::QScatterSeries();
m_pSeries1->setName("trig");
m_pSeries1->setMarkerSize(100.0);
//draw a thin rectangle (50 to 50)
QPainterPath linePath;
linePath.moveTo(50, 0);
linePath.lineTo(50, 100);
linePath.closeSubpath();
//adapt the size of the image with the size of your rectangle
QImage line1(100, 100, QImage::Format_ARGB32);
line1.fill(Qt::transparent);
QPainter painter1(&line1);
painter1.setRenderHint(QPainter::Antialiasing);
painter1.setPen(QColor(0, 0, 0));
painter1.setBrush(painter1.pen().color());
painter1.drawPath(linePath);
//attach your image of rectangle to your series
m_pSeries1->setBrush(line1);
m_pSeries1->setPen(QColor(Qt::transparent));
//then use the classic QtChart pipeline...
You can play the marker size, the dimension of the image and the drawing pattern in the painter to adapt the size and shape of the rectangle to obtain a line.
In the picture, it's the black line. As you can see you can repeat the process for other series.
Keep in mind that you cannot use the openGL acceleration:
m_pSeries0->setUseOpenGL(true);
My work is based on the QtCharts/QScatterSeries example : QScatterSeries example
Hope it will help you.
Florian
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.
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....
I am trying to slide a Panel from the bottom, so that it covers the entire viewport, like the Bookmarks panel in iOS Safari. This is similar to the ActionSheet, but fulscreen, and without the dark frame around it.
this.advSearch = Ext.ComponentMgr.create({xtype: 'advanced_search', itemId: 'pnlAdvancedSearch'});
this.advSearch.autoRender = true;
this.advSearch.show({type: 'slide', direction: 'up'});
This sort of works, but the new panel doesn't fill the whole screen, and parts of it appear behind the background panel. I've tried various layouts, including fit, vbox, with varying degrees of ugliness, but the root problem seems to be that the panel doesn't know how tall it needs to be. Maybe because it doesn't have a container?
Any suggestions? Is this even the right approach, or should I try to hack the ActionSheet to expand to fullscreen, and show without the border?
Thanks.
Because your panel is floating (or I presume it is), you will need to give the panel a fixed height in Sencha Touch 1. You are very restricted in that respect. This following code should work:
var sheet = new Ext.Sheet({
html: 'hello',
style: 'color:#fff',
height: window.innerHeight,
stretchX: true
});
// replace this show with your animation
sheet.show();
As you can see, I give it a fixed height of the window and then stretch it on the X axis (y doesn't work).
How to set transparency of an rectangle/screen.
I have Following code:
// main.cpp
void main(int argc, char*[] argv)
{
QApplication::setGraphicsSystem("raster");
QApplication app(argc, argv);
QDeclerativeView view;
view.setSource(QUrl::fromLocalFile("loaderTest.qml"));
view.setResizeMode(QDeclarativeView::SizeRootObjectToView);
view.showFullScreen();
//QRegion mask(10, 10, 100, 100);
//view.setMask();
view.show();
app.exec();
}
And QML file is:
//loaderTest.qml
Rectangle
{
id: mainRectangle
width: 1000
height: 700
color: "transparent"
//color: "#00000000"
Image
{
id: image1;
width: 348;
height: 155;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.verticalCenter: parent.verticalCenter;
source: "test.png"
}
Loader
{
id: mainLoader
anchors.fill: parent;
source: "";
focus: true;
}
}
I have one loader and one image in this screen and background color is transparent.
When i run this application it should display transparent background with image in the center (as i have not set loader source).
but what i am getting is image in center with white background filled in the screen, I don’t know who is filling in this white background color as i have mentioned transparent color as background.
I am using QT.4.7.0 and Linux.
I have two planes on my target system one is Video plane and another is graphics plane, when i run GUI with transparent background (set transparency at video place) it should display video on Video place in above example it is showing background as white, as it should have displayed video playing on Video plane.
By default the QDeclarativeView paints a background. Maybe that's the problem in your case.
From http://doc.qt.nokia.com/4.7/qdeclarativeperformance.html
You can also prevent QDeclarativeView from painting its window background if you will provide the background of your application using QML, e.g.
QDeclarativeView window;
window.setAttribute(Qt::WA_OpaquePaintEvent);
window.setAttribute(Qt::WA_NoSystemBackground);
window.viewport()->setAttribute(Qt::WA_OpaquePaintEvent);
window.viewport()->setAttribute(Qt::WA_NoSystemBackground);
My first guess is that the background is white and your rectangle is indeed fully transparent.
What type is LoaderScreen, I guess it is some sort of QDecalarativeView, please forgive any technical misses have not coded Qt/QML for almost a year now. As I remember it the default background of the view was white and what kind of transparency are you hoping to achive anyways?
If you only set a background-color on a QPushButton, the background may not appear unless you set the border property to some value. This is because, by default, the QPushButton draws a native border which completely overlaps the background-color.
This might show a black rectangular box around QPushButton. You will face this issue especially on Linux machines. In order to avoid this you can set the border property to none
widget->setStyleSheet("border:none");