Consultez le dessinview dans .net Maui

Apprenez à implémenter DrawingView dans votre application Maui .NET pour ajouter rapidement des capacités de signature ou des fonctionnalités de dessin, avec des paramètres intégrés pour la couleur, la largeur de course, etc.

Ces dernières années, la technologie a considérablement évolué, ce qui rend nos tâches quotidiennes plus faciles et plus efficaces. Grâce aux applications mobiles, nous pouvons désormais terminer divers processus de n’importe où, sans la nécessité de visites physiques, comme aller à la banque. Un excellent exemple de cette progression est les applications de signature numérique. Ce qui a exigé une fois qu’un document physique peut maintenant être fait sans effort à partir d’un smartphone.

Au-delà de ces commodités, les applications interactives jouent également un rôle crucial dans l’éducation et la créativité. Certaines applications, par exemple, aident les enfants à développer leurs compétences en dessin en utilisant uniquement un ordinateur ou un appareil mobile.

Souhaitez-vous faire partie des développeurs qui créent ces expériences innovantes? Bien sûr, vous le feriez! C’est pourquoi, dans cet article, vous apprendrez à intégrer Drawingview dans vos applications .net Maui avec seulement quelques étapes simples!

Qu’est-ce que DrawingView?

Drawingview Fournit une surface pour le dessin de lignes en utilisant l’interaction Touch ou de la souris et fait partie de la boîte à outils communautaire .net Maui. Le dessin de l’utilisateur peut être enregistré en tant qu’image, Le rendre particulièrement utile pour les applications qui nécessitent une boîte de signature ou des fonctionnalités de dessin interactives dans des contextes éducatifs.

De plus, il permet la personnalisation des aspects visuels, tels que le réglage de la couleur de ligne, l’ajustement de la largeur de course et la liaison à une collection de lignes dessinées.

Comment implémenter DrawingView?

Comme mentionné, DrawingView fait partie de la boîte à outils communautaire .net Maui. Cette boîte à outils est une collection de composants réutilisables créés par la communauté, y compris des animations, des convertisseurs et des comportements, conçus pour accélérer le développement d’applications avec une compatibilité multiplateforme pour iOS, Android, MacOS et Winui. Donc, pour implémenter correctement le DrawingView, vous devrez configurer la boîte à outils communautaire .net Maui dans votre application.

Configuration initiale

La configuration est simple, comme indiqué dans les étapes ci-dessous:

1. Installation: Tout d’abord, assurez-vous d’installer la boîte à outils en ajoutant le package Community.toolkit.maui Nuget.

2. Configuration dans Mauiprogram.cs: Après avoir ajouté le package NuGet, accédez à Mauiprogram.cs. Juste en bas UseMauiApp<App>()Ajouter:

.UseMauiCommunityToolkit()

3. Ajout de l’espace de noms: Incluez l’espace de noms à outils dans la page où vous intégrez DrawingView.

 xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Nous avons deux modes de dessin: une ligne unique et plusieurs lignes. Explorons chacun d’eux.

Dessin d’une seule ligne

Pour utiliser DrawingView, référencez simplement l’alias que vous avez attribué à l’espace de noms à l’étape précédente, «Toolkit»suivi d’un côlon (:) et du «drawingview», puis définissent ses propriétés.

Pour cet exemple, nous nous concentrerons sur les deux propriétés clés –LineColor et LineWidth.

✍️ Nous explorerons ces propriétés et d’autres plus en détail plus tard.

<toolkit:DrawingView 
    WidthRequest="300" 
    HeightRequest="300" 
    BackgroundColor="Pink" 
    LineColor="Red" 
    LineWidth="5" />

Votre résultat devrait ressembler à ceci:

Regardez l’exemple: chaque fois que je libère le trait et démarrez une nouvelle ligne, le dessin précédent est effacé, ne laissant que ce que je dessine actuellement.

Ajout de plusieurs lignes

Par défaut, Drawingview Permet de dessiner une seule ligne, ce qui signifie que chaque nouvelle course remplace la précédente. Cependant, vous pouvez facilement permettre la capacité de tracer plusieurs lignes.

Pour ce faire, définissez simplement le IsMultiLineModeEnabled propriété vrai et ShouldClearOnFinish à FAUXcomme indiqué ci-dessous:

<toolkit:DrawingView 
    WidthRequest="300" 
    HeightRequest="300" 
    BackgroundColor="Pink" 
    IsMultiLineModeEnabled="True" 
    LineColor="Green" 
    LineWidth="5" />

Si vous préférez l’implémenter en C # au lieu de XAML, le code ressemblerait à ceci:

using CommunityToolkit.Maui.Views; 

var gestureImage = new Image(); 
var drawingView = new DrawingView 
{ 
    Lines = new ObservableCollection<IDrawingLine>(), 
    IsMultiLineModeEnabled = true, 
    ShouldClearOnFinish = false, 
};

Votre résultat devrait ressembler à ceci:

Et dans cet exemple, contrairement à la précédente, je peux dessiner différents traits, me permettant de former le mot «bonjour».

Propriétés de DrawingView à savoir

