用PyQt5绘制多点曲线

Question

How to join multiple points with a flowing curve, using PyQt5? For example, I attempted to do this for 8 points using quadTo(), using the alternate points as control points, but the arcs dont touch the control points (see code and graph below). I also tried using cubicTo(), but that also resulted in a weird curve. use Is there any other function call that I should use, or a custom way to do this?

from PyQt5 import QtGui, QtCore
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *
import sys

class Window(QMainWindow):
    def __init__(self):
        super().__init__()
        self.title = "PyQt5 Drawing Tutorial"
        self.top= 150
        self.left= 150
        self.width = 500
        self.height = 500
        self.InitWindow()
    def InitWindow(self):
        self.setWindowTitle(self.title)
        self.setGeometry(self.top, self.left, self.width, self.height)
        self.show()
    def paintEvent(self, event):
        painter = QPainter(self)
        path = QPainterPath()
        points = [
            QPoint(20,40),
            QPoint(60,10),
            QPoint(100,50),
            QPoint(80,200),
            QPoint(200,300),
            QPoint(150,400),
            QPoint(350,450),
            QPoint(400,350),
            ]

        # draw small red dots on each point
        painter.setPen(QtCore.Qt.red)
        painter.setBrush(QBrush(Qt.red))
        for i in range(len(points)):
            painter.drawEllipse(points[i], 3, 3)

        painter.setPen(QtCore.Qt.blue)
        painter.setBrush(QBrush(Qt.red, Qt.NoBrush)) #reset the brush
        path.moveTo(points[0])

        # connect the points with blue straight lines
        #for i in range(len(points)-1):  # 1 less than length
        #    path.lineTo(points[i+1])

        # connect points with curve
        for i in range(0,len(points),2):
            path.quadTo(points[i], points[i+1])

        painter.drawPath(path)

App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec())

Answer 1

Using functions like quadTo or cubicTo won't work, as they use control points to create bezier curves, and those points are usually not part of the curve.

UPDATE

I realized that my previous answer was not only inaccurate, but also wrong. I'm leaving it at the bottom of this answer, for documentation/historical purposes.

An accurate "spline" interpolation has to use a segment that is tangent to the possible curve; in order to find the segment data you need:

1. The previous and next point
2. Find the angle bisector between the segments that are created with the previous/current point and the current/next point
3. Create two segments that are perpendicular to that angle, start from the current point and has lenghts proportional to each segment
4. Use the extremities of those segments as control points

In the following image you can see all that matters:

• red dots: reference points;
• light gray lines: line segments
• azure lines: angle bisectors
• red lines: reference for target lines (from the current point to the next)
• green lines: reference for source lines (from the previous point to the current)
• orange squares: control points

Note that the first and last curve are only quadratic (not cubic), as there's only one control point: the target line reference for the first point, the source line reference for the last.

The code uses a for loop that cycles from the second to the second-to-last point, and also uses a control point set from the previous cycle.

I suggest you to use a factor =.25 , which should create a path smooth enough. Lower values results in "smaller" curves, while higher values will give you more "rounded" paths.

class Window(QWidget):
    # ...

    def buildPath(self):
        factor = 
        self.path = QtGui.QPainterPath(points[0])
        for p, current in enumerate(points[1:-1], 1):
            # previous segment
            source = QtCore.QLineF(points[p - 1], current)
            # next segment
            target = QtCore.QLineF(current, points[p + 1])
            targetAngle = target.angleTo(source)
            if targetAngle > 180:
                angle = (source.angle() + source.angleTo(target) / 2) % 360
            else:
                angle = (target.angle() + target.angleTo(source) / 2) % 360

            revTarget = QtCore.QLineF.fromPolar(source.length() * factor, angle + 180).translated(current)
            cp2 = revTarget.p2()

            if p == 1:
                self.path.quadTo(cp2, current)
            else:
                # use the control point "cp1" set in the *previous* cycle
                self.path.cubicTo(cp1, cp2, current)

            revSource = QtCore.QLineF.fromPolar(target.length() * factor, angle).translated(current)
            cp1 = revSource.p2()

        # the final curve, that joins to the last point
        self.path.quadTo(cp1, points[-1])

Previous answer

There are some algorithms that allow to build "splines" for interpolation, but you'd need some mathematical skills to understand them and create a good system that creates a smooth curve. In the meantime, a possible (but not perfect) solution is to create control points that are computed from the extension of the existing segments (which is similar to what vector graphics editor do):

The extremities of each extension is used as a control point for the bezier curves: for the first and last segment I'm using a quadratic (one control point), while all the others are cubic (two control points); this results in a acceptable result:

Unfortunately, it is far from perfect, especially for certain combinations of angles and lengths:

I recommend you to build the path only if required (for example, the points change), not in the paintEvent.

class Window(QWidget):
    # ...

    def buildPath(self):
        self.path = QtGui.QPainterPath()
        self.path.moveTo(points[0])
        factor = .1412
        for p in range(len(points) - 2):
            p2 = points[p + 1]
            target = QtCore.QLineF(p2, points[p + 2])
            reverseTarget = QtCore.QLineF.fromPolar(
                target.length() * factor, target.angle() + 180).translated(p2)
            if not p:
                self.path.quadTo(reverseTarget.p2(), p2)
            else:
                p0 = points[p - 1]
                p1 = points[p]
                source = QtCore.QLineF(p0, p1)
                current = QtCore.QLineF(p1, p2)
                targetAngle = target.angleTo(current)
                if 90 < targetAngle < 270:
                    ratio = abs(sin(radians(targetAngle)))
                    reverseTarget.setLength(reverseTarget.length() * ratio)
                reverseSource = QtCore.QLineF.fromPolar(
                    source.length() * factor, source.angle()).translated(p1)
                sourceAngle = current.angleTo(source)
                if 90 < sourceAngle < 270:
                    ratio = abs(sin(radians(sourceAngle)))
                    reverseSource.setLength(reverseSource.length() * ratio)
                self.path.cubicTo(reverseSource.p2(), reverseTarget.p2(), p2)

        final = QtCore.QLineF(points[-3], points[-2])
        reverseFinal = QtCore.QLineF.fromPolar(
            final.length() * factor, final.angle()).translated(final.p2())
        self.path.quadTo(reverseFinal.p2(), points[-1])