Timeline: draft Cairo drawing code to implement this shape
...this settles the most tricky part: how to get the curved end caps defined and placed precisely; the solution approach is thereby confirmed.
This commit is contained in:
parent
c2bb45f2dd
commit
b7ea68e285
2 changed files with 237 additions and 2 deletions
|
|
@ -54,6 +54,58 @@ namespace timeline {
|
|||
|
||||
namespace {
|
||||
const uint REQUIRED_WIDTH_px = 30;
|
||||
|
||||
const double ORG = 0.0;
|
||||
const double PHI = (1.0 + sqrt(5)) / 2.0; // Golden Ratio Φ = 1.6180339887498948482
|
||||
const double PHI_MAJOR = PHI - 1.0; // 1/Φ = Φ-1
|
||||
const double PHI_MINOR = 2.0 - PHI; // 1-1/Φ = 2-Φ
|
||||
const double PHISQUARE = 1.0 + PHI; // Φ² = 1+Φ
|
||||
|
||||
const double BAR_LEFT = -PHI_MINOR;
|
||||
|
||||
const double SQUARE_TIP_X = 2.2360679774997880;
|
||||
const double SQUARE_TIP_Y = -PHISQUARE;
|
||||
|
||||
const double ARC_O_XC = -(3.0 + PHI);
|
||||
const double ARC_O_YC = -6.8541019662496847; // +Y points downwards
|
||||
const double ARC_O_R = 8.0574801069408135; // Radius of the arc segment
|
||||
const double ARC_O_TIP = 0.5535743588970450; // Radians ↻ clockwise from +X
|
||||
const double ARC_O_END = 1.0172219678978512;
|
||||
|
||||
const double ARC_I_XC = -2.5;
|
||||
const double ARC_I_YC = -7.3541019662496883;
|
||||
const double ARC_I_R = 6.6978115661011230;
|
||||
const double ARC_I_TIP = 0.7853981633974485;
|
||||
const double ARC_I_END = 1.2490457723982538;
|
||||
|
||||
/**
|
||||
* Draw the curved end cap of the bracket, inspired by musical notation.
|
||||
* @param ox horizontal offset of the anchor point in pixels
|
||||
* @param oy vertical anchor point offset, downwards is positive
|
||||
* @param scale stretch the design; default is bracket line width = 1.0
|
||||
* @param upside whether to draw the upper cup (`true`) or the lower
|
||||
* @remark See `doc/devel/draw/StaveBracket.svg` for explanation
|
||||
*/
|
||||
void
|
||||
drawCap (CairoC cox, double ox, double oy, double scale, bool upside=true)
|
||||
{
|
||||
cox->save();
|
||||
cox->translate (ox,oy);
|
||||
cox->scale (scale,scale); /////////////////TODO: flip unless upside
|
||||
cox->set_source_rgb(0.0, 0.0, 0.8); ///////TICKET #1168 : retrieve colour from stylesheet
|
||||
// draw the inner contour of the bracket cap,
|
||||
// which is the outer arc from left top of the bar to the tip point
|
||||
cox->move_to(BAR_LEFT, ORG);
|
||||
cox->arc_negative(ARC_O_XC,ARC_O_YC,ARC_O_R, ARC_O_END, ARC_O_TIP);
|
||||
// draw the outer contour of the bracket cap,
|
||||
// which is the inner arc from tip point to Φ-minor of the enclosing square
|
||||
cox->arc (ARC_I_XC,ARC_I_YC,ARC_I_R, ARC_I_TIP, ARC_I_END);
|
||||
cox->close_path();
|
||||
//
|
||||
cox->fill();
|
||||
//
|
||||
cox->restore();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -89,6 +141,8 @@ namespace timeline {
|
|||
cox->stroke();
|
||||
/////////////////////////////////////////////TICKET #1018 : placeholder drawing
|
||||
|
||||
drawCap (cox, w/2.0, h/2.0, 5.0); //////////TODO proper scale and placement
|
||||
|
||||
return event_is_handled;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28079,7 +28079,7 @@
|
|||
</node>
|
||||
<node CREATED="1676156477801" ID="ID_772056246" MODIFIED="1676156487723" TEXT="Grundstruktur zeichnen: Klammer">
|
||||
<node CREATED="1676156693199" ID="ID_1410623513" MODIFIED="1676156728537" TEXT="geschwungene Kappen">
|
||||
<node COLOR="#435e98" CREATED="1676156831767" ID="ID_1352090582" MODIFIED="1677284185352" TEXT="Problem: wie konstruieren?">
|
||||
<node COLOR="#435e98" CREATED="1676156831767" FOLDED="true" ID="ID_1352090582" MODIFIED="1677284185352" TEXT="Problem: wie konstruieren?">
|
||||
<icon BUILTIN="help"/>
|
||||
<node CREATED="1676156890344" ID="ID_324278944" MODIFIED="1676156912279" TEXT="Geheimwissen — wie so oft in der Typographie"/>
|
||||
<node CREATED="1676156918897" ID="ID_489719344" LINK="https://en.wikipedia.org/wiki/List_of_musical_symbols" MODIFIED="1676156951217" TEXT="habe nur visuelle Beispiele — z.B. Wikipedia"/>
|
||||
|
|
@ -28632,9 +28632,182 @@
|
|||
<icon BUILTIN="yes"/>
|
||||
</node>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1677285400989" ID="ID_771507385" MODIFIED="1677285419646" TEXT="Koordinaten direkt in den Cairo-Zeichencode übernehmen">
|
||||
<node BACKGROUND_COLOR="#eef0c5" COLOR="#990000" CREATED="1677285400989" ID="ID_771507385" MODIFIED="1677426096361" TEXT="Koordinaten direkt in den Cairo-Zeichencode übernehmen">
|
||||
<icon BUILTIN="pencil"/>
|
||||
<node COLOR="#338800" CREATED="1677417336095" ID="ID_953306031" MODIFIED="1677425935036" TEXT="Einrichtung : Zeichnen gefüllter Formen">
|
||||
<icon BUILTIN="button_ok"/>
|
||||
<node CREATED="1677417369338" ID="ID_711895669" LINK="https://www.cairographics.org/tutorial/" MODIFIED="1677417599360" TEXT="die Cairo Zeichen-Operationen sind modelliert als Druckvorgang">
|
||||
<node CREATED="1677417850939" ID="ID_1653836867" MODIFIED="1677418063370" TEXT="»source« : eine Farbe, ein Füllmuster, ein Bitmap oder eine bestehende Cairo-»surface«">
|
||||
<richcontent TYPE="NOTE"><html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
der Druck-Metapher gemäß ist das die „Farbwalze“ oder das „Stempelkissen“
|
||||
</p>
|
||||
</body>
|
||||
</html></richcontent>
|
||||
</node>
|
||||
<node CREATED="1677417926098" ID="ID_142794869" MODIFIED="1677418000689" TEXT="»surface« : die Zeichenfläche, auf der Cairo arbeitet.">
|
||||
<richcontent TYPE="NOTE"><html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>
|
||||
Kann angezeigt werden
|
||||
</li>
|
||||
<li>
|
||||
Kann in ein Bitmap gerendered werden
|
||||
</li>
|
||||
<li>
|
||||
Kann als »source« für weitere Zeichenvorgänge dienen
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html></richcontent>
|
||||
</node>
|
||||
<node CREATED="1677418174529" ID="ID_546569349" MODIFIED="1677418227017" TEXT="»path« : die aktive Kontur, welche die Maske definiert">
|
||||
<richcontent TYPE="NOTE"><html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
wird mit jeder stroke() oder fill()-Operation geleert. Ist Teil des Context, und weitere Zeichen-Operationen fügen zu dem Pfad hinzu
|
||||
</p>
|
||||
</body>
|
||||
</html></richcontent>
|
||||
</node>
|
||||
<node CREATED="1677417629676" ID="ID_1746207798" MODIFIED="1677417638096" TEXT="stroke() : Kontur zeichnen"/>
|
||||
<node CREATED="1677417639087" ID="ID_1449245923" MODIFIED="1677417654897" TEXT="fill() : Masken-Inneres füllen">
|
||||
<node CREATED="1677419615244" ID="ID_1306302451" MODIFIED="1677419618972" TEXT="Fill-Rule">
|
||||
<node CREATED="1677420366268" ID="ID_1749745867" LINK="https://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-fill-rule" MODIFIED="1677420398715" TEXT="cairo_set_fill_rule"/>
|
||||
<node CREATED="1677420412998" ID="ID_1655853556" LINK="https://www.cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" MODIFIED="1677420423252" TEXT="cairo_fill_rule_t">
|
||||
<node CREATED="1677420567785" ID="ID_1786405165" MODIFIED="1677420597785" TEXT="WINDING : Drehsinn der Begrenzung zählt"/>
|
||||
<node CREATED="1677420598805" ID="ID_709687384" MODIFIED="1677420627615" TEXT="EVENODD: Begrenzungen nach Außen werden gezählt"/>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
<node CREATED="1677417818031" ID="ID_469249374" MODIFIED="1677417837746" TEXT="paint() : überträgt Quelle ohne Maske auf die Zeichenfläche"/>
|
||||
</node>
|
||||
<node CREATED="1677417491547" ID="ID_832294440" MODIFIED="1677417510732" TEXT="ein geschlossener Path erzeugt eine Maske, die gefüllt wird">
|
||||
<icon BUILTIN="idea"/>
|
||||
<node CREATED="1677419117535" ID="ID_1895718071" MODIFIED="1677419158897" TEXT="close_path() : schließt den Pfad durch eine Linie zum Startpunkt zurück"/>
|
||||
<node CREATED="1677419358419" ID="ID_414920706" LINK="https://www.cairographics.org/manual/cairo-Transformations.html#cairo-translate" MODIFIED="1677419375859" TEXT="Koordinaten-Transformation">
|
||||
<node CREATED="1677419162869" ID="ID_305831750" MODIFIED="1677419232544" TEXT="translate(dx,dy)) : verschiebt den Ursprung der »user space coordinates« um (dx,dy)"/>
|
||||
<node CREATED="1677419197776" ID="ID_1423561245" MODIFIED="1677419226680" TEXT="scale(sx,xy) : skaliert die aktuellen Achen der »user space coordinates«"/>
|
||||
<node CREATED="1677419275529" ID="ID_572343688" MODIFIED="1677419324939" TEXT="rotate(rad) : dreht die Achsen der »user space coordinates« um rad Radians"/>
|
||||
</node>
|
||||
<node CREATED="1677419509304" ID="ID_1727557351" MODIFIED="1677419543819" TEXT="Transformationen können jederzeit gesetzt werden; auch zwischen Zeichnen und stroke()">
|
||||
<icon BUILTIN="idea"/>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
<node COLOR="#338800" CREATED="1677426171012" ID="ID_183450251" MODIFIED="1677426297532" TEXT="Benennung">
|
||||
<icon BUILTIN="yes"/>
|
||||
<node COLOR="#435e98" CREATED="1677426176707" ID="ID_1699845140" MODIFIED="1677426300779" TEXT="bleibe bei »Außenbogen« und »Innenbogen«">
|
||||
<richcontent TYPE="NOTE"><html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
weil ich diese Benennungen von Anfang an auch so in FreeCAD verwendet habe, und jetzt nicht alles umbenennen möchte
|
||||
</p>
|
||||
</body>
|
||||
</html></richcontent>
|
||||
</node>
|
||||
<node COLOR="#435e98" CREATED="1677426194737" ID="ID_465793703" MODIFIED="1677426300779" TEXT="mache aber die umgekehrte Ordnung im Kommentar klar">
|
||||
<richcontent TYPE="NOTE"><html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
...das ist nämlich potentiell verwirrend: der <i>Außenbogen</i>  bildet die <i>Innenkontur<b> </b></i>der Klammer, weil der Schwung von der Klammer weg nach oben bzw. unten geht
|
||||
</p>
|
||||
</body>
|
||||
</html></richcontent>
|
||||
</node>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eef0c5" COLOR="#990000" CREATED="1677425937349" ID="ID_368774299" MODIFIED="1677425952273" TEXT="Koordinaten als Konstanten übernehmen">
|
||||
<icon BUILTIN="pencil"/>
|
||||
<node COLOR="#338800" CREATED="1677426110196" ID="ID_843421619" MODIFIED="1677426129464" TEXT="Erkennbare Basiseinheiten durch Φ ausdrücken">
|
||||
<icon BUILTIN="button_ok"/>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eef0c5" COLOR="#990000" CREATED="1677426131233" ID="ID_231769096" MODIFIED="1677426872580" TEXT="BAR">
|
||||
<linktarget COLOR="#a9b4c1" DESTINATION="ID_231769096" ENDARROW="Default" ENDINCLINATION="-186;54;" ID="Arrow_ID_1647326271" SOURCE="ID_270081654" STARTARROW="None" STARTINCLINATION="120;19;"/>
|
||||
<icon BUILTIN="pencil"/>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1677426131233" ID="ID_1111801677" MODIFIED="1677426892883" TEXT="LINE">
|
||||
<linktarget COLOR="#a9b4c1" DESTINATION="ID_1111801677" ENDARROW="Default" ENDINCLINATION="-186;54;" ID="Arrow_ID_1520723305" SOURCE="ID_1333503744" STARTARROW="None" STARTINCLINATION="71;13;"/>
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1677426140000" ID="ID_916071681" MODIFIED="1677426143648" TEXT="SQUARE">
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
</node>
|
||||
<node COLOR="#338800" CREATED="1677426145410" ID="ID_1241973163" MODIFIED="1677426155118" TEXT="ARC_I">
|
||||
<icon BUILTIN="button_ok"/>
|
||||
</node>
|
||||
<node COLOR="#338800" CREATED="1677426150023" ID="ID_1243678552" MODIFIED="1677426155119" TEXT="ARC_O">
|
||||
<icon BUILTIN="button_ok"/>
|
||||
</node>
|
||||
</node>
|
||||
<node COLOR="#338800" CREATED="1677425955233" ID="ID_898214588" MODIFIED="1677425968693" TEXT="Funktion zum Zeichnen der Kappe(n)">
|
||||
<icon BUILTIN="button_ok"/>
|
||||
<node COLOR="#338800" CREATED="1677425981509" ID="ID_63989852" MODIFIED="1677426000480" TEXT="wendet low-Level-Skalierung an">
|
||||
<icon BUILTIN="button_ok"/>
|
||||
</node>
|
||||
<node COLOR="#338800" CREATED="1677426001458" ID="ID_1476057716" MODIFIED="1677426010466" TEXT="implementiert Bogensegmente">
|
||||
<icon BUILTIN="button_ok"/>
|
||||
<node CREATED="1677426011889" ID="ID_106770327" MODIFIED="1677426024465" TEXT="Cairo bietet beide Drehrichtungen an">
|
||||
<icon BUILTIN="idea"/>
|
||||
</node>
|
||||
<node CREATED="1677426025872" ID="ID_217470533" MODIFIED="1677426037264" TEXT="aber wir müssen einen geschlossenen Pfad zeichnen">
|
||||
<icon BUILTIN="messagebox_warning"/>
|
||||
</node>
|
||||
<node COLOR="#435e98" CREATED="1677426040749" ID="ID_1140979110" MODIFIED="1677426066194" TEXT="zeichne erst den äußeren Bogen, dann den inneren Bogen zurück">
|
||||
<icon BUILTIN="yes"/>
|
||||
</node>
|
||||
</node>
|
||||
<node COLOR="#338800" CREATED="1677426076977" ID="ID_22251519" MODIFIED="1677426088890" TEXT="visueller Test : Ergebnis plausibel">
|
||||
<icon BUILTIN="button_ok"/>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1677426582635" ID="ID_78847857" MODIFIED="1677426587874" TEXT="Balken zeichnen">
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1677426794738" ID="ID_270081654" MODIFIED="1677426873746" TEXT="dicker Balken">
|
||||
<arrowlink DESTINATION="ID_231769096" ENDARROW="Default" ENDINCLINATION="-186;54;" ID="Arrow_ID_1647326271" STARTARROW="None" STARTINCLINATION="120;19;"/>
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1677426794738" ID="ID_1333503744" MODIFIED="1677426884359" TEXT="dünne Linie">
|
||||
<arrowlink DESTINATION="ID_1111801677" ENDARROW="Default" ENDINCLINATION="-186;54;" ID="Arrow_ID_1520723305" STARTARROW="None" STARTINCLINATION="71;13;"/>
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1677426603105" ID="ID_243044944" MODIFIED="1677426609439" TEXT="Gesamtanordnung steuern">
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1677426726852" ID="ID_1196135559" MODIFIED="1677426735981" TEXT="Klammer sinnvoll positionieren">
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1677426763414" ID="ID_591151065" MODIFIED="1677426776590" TEXT="Balken-Länge">
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1677426770828" ID="ID_515832295" MODIFIED="1677426776600" TEXT="Ober/Unterkappe">
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
</node>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1677426740361" ID="ID_1498455508" MODIFIED="1677426748306" TEXT="Ankerpunkt für Sub-Scopes">
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#d2beaf" COLOR="#5c4d6e" CREATED="1677426668947" ID="ID_1313952369" MODIFIED="1677426704721" TEXT="Farbe setzen">
|
||||
<linktarget COLOR="#603482" DESTINATION="ID_1313952369" ENDARROW="Default" ENDINCLINATION="-273;44;" ID="Arrow_ID_1766960947" SOURCE="ID_1533322932" STARTARROW="None" STARTINCLINATION="102;9;"/>
|
||||
<icon BUILTIN="hourglass"/>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
|
|
@ -28705,6 +28878,14 @@
|
|||
</node>
|
||||
</node>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#d2beaf" COLOR="#5c4d6e" CREATED="1677426647111" ID="ID_1384220998" MODIFIED="1677426654411" TEXT="Ergänzungen">
|
||||
<icon BUILTIN="hourglass"/>
|
||||
<node BACKGROUND_COLOR="#e0ceaa" COLOR="#690f14" CREATED="1677426657149" ID="ID_1533322932" MODIFIED="1677426718528" TEXT="Farbe der Klammer aus CSS">
|
||||
<arrowlink COLOR="#603482" DESTINATION="ID_1313952369" ENDARROW="Default" ENDINCLINATION="-273;44;" ID="Arrow_ID_1766960947" STARTARROW="None" STARTINCLINATION="102;9;"/>
|
||||
<icon BUILTIN="bell"/>
|
||||
<icon BUILTIN="hourglass"/>
|
||||
</node>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1563469735149" ID="ID_704791408" MODIFIED="1563469741153" TEXT="Selection-State zeigen">
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
</node>
|
||||
|
|
|
|||
Loading…
Reference in a new issue