Xamarin.Forms - Cartographie QRCode décorative avec SkiaSharp



Il existe une bibliothèque ZXing populaire pour la sortie / lecture des codes-barres. Il peut produire et lire de nombreux formats différents: QRCode, Aztec et autres, plus de 2 douzaines. Pour lire les codes, il dispose d'un contrôle prêt ZXingScannerView. Un minimum de code est requis pour ajouter cette fonctionnalité à votre application.

Cependant, en utilisant cette bibliothèque, le code sera affiché canoniquement, en noir et blanc. Considérez le cas lorsque vous devez représenter un code d'apparence personnalisée, par exemple, coloré, avec des éléments arrondis ou décoré d'une autre manière (et pour qu'il continue d'être bien lu).

Et la vraie liberté de créativité ne s'ouvre que si vous dessinez vous-même le code - alors tout est entièrement entre vos mains. C'est ce que nous allons faire avec l'exemple d'un code QR.

L'application terminée est ici .

Cet article implémente un algorithme qui est extrait de l'article: l' algorithme de génération de code QR , le dessin à l'aide de la bibliothèque SkiaSharp est affecté, et un exemple d'application d'un générateur de code QR avec certains éléments décoratifs est donné - mise en évidence, lissage des lignes et de l'arrière-plan à partir d'un fichier png.

Explications pour la mise en œuvre


Commençons par créer une application Xamarin.Forms vide. Créez un nouveau projet dans Visual Studio tel que "Mobile App (Xamarin.Forms)", puis sélectionnez le modèle "Blank". Dans la section "Plates-formes", sélectionnez-en une, SkiaSharp fonctionne sur de nombreuses plates-formes, y compris sur Android et iOS.

Les projets .Android et .iOS restent inchangés, nous avons une implémentation multiplateforme.

Dans un projet multiplateforme:
deux images d'arrière-plan ont été ajoutées - une pour la page entière et l'autre pour le code QR. Veuillez noter qu'ils ont une «Build Action» «Embedded resource».
La sortie se trouve dans les fichiers MainPage.xaml et MainPage.xaml.cs
La classe ImageResourceExtension pour utiliser des images à partir de ressources dans xaml.

Toute la logique est dans le projet QRCodeEncoder. Il est divisé en classes:

  • Encodeur - encoder une chaîne de données en une séquence de uns et de zéros
  • Rendu - positionnez correctement le tableau de données résultant, ajoutez des informations supplémentaires et renvoyez le fichier png à Stream

L'algorithme de génération de code QR possède de nombreux ouvrages de référence avec des nombres. Ce qu'ils signifient tous, voir l'article «Algorithme de génération de code QR» (voir ci-dessus).

L'encodage Kanji (pour les caractères) n'est pas implémenté dans l'application.

Skiasharp


SkiaSharp est une bibliothèque de dessins 2D multiplateforme pour .NET. Il est basé sur la bibliothèque graphique Skia de Google. Disponible en tant que package NuGet:

nuget install SkiaSharp 

Documentation Microsoft: SkiaSharp dans Xamarin.Forms

Tout dessin a lieu dans la méthode Draw de la classe Renderer. Par exemple, certains éléments sont arrondis, certains sont carrés:

 canvas.DrawCircle() canvas.DrawRect() 

certains sont mis en évidence:

 var paint1 = new SKPaint { IsAntialias = true, Style = SKPaintStyle.Fill, Color = SKColors.DeepSkyBlue }; var paint2 = new SKPaint { IsAntialias = true, Style = SKPaintStyle.Fill, Color = SKColors.Red }; var paint3 = new SKPaint { IsAntialias = true, Style = SKPaintStyle.Fill, Color = SKColors.Gold }; 

et montre comment lisser la transition entre les éléments adjacents.

Des exemples


Et enfin, des exemples de quelques QR codes intéressants sur Internet:

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


All Articles