Zeichne einen Bogen mit Kerngrafiken
Ich versuche, einen benutzerdefinierten Schieberegler zu implementieren, wie in der Abbildung unten gezeigt.
Was ich bisher gemacht habe, sieht ungefähr so aus
Bitte helfen Sie mir, den Bogen mit diesem Effekt zu zeichnen. Mein Code ist wie unten, was ich mache ist Zeichnen des Bogens mit CGContextAddArc mit Linienbreite kLineWidth.
%Vor%2 Antworten
Wenn Sie die Form nicht dynamisch ändern, ist es wahrscheinlich besser, das Bild nur in einem Bildbearbeitungsprogramm zu erstellen. Ich weiß, dass es einfach ist, diesen Effekt in Photoshop, Illustrator oder Fireworks zu erstellen.
Das Zeichnen eines solchen inneren Schattens mit Core Graphics erfordert jedoch mehrere Schritte:
- Clip an die Form (z. B.
CGContextClipoderCGContextClipToMask). - Erstellen Sie einen Pfad oder eine Maske für alles , aber für die Form.
- Legen Sie Ihre Schattenparameter fest (mit
CGContextSetShadowWithColor). - Füllen Sie den Pfad oder die Maske von Schritt 2 aus. Dadurch wird ein Schatten in die Form und nur der Schatten gezeichnet, weil Sie an der Form in Schritt 1 abgeschnitten haben.
Wenn Sie das alles richtig machen, können Sie ein schönes Ergebnis wie folgt erhalten:
Hier ist der Code, den ich geschrieben habe, um das zu zeichnen. Ich habe es in drawRect: einer benutzerdefinierten Ansichts-Unterklasse geschrieben, aber Sie können diesen Code problemlos verwenden, um in einen beliebigen Grafikkontext zu zeichnen.
Zuerst erstelle ich einen Pfad, der nur ein Bogen ist:
%Vor% Als nächstes frage ich Core Graphics, einen neuen Pfad zu erstellen, der den Umriss des arc Pfads darstellt. Beachten Sie, wie ich es für eine Strichbreite von kArcThickness und runde Linienobergrenzen ersuche:
Ich brauche auch die Umkehrung dieses Pfades: einen Pfad, der jeden Punkt außer die Punkte in shape enthält. Es passiert so (obwohl ich nicht denke, dass es dokumentiert ist), dass CGContextCreateCopyByStrokingPath und CGPathAddRect in entgegengesetzte Richtungen ziehen. Also, wenn ich shape kopiere und ein riesiges Rechteck um ihn herum zeichne, bedeutet die Nicht-Null-Wicklungsregel, dass der neue Pfad die Umkehrung von shape ist:
Jetzt kann ich wirklich anfangen zu zeichnen. Zuerst fülle ich die Form mit einer hellgrauen Farbe:
%Vor%Als nächstes führe ich die vier Schritte aus, die ich oben aufgeführt habe. Ich muss den Grafikzustand speichern, damit ich die Ausschnitt- und Schattenparameter rückgängig machen kann, wenn ich fertig bin.
%Vor%Schritt 1: Clip an die Form:
%Vor% Schritt 2: Nun, ich habe diesen Schritt bereits gemacht, als ich shapeInverse erstellt habe.
Schritt 3: Ich setze die Schattenparameter:
%Vor%Schritt 4: Ich fülle die inverse Form aus Schritt 2:
%Vor%Jetzt stelle ich den Grafikzustand wieder her, der den Beschneidungspfad speziell wiederherstellt und die Schattenparameter aufhebt.
%Vor% Schließlich streiche ich shape mit einem hellen Grau, um die Kante schärfer zu machen:
Natürlich räume ich auf, wenn ich fertig bin:
%Vor%Für komplexere Formen können Sie sich ansehen meine Antwort hier und meine Antwort hier .
Hier ist der gesamte Code zum einfachen Kopieren:
%Vor%
Tags und Links iphone ios core-graphics