Qt drawing a filled rounded rectangle with border - c++

I want to draw a rectangle with rounded corners (border radius same for all 4 corners) with a specific color filling the entire rectangle, and a separate border color (say border is 1 px wide).
From my observation, Qt provides three methods - fillRect and drawRect and drawRoundedRect. I have tried them, they don't work like I want to. There is no method like fillRoundedRect. Which means that I can draw a rounded rectangle but it won't be filled with the color I want.
How do I do it? And also, I read that due to some aliasing problems, the corners are often rendered as unequal. How do I set it as equal for all four? Will painter.setRenderHint(QPainter::Antialiasing) suffice? Or do I have to do anything else?

You can create a QPainterPath, add the rounded rect to it, and then fill and stroke it:
QPainter p(this);
p.setRenderHint(QPainter::Antialiasing);
QPainterPath path;
path.addRoundedRect(QRectF(10, 10, 100, 50), 10, 10);
QPen pen(Qt::black, 10);
p.setPen(pen);
p.fillPath(path, Qt::red);
p.drawPath(path);
Note that even with antialiasing, 1 px border will probably never really look good, especially on a low DPI desktop monitor, on a high DPI mobile device it will be almost invisible.
If you create the rectangle as QRectF(9.5, 9.5, 100, 50) it will look better with 1 px antialiased border, because it will "snap" on the right pixel:

The answer above (from #dtech) works great, but can sometimes end up with an uneven border around the roundedRect. Using QPainter.strokePath() instead of QPainter.drawPath() can fix this issue.
Here is a python implementation of QPushButton, with paintEvent reimplemented:
# I use PySide6, but whatever library should work.
from PySide6.QtWidgets import QPushButton
from PySide6.QtGui import QPainter, QPainterPath, QBrush, QPen
from PySide6.QtCore import Qt, QRectF
class RoundedButton(QPushButton):
def __init__(self, text, bordersize, outlineColor, fillColor):
super(RoundedButton, self).__init__()
self.bordersize = bordersize
self.outlineColor = outlineColor
self.fillColor = fillColor
self.setText(text)
def paintEvent(self, event):
# Create the painter
painter = QPainter(self)
painter.setRenderHint(QPainter.Antialiasing)
# Create the path
path = QPainterPath()
# Set painter colors to given values.
pen = QPen(self.outlineColor, self.bordersize)
painter.setPen(pen)
brush = QBrush(self.fillColor)
painter.setBrush(brush)
rect = QRectF(event.rect())
# Slighly shrink dimensions to account for bordersize.
rect.adjust(self.bordersize/2, self.bordersize/2, -self.bordersize/2, -self.bordersize/2)
# Add the rect to path.
path.addRoundedRect(rect, 10, 10)
painter.setClipPath(path)
# Fill shape, draw the border and center the text.
painter.fillPath(path, painter.brush())
painter.strokePath(path, painter.pen())
painter.drawText(rect, Qt.AlignCenter, self.text())

Related

How to horizontally center a Gtk.Grid inside a vertical Gtk.Box?

I have a Grid containing some Labels inside Frames to make it look like a table. This grid is inserted in a vertical Box in which direct child Labels are centered correctly (they are packed in the box in the same way as the Grid).
My simplified code is this:
import gi
gi.require_version("Gtk", "3.0")
from gi.repository import Gtk
window = Gtk.Window()
g = Gtk.Grid() # this should be in the horizontal center of the window
g.attach(Gtk.Label("This should be centered but it is not."), 0, 0, 1, 1)
b = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
b.pack_start(g, True, False, 0) # The same behavior with: b.pack_start(g, True, True, 0)
b.pack_start(Gtk.Label("This label is centered as it should be. Try to resize the window."), True, False, 0)
window.add(b)
window.connect("delete-event", Gtk.main_quit)
window.show_all()
Gtk.main()
and this is the GUI it produces:
You must use Alignment and Expand properties/methods to set behaviors of child containers.
With Gtk.Box you defined expand as True and Fill as False for both childs but the first one is a container, Gtk.Grid. When you added the label to the Grid you did not set any expand or fill flags.
Not sure how you want the labels to behave when resizing the window but to have the label which is inside the Gtk.Grid to be centered horizontally then you can set the Gtk.Label horizontal expand as true or set the Gtk.Grid Alignment as Centered.
Example - Setting Gtk.Label horizontal expand as True:
g = Gtk.Grid() # this should be in the horizontal center of the window
l = Gtk.Label("This should be centered but it is not.")
l.set_hexpand(True)
g.attach(l, 0, 0, 1, 1)
However, if you "grow" the window vertically, the labels will separate from each other. I would suggest that you use glade and play with both expand and widget alignment.
Result:

Pygame - Is it possible to create everything in one surface and scale it down to display surface?

I wish to draw a few circles of large radius on the screen using pygame. I would like to define a surface called surface1 larger than my display surface (screen) and plot my circles in the actual dimension. Once I do that I am planning to rescale surface1 and display it on screen. Here is my code:
import pygame
pygame.init()
live = True
while live:
surface1 = pygame.Surface((7680, 4320))
screen = pygame.display.set_mode((1280, 720))
# pygame.display.flip()
surface1.fill((255, 255, 255))
pygame.draw.circle(surface1, (0, 0, 0), (3839, 2160), 4500, 10)
surface1 = pygame.transform.scale(surface1, (1280, 720))
surface1.convert()
screen.blit(surface1, (0, 0))
pygame.display.update()
for event in pygame.event.get():
if event.type == pygame.QUIT:
live = False
For some reason I can't see the circle. However, the color of the displayed window changes according to what I set inside surface1. Why is this behaving that way? Any help would be appreciated. Thanks in advance.
The circle is bigger than the big surface. The pos argument is the center of the circle and the radius is larger than half of both the width and the height. Try to draw something smaller.
Also, manipulating such a huge surface will result in very poor performance.

creating a text wheel QT/PYQT

Hi I'm creating a network diagrame of nodes using networkX's circular layout.
It's been great laying out nodes in a circle however I want to add text to each node(a description) but the text must not overlap, so it remains readable
something like this textwheel. Notice how all the text juts outward from each node.
How can i do the same. I'm using pyqt/qt and I know of the painter.rotate method but I can't have a fixed rotation, what's the best way to workout the correct rotation for each node's description.
I'm drawing the nodes on a Qgraphicsscene, so I can get the boundingRect of the scene, and also get the center of the scene. I can also get the position of each node as output by NetworkX's cirular layout. Having the 2 points is a start. I'm not sure what the best way forward after that is.
If there are several articles that demonstrate a good solution please let me.
One additional wrinkle is that the nodes themselves can be moved by the user. But I imagine that once I've worked out how to draw the text, i can apply the same formula/method in the event that the node itself is moved by the user.
Just need a general way of working out the angle of the center of the node in relation to the center of the graphicssene.
If there are code samples that can point me in the right direction please share.
Thanks
Usually, the rotation of the text is the same as the rotation of the radius used to position the reference point on the text's rectangle.
The code below demonstrates how to use painter transforms to easily achieve the desired result. The text alignment trick is inspired by this answer.
import sys
from PyQt5.QtCore import QRect, QRectF, QSizeF, QPointF, Qt
from PyQt5.QtGui import QPainter, QPicture, QFont, QColor
from PyQt5.QtWidgets import QApplication, QLabel
def drawNode(painter, angle, radius, text):
size = 32767.0;
painter.save();
painter.rotate(-angle);
painter.translate(radius, 0);
painter.drawText(QRectF(0, -size/2.0, size, size), Qt.AlignVCenter, text);
painter.restore();
if __name__ == "__main__":
app = QApplication(sys.argv)
pic = QPicture()
pic.setBoundingRect(QRect(-100, -100, 200, 200))
p = QPainter(pic)
p.drawEllipse(0, 0, 3, 3)
p.setFont(QFont("Helvetica", 25))
for angle in range(0, 359, 30):
drawNode(p, angle, 50, str(angle))
p.end()
l = QLabel()
l.setPicture(pic);
l.show();
sys.exit(app.exec_())

Changing canvas scroll region on Python turtle canvas

Can I change the scrollregion on a Python turtle canvas? I want the drawing to move with it, not just the coordinates to shift. The appearance I'm going for is side-scroller like, where the screen's display region moves to center the turtle onscreen.
I've tried using turtle.setworldcoordinates(llx, lly, urx, ury), but, from the documentation, "This performs a screen.reset()". I've also looked at this SO question , but this involves scroll bars, will not center the turtle easily, and has a limited canvas space. What I'm looking for is something that:
Moves the display region to center the turtle
Also moves the drawing
Has an infinite scroll region
does not display scroll bars
can be called quickly with a function
My best guess would be to be able to have an infinite scrolled canvas somehow, then hide the scroll bars and set them according to turtle position.
Is this possible in Python 2.7? I don't mind if it uses tkinter as well.
EDIT: 6-3-15
I found the canvas.xview and canvas.yview functions, but they don't seem to work once I define screen = turtle.TurtleScreen(canvas), and TurtleScreen has no xview or yview functions. I can't seem to make this work.
Then I found turtle.ScrolledCanvas(). This seems ideal except it has no methods for setting scroll manually from the program. Can I set the scroll manually on a turtle.ScrolledCanvas()???
The position of a canvas can be changed without a reset using canvas.place() method. It will move the turtle and the drawings too, so the turtle needs to be relocated after every move.
The next code moves the canvas with Left and Right arrows and draws a circle with Space, while keeping the turtle in the center. No ScrolledCanvas needed, just a very large standard canvas:
import turtle
import Tkinter as tk
def keypress(event):
global xx, canvas, t, speed
ev = event.keysym
if ev == 'Left':
xx += speed
else:
xx -= speed
canvas.place(x=xx)
t.setposition((-canvas.winfo_width() / 4) - (xx + 250), 0)
return None
def drawCircle(_):
global t
t.pendown()
t.fillcolor(0, 0, 1.0)
t.fill(True)
t.circle(100)
t.fill(False)
t.fillcolor(0, 1, 0)
t.penup()
# Set the main window
window = tk.Tk()
window.geometry('500x500')
window.resizable(False, False)
# Create the canvas. Width is larger than window
canvas = turtle.Canvas(window, width=2000, height=500)
xx = -500
canvas.place(x=xx, y=0)
# Bring the turtle
t = turtle.RawTurtle(canvas)
t.shape('turtle') # nicer look
t.speed(0)
t.penup()
t.setposition((-canvas.winfo_width() / 4) - (xx + 250), 0)
# key binding
window.bind('<KeyPress-Left>', keypress)
window.bind('<KeyPress-Right>', keypress)
window.bind('<KeyPress-space>', drawCircle)
drawCircle(None)
speed = 3 # scrolling speed
window.mainloop()
Having a real infinite scrolling would require to redraw every item in the canvas every time with the required offset, instead of actually moving or scrolling the canvas. Functions like create_image() can give the illusion of movement with static backgrounds, but it resets the drawings.

Creating QGradient

Right now I am just trying to create a circle with a gradient fill:
//I want the center to be at 10, 10 in the circle and the radius to be 50 pixels
QRadialGradient radial(QPointF(10, 10), 50);
radial.setColorAt(0, Qt::black); //I want the center to be black
radial.setColorAt(1, Qt::white); //I want the sides to be white
painter.setBrush(QBrush(radial));
painter.drawEllipse(/*stuff*/);
However, all this accomplishes is to show me a totally white circle. How can I rectify this?
I'll try to help you, but I can't speak english very well.
Damn I also can't post images meanwhile... I'll post them on other site.
Sure it will be white. You are using wrong coordinates. Show me your "/* stuff */" variable list, please.
You see, if you set gradient for your widget (in your case its only a little area) you can paint your ellipse in wrong place and it will be surely white: [see pic]
Set Gradients coordinates correct. e.g:
QRadialGradient radial(QPointF(100, 100), 50);
// ...
painter.drawEllipse(50,50,100,100);
[see pic]
In the line
radial.setColorAt( 0, Qt::black );
change it to the line
radial.setColorAt( n, Qt::black );
n being a number between 0 and 1.