• Lignes: Accepte un ObservableCollection<IDrawingLine> comme valeur valide, servant de collection de IdrawingLine Éléments.
• Devrait claquer: Accepte un Booléen valeur. Détermine si le dessin de DrawingView est effacé après avoir relâché le toucher ou cliquer lorsqu’une ligne est tracée. Faites attention à ne pas le confondre avec le IsMultiLineModeEnabled les biens, comme permettant les deux, les deux peuvent provoquer des conflits.
• Linecolor: Accepte une valeur de couleur, vous permettant de définir la couleur de course.
• Largeur de ligne: Accepte une valeur flottante, vous permettant de définir la largeur de course.

Comment puis-je sauver le dessin? 🤔

La boîte à outils communautaire .net Maui fournit deux façons de sauver un dessin en tant qu’image: directement à partir de Drawingview ou à travers DrawingViewService. Explorons chaque option plus en détail.

Utilisation de DrawingView pour enregistrer le dessin

Pour extraire l’image de votre dessin de Drawingviewutilisez simplement les asynchrones GetImageStream Méthode, fournissant les paramètres suivants:

• largeur souhaitée: La largeur souhaitée de l’image à enregistrer.
• désiré: La hauteur souhaitée de l’image à enregistrer.
• ImageOutputoption (Facultatif): s’il n’est pas spécifié, la méthode renvoie une image contenant uniquement les lignes dessinées, qui ne correspondent pas à la surface complète visible à l’utilisateur. Pour tout capturer à l’écran dans l’image enregistrée, utilisez DrawingViewoutputOption.fullcanvas.

Votre implémentation de code devrait ressembler à ceci:

await drawingView.GetImageStream(desiredWidth: 400, desiredHeight: 500, imageOutputOption: DrawingViewOutputOption.FullCanvas);

✍️ Dans cet exemple, l’image enregistrée capturera la toile complète de votre dessin, avec une largeur de 400 et une hauteur de 500.

Utilisation de DrawingViewService pour enregistrer le dessin

Pour les applications utilisant le MVVM motif, le Boîte à outils communautaire fournit le DrawingViewService Classe, qui permet non seulement la génération d’images mais permet également la création d’une séquence d’images. Il offre deux options pour enregistrer les images: ImageLineOptions.Justlines ou ImageLineOptions.fullcanvas.

Exporter juste les lignes dessinées

Si vous souhaitez exporter uniquement les lignes dessinées, vous pouvez utiliser ImageLineOptions.Justlinesqui vous permet de spécifier des paramètres tels que la taille de l’image et la couleur d’arrière-plan.

Dans l’exemple suivant, nous exporterons une image avec une largeur de 500une hauteur de 600 et un rouge arrière-plan.

await using var stream = await DrawingViewService.GetImageStream(

ImageLineOptions.JustLines(Lines, new Size(500, 600), Brush.Red));

Exporter la toile complète

Ou, si vous souhaitez exporter une image qui comprend tout ce que l’utilisateur voit sur la surface de dessin, vous pouvez utiliser ImageLineOptions.fullcanvas.

await using var stream = await DrawingViewService.GetImageStream(

ImageLineOptions.FullCanvas(Lines, new Size(1920, 1080), Brush.Blue, new Size(CanvasWidth, CanvasHeight)));

✍️ Dans cet exemple, une image de 500 × 666 pixels sera exportée avec un fond rouge. Grâce à new Size(CanvasWidth, CanvasHeight)la taille de l’image correspondra aux dimensions réelles du dessinview.

Comment gérer l’événement une fois la ligne tracée? 🤔

Le composant DrawingView nous permet de souscrire à des événements tels que OnDrawingLineCompletedce qui nous permet d’identifier la fin de la ligne. Voici comment l’implémenter dans XAML:

<views:DrawingView 
    Lines="{Binding MyLines}" 
    DrawingLineCompletedCommand="{Binding DrawingLineCompletedCommand}" 
    OnDrawingLineCompleted="OnDrawingLineCompletedEvent" />

Alternativement, si vous préférez le faire en utilisant C #, voici un excellent exemple de la documentation officielle.

using CommunityToolkit.Maui.Views; 

    var gestureImage = new Image(); 
    var drawingView = new DrawingView 
    {
    
	    Lines = new ObservableCollection<IDrawingLine>(), 
	    DrawingLineCompletedCommand = new Command<IDrawingLine>(async (line) => 
    { 
	    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5)); 
	    var stream = await line.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token); 
	    gestureImage.Source = ImageSource.FromStream(() => stream); 
    }) 
    }; 
    drawingView.OnDrawingLineCompleted += async (s, e) => 
    { 
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5)); 
    
    var stream = await e.LastDrawingLine.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
    
    gestureImage.Source = ImageSource.FromStream(() => stream); 
};

Les interactions touchées avec ScrollView peuvent parfois être un peu gênantes sur iOS. Pour améliorer cela, vous pouvez définir le ShouldDelayContentTouches propriété à false, comme indiqué ci-dessous:

<ContentPage 
xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"> 
    <ScrollView ios:ScrollView.ShouldDelayContentTouches="false"> 
	    <DrawingView /> 
    </ScrollView> 
</ContentPage>

Conclusion

Et c’est tout! En quelques étapes, vous avez appris à intégrer Drawingview dans vos applications .net Maui – QUICKly et sans effort! Ainsi, chaque fois que vous avez besoin de créer une application de signature ou de dessin, n’oubliez pas de tirer parti Drawingview. 💚💕

Merci d’avoir lu mes articles – voir la prochaine fois! 🙋‍♀️

Références

Cet article et son code étaient basés sur la documentation officielle: