Code de dessin dans Swift, PaintCode

Pendant que l'olivier est en cours de cuisson dans la pièce voisine, j'écris un petit tutoriel sur la façon de dessiner avec du code. Lignes de code immédiatement présentées avec des nombres fractionnaires, où nous dessinons une ligne le long des points. Et pour calculer le rayon du cercle, nous prenons du venin de serpent, la fiabilité du stockage de photos dans iCloud et murmurons un sort. Effrayant, je comprends. Même dans la vidéo sur YouTube, j'ai inséré une blague:

- " Aaastanovite, s'il vous plaît, ici au magasin " - a crié le héros de la série russe.

Dans l'ensemble, cher ami, vous avez raison. Il y aura des nombres fractionnaires et un tas de lignes de code. Mais ce sera beaucoup plus facile. Intéressant? Venez aux affaires.

Pour fonctionner, vous avez besoin de l'utilitaire PaintCode . Ouvrez l'application et voyez une interface similaire à Sketch:



J'aime cette continuité.

Tout d'abord, définissez la taille du canevas. Je recommande d'utiliser une valeur de 100 à 1000 pixels. Cela n'a aucun sens de mettre plus, et en définissant moins de 100 pixels, vous pouvez obtenir une grande partie fractionnaire, et par conséquent - des frises lors du rendu. Nous allons définir 400x400 pixels et nommer la toile Apple Icon :



Je recommande d'utiliser les noms corrects pour les toiles, à la fin du tutoriel, il deviendra clair pourquoi. Mais pour les couches, les noms ne sont pas importants, ils peuvent être ignorés.

Ajoutez une icône à la toile, définissez la taille et placez-la au centre. Cela devrait se passer comme suit:



Vous pouvez prendre n'importe quelle icône pour des expériences, l'essentiel n'est pas le raster. Si vous êtes satisfait de ce résultat, vous pouvez exporter et accéder à Xcode.
Mais je vais montrer une fonctionnalité utile. L'icône est maintenant noire et vous voulez pouvoir changer de couleur. Pour ce faire, regardez dans le coin supérieur gauche et voyez toutes les couleurs obtenues à partir de l'objet. Renommez la couleur en IconColor et définissez le mode Paramètres .



C’est tout. Reste à exporter le code généré. En haut à droite, vous trouverez le bouton Exporter . Remplissez le nom et les autres champs comme vous le souhaitez et enregistrez le fichier:



Passons à Xcode


Importez le fichier dans le projet qui a été exporté à partir de PaintCode . Par curiosité, vous pouvez le faire défiler, mais peu est intéressant.

Dans Xcode, créez la classe ApppleIconView , héritée de UIView . Redéfinissez également la méthode de tirage :

class AppleIconView: UIView { override func draw(_ rect: CGRect) { IconStyleKit.drawAppleIcon( frame: rect, resizing: .aspectFit, iconColor: UIColor.black ) } } 

IconStyleKit - le nom spécifié lors de l'exportation. drawAppleIcon - le nom de la méthode générée, basé sur le nom du canevas. Et iconColor est la couleur qui est maintenant définie comme paramètre. Comme vous pouvez le voir, PaintCode a généré des méthodes pratiques.

AppleIconView doit également définir une couleur d'arrière-plan transparente. N'oubliez pas de le faire.

Ajoutez un objet AppleIconView :

 class Controller: UIViewController { override func viewDidLoad() { super.viewDidLoad() let iconView = AppleIconView( frame: CGRect.init( x: 0, y: 200, width: 70, height: 70) ) iconView.center.x = self.view.frame.width / 2 self.view.addSubview(iconView) } } 

Reste à démarrer le projet. Si tout est fait correctement, vous verrez le logo dessiné par le code:



Opinion biaisée de l'auteur


La plupart du temps, j'utilise PDF dans mes applications iOS. Pourquoi utiliser paintcode ? Juste comme ça - ça n'a aucun sens. Mais si vous avez la même icône devrait avoir plusieurs couleurs - PaintCode aide (si l'icône est une couleur, vous pouvez utiliser le propter tintColor). Les éléments dessinés sont également plus faciles à animer.

Un exemple pratique est ma bibliothèque SPPermission :



Pour chaque résolution, j'utilise une icône dessinée à l'aide de PaintCode . Le schéma de leurs 3 couleurs peut être modifié directement dans le code.

Pour ceux qui aiment regarder des vidéos, je vais à nouveau créer un lien vers le didacticiel YouTube :


Bonne année!

Source: https://habr.com/ru/post/fr434892/


All Articles