{"id":592,"date":"2024-01-09T13:57:53","date_gmt":"2024-01-09T12:57:53","guid":{"rendered":"https:\/\/coding4phone.com\/?p=592"},"modified":"2024-01-10T11:19:08","modified_gmt":"2024-01-10T10:19:08","slug":"cameraview-regler-le-zoom-avec-un-pinch-gesture","status":"publish","type":"post","link":"https:\/\/coding4phone.com\/?p=592","title":{"rendered":"CameraView : R\u00e9gler le zoom avec un \u00ab\u00a0Pinch Gesture\u00a0\u00bb"},"content":{"rendered":"\n

Dans un pr\u00e9c\u00e9dent article<\/a> je vous avais expliqu\u00e9 comment lire un QR Code depuis une application .NET MAUI. J’avais aussi mis en ligne un projet d’exemple.<\/p>\n\n\n\n

Dans ce projet d’exemple on pouvait modifier le zoom de la cam\u00e9ra via un Slider.<\/p>\n\n\n\n

Nous allons maintenant voir comment effectuer la m\u00eame op\u00e9ration en passant par la reconnaissance d’un geste, le \u00ab\u00a0Pinch Gesture\u00a0\u00bb (pincement) qu’on utilise g\u00e9n\u00e9ralement pour zoomer dans une image.<\/p>\n\n\n\n

Ajouter la reconnaissance du geste<\/h2>\n\n\n\n

Il faut dans un premier temps ajouter la reconnaissance du geste au contr\u00f4le CameraView. En .NET MAUI c’est tr\u00e8s simple, il suffit d’ajouter \u00e0 la collection des Gestures du contr\u00f4le un PinchGestureRecognizer directement dans le code XAML de la page.<\/p>\n\n\n

\n<camera:CameraView \n    x:Name="CameraView" \n    Grid.Row="0"\n    Margin="30,30,30,0"               \n    Loaded="CameraView_Loaded" \n    BarcodeDetected="CameraView_BarcodeDetected" \n    ZoomFactor="{Binding Source={x:Reference ZoomSlider}, Path=Value}">\n\n    <camera:CameraView.GestureRecognizers>\n        <TapGestureRecognizer x:Name="CameraViewTapGesture" Tapped="CameraViewTapGesture_Tapped" \/>\n        <PinchGestureRecognizer x:Name="CameraViewPinchGesture" PinchUpdated="CameraViewPinchGesture_PinchUpdated" \/>\n    <\/camera:CameraView.GestureRecognizers>\n\n<\/camera:CameraView>\n<\/pre><\/div>\n\n\n
Dans le code d’origine on reconnaissait d\u00e9j\u00e0 le Tap via un TapGestureRecognizer pour forcer une mise au point (autofocus). Il suffit donc j’ajouter le nouveau geste \u00e0 reconna\u00eetre en plus de celui qui est d\u00e9j\u00e0 utilis\u00e9.<\/p>\n\n\n\n
R\u00e9pondre \u00e0 l’\u00e9v\u00e9nement PinchUpdated<\/h2>\n\n\n\n
Quand le geste Pinch est reconnu, un \u00e9v\u00e9nement PinchUpdated est g\u00e9n\u00e9r\u00e9. Cet \u00e9v\u00e9nement nous donne toute les informations n\u00e9cessaires pour calculer l’\u00e9tendue de l’augmentation ou de la diminution de la valeur de zoom \u00e0 appliquer (proportionnel \u00e0 l’\u00e9cartement des doigts).<\/p>\n\n\n\n
Les valeurs fournies par l’\u00e9v\u00e9nement sont :<\/p>\n\n\n
\ndouble Scale\nPoint ScaleOrigin    \nGestureStatus Status\n<\/pre><\/div>\n\n\n
La propri\u00e9t\u00e9 Status permet de savoir si le geste commence, est en cours ou se termine (tr\u00e8s important dans notre cas). La propri\u00e9t\u00e9 Scale permet de conna\u00eetre l’\u00e9tendue du geste de pincement (\u00e9cartement des doigts). Quant \u00e0 la propri\u00e9t\u00e9 ScaleOrigin, elle permet de conna\u00eetre la position du point pris en compte pour effectuer le calcul de Scale (on ne va pas s’en servir pour notre besoin).<\/p>\n\n\n\n
On va avoir besoin de 2 variables pour effectuer nos calculs :<\/p>\n\n\n
\nprivate double _CurrentScale = 1;\nprivate double _StartScale = 1;\n<\/pre><\/div>\n\n\n
Et enfin on doit r\u00e9agir \u00e0 l’\u00e9v\u00e9nement PinchUpdated :<\/p>\n\n\n
\nprivate void CameraViewPinchGesture_PinchUpdated(object sender, PinchGestureUpdatedEventArgs e)\n{\n    if (e.Status == GestureStatus.Started)\n    {\n        _StartScale = CameraView.ZoomFactor;\n    }\n    else if (e.Status == GestureStatus.Running)\n    {\n        _CurrentScale += (e.Scale - 1) * _StartScale;\n        _CurrentScale = Math.Max(1, _CurrentScale);\n\n        if (_CurrentScale >= ZoomSlider.Minimum && _CurrentScale <= ZoomSlider.Maximum) ZoomSlider.Value = _CurrentScale;\n    }\n}\n<\/pre><\/div>\n\n\n
Le calcul de _CurrentScale permet de d\u00e9terminer, suivant l’\u00e9tendue du pincement, quel facteur de zoom appliquer. Dans cet exemple il est appliqu\u00e9 (s’il est compris dans les bornes min et max) au Slider qui g\u00e8re le zoom.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Et voil\u00e0, on a termin\u00e9 ! Comme vous pouvez le constater c’est extr\u00eamement simple comme m\u00e9canisme.<\/p>\n\n\n\n
Vous pouvez r\u00e9cup\u00e9rer tout le code de cet article sur Github<\/a> et jouer avec d’autres \u00ab\u00a0Gesture Recognizer\u00a0\u00bb.<\/p>\n\n\n\n
A bient\u00f4t.<\/p>\n\n\n\n
Steph.<\/p>\n","protected":false},"excerpt":{"rendered":"
Dans un pr\u00e9c\u00e9dent article je vous avais expliqu\u00e9 comment lire un QR Code depuis une application .NET MAUI. J’avais aussi mis en ligne un projet d’exemple.<\/p>\n
Dans ce projet d’exemple on pouvait modifier le zoom de la cam\u00e9ra via un Slider.<\/p>\n
Nous allons maintenant voir comment effectuer la m\u00eame op\u00e9ration en passant par la reconnaissance d’un geste, le \u00ab\u00a0Pinch Gesture\u00a0\u00bb (pincement) qu’on utilise g\u00e9n\u00e9ralement pour zoomer dans une image.
\n
\nLire la suite
\n<\/a><\/p>\n","protected":false},"author":1,"featured_media":135,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false},"categories":[8,5,25,9],"tags":[13,12,14,22],"class_list":["post-592","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnet","category-maui","category-csharp","category-tutoriel","tag-dotnet","tag-maui","tag-csharp","tag-tutoriel"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/coding4phone.com\/wp-content\/uploads\/2023\/10\/coding4phone_qrcode_small.png?fit=200%2C200&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pfoe4s-9y","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/posts\/592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coding4phone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=592"}],"version-history":[{"count":32,"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/posts\/592\/revisions"}],"predecessor-version":[{"id":638,"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/posts\/592\/revisions\/638"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/media\/135"}],"wp:attachment":[{"href":"https:\/\/coding4phone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coding4phone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coding4phone.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}