Zum Inhalt springen
🛠️ToolsShed

Bézier Curve Calculator

Interaktiver kubischer Bézier-Kurven-Rechner mit verschiebbaren Kontrollpunkten und Kurvenlänge.

Punkt bei t: (200.0, 200.0)  |  Kurvenlänge: ~0px

P0

x
y

P1

x
y

P2

x
y

P3

x
y

Parametrische Gleichung

B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3

Ziehen Sie die Kontrollpunkte auf dem Canvas, um die Kurvenform anzupassen

Über dieses Tool

Ein Bézier-Kurven-Rechner ist ein interaktives Werkzeug zur Visualisierung und Manipulation von kubischen Bézier-Kurven, die in Grafikdesign, Animation, Webentwicklung und Ingenieurwesen weit verbreitet sind. Durch Positionierung von vier Kontrollpunkten auf einer Leinwand können Sie glatte Kurven formen, die die Grundlage von Logos, UI-Animationen, Schriftkonturieungen und komplexen Pfaden in computergestütztem Design bilden. Das Verständnis dafür, wie Kontrollpunkte die Kurvenform beeinflussen, ist für jeden, der mit Vektorgrafiken oder Motion-Design arbeitet, unerlässlich.

Um das Werkzeug zu verwenden, ziehen Sie die beiden Kontrollpunkte (P1 und P2) in der Mitte der Leinwand, während die Endpunkte (P0 und P3) den Anfang und das Ende der Kurve verankern. Wenn Sie die Kontrollpunkte verschieben, wird die Kurve in Echtzeit aktualisiert, und das Werkzeug zeigt die Kurvenlänge an, was Ihnen hilft, Abstände für Animations-Timing oder Pfadplanung zu schätzen. Sie können auch numerische Koordinaten direkt eingeben, wenn Sie eine präzise Kontrolle benötigen, was es sowohl für visuelles Design als auch für technische Berechnungen nützlich macht.

Dieses Werkzeug ist von unschätzbarem Wert für Grafikdesigner, die Easing-Funktionen für Animationen verfeinern, Entwickler, die SVG-Pfade oder CSS-Animations-Timing implementieren, und Ingenieure, die glatte Übergänge in Simulationen modellieren. Die Echtzeit-Längentberechnung ist besonders hilfreich bei der Planung von Strich-Animationen oder beim Schätzen der Reisestrecke in Motion-Grafiken. Obwohl auf kubische Bézier-Kurven beschränkt (nicht quadratisch oder höherer Ordnung), deckt dies die große Mehrheit der Design- und Animationsanwendungsfälle ab.

Häufig gestellte Fragen

Code-Implementierung

def cubic_bezier(p0, p1, p2, p3, t):
    """Evaluate a cubic Bézier curve at parameter t (0..1)."""
    u = 1 - t
    return (
        u**3 * p0[0] + 3*u**2*t * p1[0] + 3*u*t**2 * p2[0] + t**3 * p3[0],
        u**3 * p0[1] + 3*u**2*t * p1[1] + 3*u*t**2 * p2[1] + t**3 * p3[1],
    )

def bezier_length(p0, p1, p2, p3, steps=200):
    """Approximate curve length via numerical integration."""
    length = 0.0
    prev = cubic_bezier(p0, p1, p2, p3, 0)
    for i in range(1, steps + 1):
        curr = cubic_bezier(p0, p1, p2, p3, i / steps)
        dx, dy = curr[0] - prev[0], curr[1] - prev[1]
        length += (dx**2 + dy**2) ** 0.5
        prev = curr
    return length

def bezier_tangent(p0, p1, p2, p3, t):
    """Calculate the tangent direction at parameter t."""
    u = 1 - t
    dx = 3*u**2*(p1[0]-p0[0]) + 6*u*t*(p2[0]-p1[0]) + 3*t**2*(p3[0]-p2[0])
    dy = 3*u**2*(p1[1]-p0[1]) + 6*u*t*(p2[1]-p1[1]) + 3*t**2*(p3[1]-p2[1])
    return (dx, dy)

# Example: S-curve
p0, p1, p2, p3 = (0, 0), (0.5, 1), (0.5, -1), (1, 0)
length = bezier_length(p0, p1, p2, p3)
print(f"Curve length: {length:.4f}")
print(f"Point at t=0.5: {cubic_bezier(p0, p1, p2, p3, 0.5)}")

# Sample 10 points
for i in range(11):
    t = i / 10
    pt = cubic_bezier(p0, p1, p2, p3, t)
    print(f"t={t:.1f}: ({pt[0]:.3f}, {pt[1]:.3f})")

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.