Animation der Bezier-Kurve, als würde die Zeichnung auf dem iPhone-Bildschirm fortgesetzt

7

Ich möchte einen bezier Pfad der Umrisse von Taj Mahals Grab zeichnen.

Q1. Wie könnte ich es in XCode zeichnen? Ich könnte das leicht in PS machen, aber ich finde es schwierig, in XCode programmatisch vorzugehen, insbesondere die Koordinaten der Kontrollpunkte zu bekommen.

Q2. Außerdem, wie können die Koordinaten der Punkte festgelegt werden, wenn die Bildschirmgrößen variieren?

Q3. Wie könnte ich es animieren, als ob ein unsichtbarer Bleistift das auf dem Bildschirm zeichnet?

    
Viki 12.02.2016, 12:49
quelle

3 Antworten

19

Wie zeichne ich einen Bezier-Pfad in UIKit ?

Erstellen Sie ein UIBezierPath -Objekt und verwenden Sie dann die verschiedene Methoden, um den Pfad zu erstellen .

Ich vermute, die Methoden, an denen Sie am meisten interessiert sind, sind:

So wird beispielsweise ein einfacher Bezier-Pfad mit einer quadratischen Kurve erstellt:

%Vor%

Wenn Sie es jedoch gewohnt sind, etwas wie Photoshop zum Erstellen Ihrer Pfade zu verwenden, könnte Sie sich für PaintCode interessieren , das kann lassen Sie Bezier-Pfade mit einem "Was Sie sehen ist, was Sie bekommen" -Ansatz erstellen.

Sie können dieses UIBezierPath zur Eigenschaft path eines CAShapeLayer hinzufügen, um es auf dem Bildschirm anzuzeigen.

%Vor%

Sie können dann die Eigenschaften strokeColor und lineWidth auf der Shape-Ebene ganz einfach festlegen, um anzupassen, wie der Pfad verschoben wird.

%Vor%

Sie sollten mit so etwas enden:

Wie könnte ich es animieren, als würde ein unsichtbarer Stift das auf dem Bildschirm zeichnen?

Sie können ganz einfach eine CABasicAnimation erstellen, die die strokeStart oder strokeEnd Eigenschaft von CAShapeLayer animieren kann, um die gewünschte Animation zu erreichen.

Dies kann dazu führen, dass die Linie auf dem Bildschirm "gezeichnet" wird.

Dieser Code führt beispielsweise dazu, dass die strokeEnd -Eigenschaft von 0.0 auf 1.0 animiert wird, wodurch Ihr gewünschter Effekt entsteht:

%Vor%

Wie kann ich diesen Pfad skalieren, um mit Bildschirmen unterschiedlicher Größe zu arbeiten?

Normalerweise möchte ich dieses Problem lösen, indem ich die Punkte des Pfads in einem bestimmten festen Rahmen definiere (sagen wir 500 x 500 Punkte) und dann einen Skalierungsfaktor auf Basis von erzeuge die Größe des Bildschirms (in Ihrem Fall möchten Sie auf die Breite des Bildschirms skalieren).

Also müssen wir nur unseren Skalierungsfaktor erzeugen.

%Vor%

Dann müssen wir einfach alle unsere Punkte in UIBezierPath um diesen Skalierungsfaktor multiplizieren. Nehmen wir beispielsweise unseren vorherigen Pfad:

%Vor%

Jetzt müssen wir nur noch in unseren Bezier-Pfadpunkten programmieren als ob wir es immer in einem 500 x 500 Frame gezeichnet hätten (meine Punkte passen schon gut dazu).

Sie möchten auch die Größe von CAShapeLayer so ändern, dass sie quadratisch ist und die gesamte Breite des Bildschirms einnimmt.

%Vor%

Schließlich möchten Sie CAShapeLayer in der Mitte des Bildschirms positionieren. Sie können dies problemlos durchführen, indem Sie die Eigenschaft position des Layers auf center der Ansicht setzen.

%Vor%

Jetzt sollte der Pfad immer so skaliert werden, dass er die Breite des Bildschirms einnimmt.

(Ich habe der Ebene einen grauen Hintergrund hinzugefügt, um die Skalierung zu verdeutlichen)

Volles Projekt (für Ihre Bequemlichkeit): Ссылка

    
Hamish 12.02.2016, 13:07
quelle
2

Ich habe 2010 darüber gebloggt: Animieren der Zeichnung eines CGPath mit CAShapeLayer .

Das Wesentliche davon ist das:

  • Erstellen Sie eine UIBezierPath oder CGPath mit der Form, die Sie zeichnen möchten. Verwenden Sie die Methoden moveToPoint: , addLineToPoint: , addCurveToPoint:controlPoint1:controlPoint2: usw., um die Form zu erstellen.
  • Erstellen Sie ein CGShapeLayer und weisen Sie den Pfad der Eigenschaft path des Layers zu.
  • Fügen Sie die Ebene zu Ihrer Ansicht / Layer-Hierarchie hinzu (z. B. in einem View-Controller: [self.view.layer addSublayer:shapeLayer]; ). Außerdem müssen Sie dem Layer eine gültige Größe und Position zuweisen ( frame ).
  • Die Eigenschaft strokeEnd des Layers von 0 auf 1 animieren.
Ole Begemann 12.02.2016 13:05
quelle
1

Die Antwort von originaluser2 löst alles. Sie können dies auch versuchen, wenn Sie die Größe des Bezier-Pfads für verschiedene Geräte-Bildschirme ändern möchten:

Sie können die UIView einfach ableiten und ihre drawRect-Methode anpassen:

%Vor%

Rahmen 50x50:

Rahmen 100x100:

Rahmen 100x50

Dies zeichnet eine Bezier-Kurve in einem Rahmen der Größe 50x50, wenn Sie Rahmen der Größe 50x50 senden. Auch dieser Code wird automatisch auf der Grundlage der Rahmengröße skaliert, die er erhält.

    
Teja Nandamuri 12.02.2016 14:09
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset check null, leer oder undefined angularjs