Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

SkiaSharp et Xamarin.Forms le dessin 2D cross-plateforme

SkiaSharp fonctionne avec les Xamarin.Forms et permet désormais de disposer d’une API 2D complètement portable iOS, Android, UWP et même Mac OSX ou WPF !

SkiaSharp

SkiaSharp est une API 2D cross-plateforme offrant de hautes performances. Elle est disponible pour .NET et fonctionne avec les Xamarin.Forms autant qu’avec les versions full native de Xamarin.

Comme toutes les extensions de ce type l’API est disponible via un package Nuget qui supporte :

  • .NET Core,
  • .NET Standard 1.3
  • Xamarin.iOS
  • Xamarin.tvOS
  • Xamarin.Mac
  • Windows Classic Desktop c’est à dire Windows Forms mais aussi WPF !
  • Et bien entendu UWP.

Skia ?

Dans SkiaSharp, il y a sharp, et vous comprenez pourquoi, mais il y a aussi Skia ! Et qu’est-ce que Skia ?

On sait que Mono a supporté System.Drawing et qu’il existe même une version se reposant sur Apple CoreGraphics pour iOS et OSX (https://github.com/mono/sysdrawing-coregraphics). Mais ce support de System.Drawing n’a jamais été “pixel-perfect” comme le dit Xamarin. On trouve aussi Mono.Cairo mais tous ces portages posent des problèmes plus ou moins difficiles à contourner.

Skia est une API Open Source cross-plateforme très performante et maintenue par une communauté assez vaste et active. On peut même dire que c’est un standard de fait puisque les moteurs graphiques de Chrome, Chrome OS, Android, Firefox et Firefox OS utilisent Skia. Autant dire qu’avec de tels “utilisateurs” de la librairie cette dernière est plutôt populaire et bien testée !

Vous trouverez toutes les informations sur Skia sur son site : https://skia.org/

Xamarin a ainsi décidé de passer d’un support approximatif de System.Drawing et ses limitations à Skia qui est un standard ouvert utilisé par les plus grands et qui offre une API optimisée (support des GPU) très vaste (support des shaders, des courbes de Bézier, des effets sur les chemins, etc).

Kimono

SkiaSharp est ainsi parfaitement adapté au développement cross-plateforme, cette fois-ci “pixel perfect”, indépendant des résolutions même pour les assets graphiques.

imageToutefois SkiaSharp est une API donc quelque chose qui s’écrit en code.

Or le dessin et le code ne sont pas tout à fait les meilleurs amis. Il est difficile de concevoir un visuel uniquement à base de code. C’est ce que XAML fait mais en fournissant des outils de très haute valeur comme Blend ou les designers visuels XAML sous Visual Studio qui permettent de manipuler les dessins visuellement à l’écran, Blend ou VS se chargeant de traduire les actions en code XAML.

Bien entendu il n’existe pas encore de support de Skia dans Blend ni même est-il prévu de “traduire” XAML en Skia, ce serait une excellente chose certes  mais ce n’est pas dans le pipe de ce que j’en sais.

Mais tout n’est pas perdu car il existe désormais Kimono !

Kimono Designer (https://github.com/xamarin/KimonoDesigner) est un designer cross-plateforme qui permet d’éditer visuellement des graphiques basés sur Skia. Les fichiers Kimono peuvent être traduits en code et inclus dans n’importe OS, langage ou plateforme pour peu qu’il supporte Skia, et la liste des environnements utilisant ou supportant Skia est longue (voir plus haut).

Une API, un designer et ensuite ?

Nous voici équipés d’une API graphique 2D rapide et complète et même d’un designer pour concevoir interactivement des visuels cross-plateformes. Que demander de plus ? Le support dans les Xamarin.Forms ? Hmmm pour ceux qui suivent c’est par là que j’ai commencé l’article… Au passage la doc de SkiaSharp pour Xamarin se trouve là : https://developer.xamarin.com/guides/xamarin-forms/advanced/skiasharp/

Donc ?

Et bien il ne reste plus qu’à tester !

Et je vais être un peu feignant car un tel exemple très simple existe et si ce n’est pas pour ajouter une valeur à ce travail autant l’utiliser tel quel. Vous pouvez ainsi télécharger l’exemple à jour ici : https://github.com/mattleibow/SkiaSharpDemo

Et comme son auteur a pris le temps de faire un article qui va avec, autant vous y rendre directement : https://blog.xamarin.com/drawing-with-skiasharp/

Toutefois oui cet article est en anglais et je sais l’allergie de certains lecteurs pour la langue des grands bretons.. Alors je vais résumer très rapidement.

Commençons par un exemple de sortie sous UWP ce que ne propose pas l’article en question :

image

Et le même code sous Android :

image


Rien de bien extravagant je vous l’accorde, mais c’est une démo qui se veut simple, pour les Picasso en herbe la voie est ouverte il n’y a plus qu’à… Donc ici on trouve trois objets graphiques, quatre en réalité : un cercle plein, un contour dessiné à part, une croix qui est un “path” composé de deux lignes, et un texte qui n’est pas un label mais bien un texte dessiné et qui ainsi peut subir des effets, s’intégrer dans une animation globale, etc.

Dans les grandes lignes le principe de tous ces systèmes est le même, il faut obtenir une surface de dessin et ensuite on applique des primitives dessus pour créer des formes. Skia n’échappe pas à cette logique. Ainsi dans une ContentPage Xamarin.Forms il suffit de créer une balise SKCanvasView. Cet objet surface de dessin dispose comme on peut s’y attendre d’un évènement pour le “paint” s’appelant PaintSurface. En Xaml on passe le nom (en chaîne de caractères) de l’évènement de la page qui sera chargé d’y répondre.

Nul besoin de nommer l’objet surface puisque dans le gestionnaire d’évènement on recevra en paramètre celui-ci.

image

image

Dessiner, tracer des courbes, du texte, tout cela fait l’objet de commandes de l’API qui est décrite sur le site de Skia (adresse plus haut) et dans la doc en ligne de SkiaSharp.

On comprend très vite comment tout cela fonctionne nul besoin d’aller plus loin.

Conclusion

Disposer d’une API 2D puissante et rapide dans un contexte cross-plateforme est une avancée de plus vers ce mode de développement qui devient universel que cela soit chez Google (on le voit avec Skia par exemple) ou Microsoft (Xamarin illustre à merveille ce changement de paradigme).

En utilisant Kimono on peut facilement (et visuellement) créer des logos, des dessins, des parties d’UI qui viendront s’insérer dans des Apps toujours plus lookées et agréables à utiliser.

Bref, comme je l’explique depuis au moins quatre ans le développement cross-plateforme est mature mais surtout il devient la norme vers laquelle tout le monde converge à défaut de faire converger tous les OS.

Il est évident qu’à moins de l’avènement d’un gouvernement mondial totalitaire imposant un seul OS, ce qui est peu souhaitable on en conviendra, il n’existera plus jamais un seul OS, une seule architecture.

Au début de la micro-informatique on a vu l’hégémonie de MS qui a régné pendant au moins deux ou trois décennies, mais ces temps sont terminés, le futur se décline en multi-OS dans un système libéral où la concurrence est reine. Impossible de croire qu’un jour pourrait revenir la si pratique époque de la domination de MS et de Windows. Tout le monde a critiqué MS pour sa situation hégémonique, mais nous avons tous gagner notre pain grâce à la stabilité du marché que cela créait. La désorganisation arrivée via les mobiles avec l’avènement de Google et son Android, Apple et son iOS, la perte de position de leader de MS sur ces marchés, tout cela a modifié en profondeur le marché et ce pour toujours.

Tout manque finit par être comblé, c’est ce qui est arrivé avec Xamarin venu juste à point remettre de l’unité dans cet éclatement des OS. Aujourd’hui on ne vise plus un OS en tremblant d’avoir fait le bon choix, on développe d’emblée en cross-plateforme.

Des outils comme SkiaSharp viennent compléter la panoplie permettant de reproduire un même logiciel au comportement identique sur toutes les plateformes et ce avec un seul code.

Pensez Xamarin, pensez SkiaSharp, oubliez le reste… sauf l’URL de Dot.Blog Smile

Stay tuned !

blog comments powered by Disqus