Convert a quadratic bezier to a cubic one

Question

将二次贝塞尔曲线（3 个点）转换为三次贝塞尔曲线（4 个点）的算法是什么？

Answer 1

From https://fontforge.org/docs/techref/bezier.html#converting-truetype-to-postscript :

Any quadratic spline can be expressed as a cubic (where the cubic term is zero). The end points of the cubic will be the same as the quadratic's.

CP ₀ = QP ₀
CP ₃ = QP ₂

The two control points for the cubic are:

CP ₁ = QP ₀ + 2/3 *(QP ₁ -QP ₀ )
CP ₂ = QP ₂ + 2/3 *(QP ₁ -QP ₂ )

...There is a slight error introduced due to rounding, but it is unlikely to be noticeable.

Answer 2

Just giving a proof for the accepted answer.

A quadratic Bezier is expressed as:

Q(t) = Q ₀ (1-t)² + 2 Q ₁ (1-t) t + Q ₂ t²

A cubic Bezier is expressed as:

C(t) = C ₀ (1-t)³ + 3 C ₁ (1-t)² t + 3 C ₂ (1-t) t² + C ₃ t³

For those two polynomials to be equals, all their polynomial coefficients must be equal. The polynomial coefficents are obtained by developing the expressions (example: (1-t)² = 1 - 2t + t²), then factorizing all terms in 1, t, t², and t³:

Q(t) = Q ₀ + (-2Q ₀ + 2Q ₁ ) t + (Q ₀ - 2Q ₁ + Q ₂ ) t²

C(t) = C ₀ + (-3C ₀ + 3C ₁ ) t + (3C ₀ - 6C ₁ + 3C ₂ ) t² + (-C ₀ + 3C ₁ -3C ₂ + C ₃ ) t³

Therefore, we get the following 4 equations:

C ₀ = Q ₀

-3C ₀ + 3C ₁ = -2Q ₀ + 2Q ₁

3C ₀ - 6C ₁ + 3C ₂ = Q ₀ - 2Q ₁ + Q ₂

-C ₀ + 3C ₁ -3C ₂ + C ₃ = 0

We can solve for C ₁ by simply substituting C ₀ by Q ₀ in the 2nd row, which gives:

C ₁ = Q ₀ + (2/3) (Q ₁ - Q ₀ )

Then, we can either continue to substitute to solve for C ₂ then C ₃ , or more elegantly notice the symmetry in the original equations under the change of variable t' = 1-t , and conclude:

C ₀ = Q ₀

C ₁ = Q ₀ + (2/3) (Q ₁ - Q ₀ )

C ₂ = Q ₂ + (2/3) (Q ₁ - Q ₂ )

C ₃ = Q ₂

Answer 3

For reference, I implemented addQuadCurve for NSBezierPath (macOS Swift 4) based on Owen's answer above .

extension NSBezierPath {
    public func addQuadCurve(to qp2: CGPoint, controlPoint qp1: CGPoint) {
        let qp0 = self.currentPoint
        self.curve(to: qp2,
            controlPoint1: qp0 + (2.0/3.0)*(qp1 - qp0),
            controlPoint2: qp2 + (2.0/3.0)*(qp1 - qp2))
    }
}

extension CGPoint {
    // Vector math
    public static func +(left: CGPoint, right: CGPoint) -> CGPoint {
        return CGPoint(x: left.x + right.x, y: left.y + right.y)
    }
    public static func -(left: CGPoint, right: CGPoint) -> CGPoint {
        return CGPoint(x: left.x - right.x, y: left.y - right.y)
    }
    public static func *(left: CGFloat, right: CGPoint) -> CGPoint {
        return CGPoint(x: left * right.x, y: left * right.y)
    }
}