Avec la version R1 2022 de l’interface utilisateur Telerik pour Xamarin, ImageEditor fournit désormais des commandes pour le contrôle par programmation de l’image modifiée.
Jusqu’à présent, la seule façon de modifier l’image dans Telerik ImageEditor pour Xamarin était via l’interface utilisateur de la barre d’outils ImageEditor. Bien que la barre d’outils soit entièrement personnalisable, nous avons néanmoins reçu des demandes pour fournir des moyens de modifier l’image à partir d’une interface utilisateur externe.
Alors voilà, avec la version R1 2022 de l’interface utilisateur Telerik pour Xamarin, ImageEditor fournit des commandes pour le contrôle par programmation de l’image modifiée. Grâce aux commandes, vous pouvez exécuter directement une action d’édition sur l’image chargée, telle que recadrer, redimensionner, modifier la luminosité, etc.
Dans cet article de blog, je vais brièvement démontrer la nouvelle fonctionnalité. Commençons tout de suite !
Découvrez les nouvelles commandes de l’éditeur d’images
Telerik ImageEditor pour Xamarin permet aux utilisateurs de visualiser et de modifier des images, telles que la modification de leurs niveaux de flou et de luminosité, le recadrage, le redimensionnement, la rotation de l’image, etc. L’éditeur est livré avec une barre d’outils personnalisable qui permet d’accéder facilement à toutes les actions disponibles. Néanmoins, si vous avez l’obligation de ne pas utiliser la barre d’outils et préférez lancer une action d’édition d’une autre manière (par exemple en appuyant sur un bouton), les nouvelles commandes sont pratiques. Voici une liste des commandes disponibles pour le contrôle par programmation, qui couvrent essentiellement toutes les actions disponibles :
- CropCommand
- CropInteractiveCommand et la suite ApplyInteractiveCommand ou CancelInteractiveCommand
- RedimensionnerCommand
- RotateLeftCommand/RotateRightCommand
- BlurCommand
- CommandeLuminosité
- CommandeContraste
- TeinteCommand
- Commande de saturation
- NettetéCommande
- InverserCommandeHorizontale/InverserCommandeVerticale
Vous pouvez trouver des informations détaillées sur chaque commande dans notre documentation ici : Éditeur d’images : Commandes.
Voyons les commandes en action
Nous allons passer directement à l’exemple montrant comment certaines de ces commandes peuvent être utilisées. Pour les besoins de l’exemple, utilisons uniquement les commandes suivantes : pour modifier la taille de l’image—CropInteractive (et ensuite ApplyInteractive / CancelInteractive), ainsi que certaines commandes d’application d’effets—Commandes d’effet Luminosité et Saturation.
Tout d’abord, ajoutez une instance ImageEditor à votre page avec une interface utilisateur pour l’édition d’images – des curseurs pour définir les valeurs des effets et des boutons pour lancer et appliquer l’opération de recadrage.
<Grid RowDefinitions="Auto,*" Margin="20">
<Grid RowDefinitions="Auto, 60, 60, Auto, Auto" RowSpacing="10" ColumnDefinitions="*,*,*,*">
<Label Text="Apply Effect:" FontAttributes="Bold" Grid.ColumnSpan="4" />
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="Change Brightness:" />
<Slider Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="2" Minimum="-0.4" Maximum="0.4" Value="0" ValueChanged="BrightnessUpdated"/>
<Label Grid.Row="2" Grid.ColumnSpan="2" Text="Changed Saturation" />
<Slider Grid.Row="2" Grid.ColumnSpan="2" Grid.Column="2" Minimum="0.7" Maximum="1.3" Value="1" ValueChanged="SaturationUpdated"/>
<Label Grid.Row="3" Text="Crop:" FontAttributes="Bold" Grid.ColumnSpan="4" />
<Button Grid.Row="4" Text="Start Crop" Grid.ColumnSpan="2" Command="{Binding CropInteractiveCommand, Source={x:Reference imageEditor}}" />
<Button Grid.Row="4" Grid.Column="2" Text="Apply" Command="{Binding ApplyInteractiveCommand, Source={x:Reference imageEditor}}" />
<Button Grid.Row="4" Grid.Column="3" Text="Cancel" Command="{Binding CancelInteractiveCommand, Source={x:Reference imageEditor}}"/>
</Grid>
<telerikImageEditor:RadImageEditor x:Name="imageEditor"
Grid.Row="1"
Source="{Binding ImagePath}" />
</Grid>
Une demande de fonctionnalité courante consiste à activer l’opération de recadrage dès que l’image est affichée dans l’éditeur d’images. Cela peut être facilement réalisé dans le code avec l’extrait de code suivant (remarque : un petit délai est nécessaire pour s’assurer que l’image est chargée dans ImageEditor) :
Device.StartTimer(new TimeSpan(0, 0, 1), () => { Device.BeginInvokeOnMainThread(() => { var cropContext = new CropCommandContext() { Bounds = new Rectangle(0, 0, 400, 400) }; this.imageEditor.CropInteractiveCommand.Execute(cropContext); });
return false; });
Vérifiez ci-dessous les gestionnaires d’événements ValueChanged référencés pour les curseurs Luminosité et Saturation :
private void BrightnessUpdated(object sender, ValueChangedEventArgs e)
{
var brightnessContext = new BrightnessCommandContext() { Brightness = e.NewValue };
this.imageEditor.BrightnessCommand.Execute(brightnessContext);
}
private void SaturationUpdated(object sender, ValueChangedEventArgs e)
{
var saturationContext = new SaturationCommandContext() { Saturation = e.NewValue };
this.imageEditor.SaturationCommand.Execute(saturationContext);
}
Voyons comment cela fonctionnerait :
Essayez-le et partagez vos commentaires
J’espère que vous avez apprécié la nouvelle fonctionnalité de notre composant ImageEditor.
Le R1 2022 version est disponible en téléchargement dans les comptes des clients. Si vous êtes nouveau dans l’interface utilisateur Telerik pour Xamarin, vous pouvez en savoir plus à ce sujet via le fiche produit. Il est livré avec un Essai gratuit de 30 joursce qui vous laisse le temps d’explorer la boîte à outils et d’envisager de l’utiliser pour votre développement Xamarin actuel ou à venir.
Nous serions ravis de savoir ce que vous en pensez, alors si vous avez des questions et/ou des commentaires, n’hésitez pas à les partager dans notre Interface utilisateur Telerik pour le portail de commentaires Xamarin.
Source link