(NS)BezierPath Curve Editor?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • (NS)BezierPath Curve Editor?

    Also ich bekomm Kopfschmerzen, wenn ich Bezierkurven im Kopf male um auf die Parameter zu kommen, damit sie so aussehen, wie sie sollen.
    Gibt es da eine geschickte Möglichkeit, die Kurven irgendwie zu zeichnen und dann die Parameter zu bekommen, die man direkt in NSBezierPath stecken kann? Vielleicht gleich auch noch in HTML5 (y-Achse einfach gespiegelt)?
    Ich denke mal, aus Illustrator etc. wird man das nicht so einfach exportieren können. Gibt es da vielleicht schon ein Editor, den ich einfach übersehen habe oder der zu empfehlen ist?
    Wie zeichnet ihr eure Bezierkurven (Kopfschmerz-frei)?
    ♥C++

  • wolf_10de schrieb:

    Wie meinst du das, du kannst doch in ner View einfach Ankerpunkte setzten.

    Wie jetzt?

    Also ich wollte sowas, das hab ich auch noch im Kopf hinbekommen:
    osxentwicklerforum.de/index.ph…79af7a47095334c718b8999f9
    Da ist der Pfad sowas:

    Quellcode

    1. NSBezierPath *cornerPath = [NSBezierPath bezierPath];
    2. [cornerPath moveToPoint:NSMakePoint(rect.origin.x+rect.size.width-CORNER_SIZE, rect.origin.y+rect.size.height)];
    3. [cornerPath curveToPoint:NSMakePoint(rect.origin.x+rect.size.width, rect.origin.y+rect.size.height-CORNER_SIZE)
    4. controlPoint1:NSMakePoint(rect.origin.x+rect.size.width-CORNER_CURVY, rect.origin.y+rect.size.height-CORNER_CURVY)
    5. controlPoint2:NSMakePoint(rect.origin.x+rect.size.width-CORNER_CURVY, rect.origin.y+rect.size.height-CORNER_CURVY)];
    6. [cornerPath lineToPoint:NSMakePoint(rect.origin.x+rect.size.width, rect.origin.y+rect.size.height)];
    7. [cornerPath closePath];


    Wenn es aber komplizierter wird, tut es ganz schön weh. In HTML5 hab ich das hier gebastelt: (paste.ioctl.eu/floyd.html)
    osxentwicklerforum.de/index.ph…79af7a47095334c718b8999f9
    Das Rho ist eine einzige kubische Kurve, und das war wirklich fies, das so hinzubekommen. Code:

    Quellcode

    1. function draw_rho() {
    2. var ctx = this;
    3. ctx.clearRect(0,0,400,600);
    5. ctx.strokeStyle = "rgb(255,0,0)";
    7. var P0 = [100, 600];
    8. var P1 = [800, -500];
    9. var P2 = [-420, 250];
    10. var P3 = [256, 323];
    12. ctx.beginPath();
    13. {
    14. ctx.moveTo(P0[0],P0[1]);
    15. ctx.bezierCurveTo(P1[0], P1[1],
    16. P2[0], P2[1],
    17. P3[0], P3[1]);
    18. }
    19. ctx.stroke();
    20. }
    Alles anzeigen

    Ewig an den Parametern geschoben, bis es so aussah. Das würd ich eben gern vermeiden ;)

    PS: Wie man hier übrigens schön sieht, ist die Syntax in Cocoa genau die gleiche wie in HTML5. Nur dass bei einem Canvas 0,0 oben links und bei NSView, errr, unten links ist ;)
    ♥C++

  • wolf_10de schrieb:

    Ich versteh immer noch nicht dein Problem. Willst du das man die Kruven malen kann oder was?

    Ja. Oder zumindest einfacher die Parameter bestimmen kann.

    Schau Dir etwa das Rho oben an. Erkennst Du da irgend einen Zusammenhang zu den vier Punkten

    Quellcode

    1. var P0 = [100, 600];
    2. var P1 = [800, -500];
    3. var P2 = [-420, 250];
    4. var P3 = [256, 323];

    Ja, P1 ist der Startpunkt und P3 der Endpunkt. das geht. Und da P2 links von P3 aber fast auf gleicher Höhe liegt, sieht man, dass es eine grosse Schleifen geben muss. Aber eigentlich will man das ja nicht unbedingt gleich sehen, oder?

    Darum mein ich ja, sowas wie Illustrator wäre nett, wo man die Pfade einfach zeichnet und dann als Code/Parameter exportieren kann. Am besten irgendwie leicht erkenntlich, damit man später im Code noch Anpassungen vornehmen kann (in dem Abgeundete-Ecke beispiel kann ich ja die Größe und die "Rundheit" noch anpassen).

    Ich hatte gehofft, dass sich da schon mal jemand Gedanken drüber gemacht hat. Grade sowas wie die abgerundete Ecke sollte man doch wirklich als Bezier-Curve umsetzen und nicht irgendwelche Bitmaps oder sonstwas machen, oder?!
    ♥C++

  • Wenn Du wirklich einen dafür geeigneten Editor suchst fällt mir nur Inkscape ein, davon gibt es einen Port für OS X und der exportiert SVG. Die Bedienung ist etwas gruselig und was einige Features angeht ist stabil anders. Aber das was Du willst sollte damit gehen.
    if (!exit(-1)) fprintf(stderr, "exit call failed. Program will continue\n");

  • seb2 schrieb:

    Wenn Du wirklich einen dafür geeigneten Editor suchst fällt mir nur Inkscape ein, davon gibt es einen Port für OS X und der exportiert SVG. Die Bedienung ist etwas gruselig und was einige Features angeht ist stabil anders. Aber das was Du willst sollte damit gehen.

    Naja, da bleib ich lieber beim Illustrator. Oder kann Inkscape genau die Pfade exportieren? Bzw. ist SVG so leicht zu lesen? Mhhh, SVG war auch nur XML, oder? Vielleicht wäre das wirklich eine Option....

    EDIT
    Ok, SVG scheint zu funktionieren. Hab grad mal ein SVG exportiert und der <path> Tagdarin ist genau, was ich will. Nur etwas (sehr) umständlich....
    EDIT2
    Aus EPS/PostScript kann man es sich aus rausziehen. Wenn man das selbst macht, ists aber mit vielen Kopfschmerzen verbunden ;) Mhh, aber ich wollt schon immer mal PostScript lernen.
    ♥C++

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von zerm ()

  • zerm schrieb:

    Ewig an den Parametern geschoben, bis es so aussah. Das würd ich eben gern vermeiden

    Dann schaue Dir mal an wie die Parameter auf den Pfad wirken. Das ist nämlich alles andere als zufällig.

    wiki.osxentwicklerforum.de/doku.php?id=wiki:bezier-pfade

    Wichtig sind:

    Interpolation, Tangentialität und Varianz-Abahme

    und mit ein bischen Grafik de.wikipedia.org/wiki/Bézierkurve

    -- hns

  • hns schrieb:

    zerm schrieb:

    Ewig an den Parametern geschoben, bis es so aussah. Das würd ich eben gern vermeiden

    Dann schaue Dir mal an wie die Parameter auf den Pfad wirken. Das ist nämlich alles andere als zufällig.

    wiki.osxentwicklerforum.de/doku.php?id=wiki:bezier-pfade

    Wichtig sind:

    Interpolation, Tangentialität und Varianz-Abahme

    und mit ein bischen Grafik de.wikipedia.org/wiki/Bézierkurve

    -- hns

    Ich weiss doch, wie Bezierkurven funktionieren. Ich konnte das sogar mal herleiten. Ändert aber nichts daran, dass es schwierig ist, die Parameter gut zu wählen. Oder kannst Du das etwa für das Rho aus dem Stehgreif?

    Edit
    Achso, und beim Rho etwa wollte ich ja, dass das Ende der Kurve auch auf der Kurve liegt. Ich glaube, wenn man den Punkt berechnen will, brauchts schon eine Menge. Geschweige denn, das blind hinzubekommen?!
    ♥C++

  • zerm schrieb:

    Ich weiss doch, wie Bezierkurven funktionieren. Ich konnte das sogar mal herleiten. Ändert aber nichts daran, dass es schwierig ist, die Parameter gut zu wählen. Oder kannst Du das etwa für das Rho aus dem Stehgreif?

    Edit
    Achso, und beim Rho etwa wollte ich ja, dass das Ende der Kurve auch auf der Kurve liegt. Ich glaube, wenn man den Punkt berechnen will, brauchts schon eine Menge. Geschweige denn, das blind hinzubekommen?!

    Aus dem Stegreif ist das nicht so einfach. Aber mit der Tangentenregel ist doch klar dass der erste Kontollpunkt rechts oben liegt (etwas rechts vom Anfangspunkt unten) und der zweite etwa auf halber Höhe weit links vom Endpunkt.

    Den Endpunkt wieder auf die Kurve zu bekommen ist sicher nicht so ganz einfach. Das könnte aber numerisch lösbar sein. Gesucht ist ein t bei ca. 0.3 bei dem x(t) = x(1) und y(t) = y(1) ist. Damit müßte sich die kubische Gleichung auf eine quadratische reduzieren. Das ist aber nur eine grobe Idee...

    -- hns