Fatigué d'avoir à tout redessiner à la main sur chaque plateforme pour des graphiques, diagrammes, ou tout simplement des canvas ? Lors de cette session je vous présente SkiaSharp, la solution de dessin multiplateforme !

1. 1
Meetup Xamarin – Maxime Eglem
SkiaSharp

2. 2
Skia
S k i a S h a r p
 Google a racheté la librairie Graphique
Skia en novembre 2005.
 Open Source même après l’acquisition
 C++
 Utilisé dans Google Chrome, Mozilla
FireFox, Chrome OS, Android et même
Sublime Text 3
 Skia utilise l'accélération du processeur
graphique, OpenGL, OpenGL ES et
OpenVG

3. 3
SkiaSharp
S k i a S h a r p
 C’est un outil Cross Platforme permettant de
créer des graphiques vectoriels
 Bindings :
 .NET Standard 1.3
 .NET Core
 Xamarin.Android
 Xamarin.iOS
 Xamarin.tvOS
 Xamarin.watchOS
 Xamarin.Mac
 Windows Classic Desktop (Windows.Forms / WPF)
 Windows UWP (Desktop / Mobile / Xbox /
HoloLens)
https://github.com/mono/SkiaSharp

4. 4
Seed Routines
L’application Seed Routine ou SR est un produit
interne de l’entreprise Daher. Elle permet de
créer des rapports graphiques de réunions
matinales interne de l’entreprise.
Elle permet de :
 Intégration d’un système de cache,
 Enregistrement d’une configuration spécifique
 Génération d’un document PDF,
Services
 UX Design,
 Conception d’architecture,
 Développement sous Xamarin,
 Mise en place de l’intégration
continu,
 Publication dans AppCenter,
Lieu de réalisation
 Studio Cellenza
Store

5. 5
Composants Cellenza - SkiaSharp
Dans l’optique d’aider des clients dans la
conception de leurs applications, nous avons
développé des composants personnalisés.
Nous avons ainsi :
 Créer des icones adaptables et scalables,
 Créer des contrôles sur Xamarin.Forms,
 Créer des animations .
Services
 UX Design,
 Développement sous Xamarin,
Lieu de réalisation
 Studio Cellenza
Disponible Sur

6. 6
SkiaSharpavec XamarinForms
S k i a s h a r p
 Création de la View avec
SKCanvasView/SKGLView
 PaintSurface Event permettra de dessiner
 Arg récupéré :
▪ SKSurface -> SKCanvas
 La Méthode InvalidateSurface permettra
de redessiner l’écran.

7. 7
Drawing Methods
S k i a s h a r p
DrawCircle
DrawRect
DrawLine DrawText
DrawBitmap
DrawPath

8. 8
Transforms Methods
S k i a S h a r p
 Translate
 Scale
 RotateDegrees
 RotateGradians

9. 9
Intersection
S k i a s h a r p

10. 10
Intersection
S k i a s h a r p

11. 11
Intersection
S k i a s h a r p

12. 12
Intersection
S k i a s h a r p

13. 13
SKPaint
S k i a S h a r p
 Style
 Stroke
 Fill
 StrokeAndFill
 Color = SKColor
 StrokeWidth: Subject Scalling Transforms
 StrokeCap
 Butt
 Square
 Round
 StrokeJoin
 Miter
 Bevel
 Round
 Shader : Gradients

14. 14
SKPath
S k i a s h a r p
Ligne et courbe connectés entre elles
Demarre un nouveau contour
Ajoute une ligne sur le contour
Ajout une courbe sur la circonférence d'une
ellipse ou d'un cercle
Les courbes bezier
Contour
MoveTo
LineTo
ArcTo
CubicTo et QuadTo
ConicTo
SVGPath

15. 15
Outils à connaître
KimonoDesigner

16. 16
Kimono Designer
S k i a s h a r p

17. 17
Kimono
S k i a S h a r p
 Kevin Mullins
 « Senior content developer » pour Microsoft
 Créé avec Visual Studio.net
 Fait en Xamarin
 Librarie Kimono Core (Backend)
 https://github.com/xamarin/KimonoDesigner

18. 18
Demo

19. 19
Outils à connaître
Microcharts

20. 20
Microcharts
S k i a s h a r p

21. 21
Microcharts
S k i a s h a r p
 Aloïs Deniel – MVP Francais
 Simple outil – Se base sur SkiaSharp
 Léger
 Pas encore d’animation

22. 22
Microcharts
S k i a s h a r p

23. 23
Sample
S k i a s h a r p

24. 24
Merci devotre attention !