Ich erstelle meinen eigenen Checkbox-Stil. Ich habe den Code im Internet gefunden, den ich mag, und ich bin nicht so zuversichtlich in der WPF-Zeichnung. Ich muss diese Ecken rund machen. Wie macht man diese Ecken weich?Abgerundete Ecken für Pfad
<Path Name="InnerPath"
Data="M31,5 L19.5,5 19.5,19.5 34.5,19.5 34.5,11.75"
Stretch="Fill"
Stroke="#808080" />
der Pfad Markups können zunächst ziemlich verwirrend erscheinen. Die wichtigsten Markups, die Sie bezüglich Ihrer Frage berücksichtigen müssen, sind M, Q, L und Z.
M ist der Ausgangspunkt für einen neuen Pfad. Da Ihr Bild 2 Elemente (Pfade) enthält, verwenden Sie 2 M Markups - eins für das Häkchen, das andere für die Box.
Q bezeichnet eine Quadratische Bezier-Kurve. Es benötigt zwei Punkte. Der erste bestimmt, wohin die Linie gezogen werden soll und der zweite ist der Endpunkt. Es ist wichtig zu beachten, dass der vorherige Sollwert den Beginn der Kurve markiert.
L ist für eine gerade Linie. Dies ist nach der Bezier-Kurve kritisch, andernfalls wird ein Fehler ausgegeben. Offensichtlich sieht der Parser das Q, behandelt die ersten beiden Zahlen und sieht dann ein drittes, das nicht an ein Markup und BOOM gebunden ist. In deinem Fall wird das L verwendet, da wir eine Linie bilden. Wir könnten jedoch ein anderes Q verwenden, um eine Wellenlinie zu bilden.
Z schließt einen Pfad und verbindet ihn mit dem Startpunkt.
bei Ihrem ursprünglichen Bild suchen, ist das nur Markups benötigt sind M und Z. Ihre Pfaddaten Eigenschaftswert wäre:
M 263,99 263.115 87.115 87.340 311.340 311.221 327.221 327.355 73.355 73,99 Z M 186.323 105.238 143.195 186,240,351,68 391.112 Z
Hoffentlich dieses Bild hilft, die oben genannten Zahlen zu erklären: Outline Image
die einzige Ergänzung wäre eine FILL-Eigenschaft auf den Pfad hinzuzufügen und den gleichen Wert zu verwenden, wie Ihr Strich (# 808080). Dies gibt Ihnen das gleiche Bild wie Ihr Original. Seien Sie nicht besorgt, dass dies große Zahlen sind. Als vektorbasierte Grafiken werden sie auf ihren Container skaliert!
(Für diejenigen, neugierig darüber, wie ich mit diesen Zahlen kam, nahm ich das obige Bild in Photoshop, erweiterte die Leinwand zu machen ist quadratisch, dann einfach notierte jede Punkte X, Y in Photoshop und diese Zahlen verwendet.)
In Bezug auf die Kurven ...
Dies ist, wo die Q Markup kommt sowie die L. Hoffentlich helfen die folgenden Abbildungen. Hier haben wir einen einfachen 90-Grad-Winkel:
Um eine Kurve in diese zu werfen, müssen wir die Q-Markup verwenden. Wenn Sie eine perfekte Kurve erstellen möchten, würden Sie den Punkt verwenden, an dem sich die 2 Linien schneiden würden. Da dies ein 90-Grad-Winkel ist, ist das ziemlich einfach herauszufinden. Das ist der Punkt, an den die Kurve gezogen wird. In unserem obigen Beispiel wäre dies Punkt 0,0. Als nächstes müssen wir wissen, wo die Kurve beginnen und enden soll. Je weiter vom Ankerpunkt entfernt, desto größer ist die Kurve.In der folgenden Darstellung verwendet I 50:
Im Klartext M 100,0 50,0 0,0 0,50 L Q 0.100 übersetzt: am Punkt Staring 100,0, bis Punkt ziehen 50,0, von dort beginnt eine Kurve bis zum Punkt 0,0 und endet am Punkt 0,50. Zeichnen Sie jetzt eine Linie bis 0,100.
Hoffentlich erklärt dies, wie man Kurven in einem Pfad macht. Es ist eigentlich ziemlich einfach, wenn Sie den Dreh raus haben. Mit etwas Kreativität kann man viel mit Pfaden machen.
Mit dem oben im Auge, das Markup Ich denke Sie suchen ist (NICHT zu VERGESSEN DIE FILL PROPERTY ADD!):
Data = "M 263,99 263.115 113.115 Q 87.115 87.139 L 87.315 87.340 113.340 Q L 287.340 311.340 311.315 Q L 311.221 327.221 327.315 327.355 287.355 Q L 113.355 73.355 Q 73.315 73.139 L Q 73,99 113,99
ZM 186.323 105.238 143.195 186,240,351,68 391.112 Z“
Das obige Markup gibt Ihnen: CurvedCheckBox
Hier ist ein Link auf die Markup-Befehle: MarkupCommands
Hier sind einige Beispiele zur Herstellung von Formen: MakingShapes
ein Rechteck statt einen Pfad oder eine RectangleGeometry für die Daten des Pfad. – Clemens
Außerdem ist das Festlegen von "Stretch to Fill" mit diesen Koordinaten seltsam. – Clemens
Die Pfaddaten sind das einzige, was das kann. es sieht nicht so aus, wie Sie es wollen, weil die Daten es nicht anweisen. – Logan