DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Spécificités Mobile
  • Présentation
  • Description du champ Image : Options spécifiques au multi-touch
  • Cas particulier : Gestion des zones de cliquage
  • Evénements optionnels spécifiques pour le multi-touch
  • Evénement optionnel Scroll au doigt
  • Balayage horizontal et vertical
  • Evénement optionnel "Zoom aux doigts"
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
L'une des applications les plus courante du multi-touch est la manipulation d'images. La taille de l'affichage sur un téléphone étant souvent réduite, il est souvent nécessaire de zoomer et/ou de se déplacer dans une image.
Il est ainsi possible de réaliser un zoom sur une image avec le contact de 2 doigts qui s'écartent.
Le multi-touch peut être mis en place :
  • sur les applications s'exécutant sur un téléphone.
  • sur les sites s'affichant sur un téléphone.
La gestion du multi-touch dans les champs Image peut être mise en place grâce à :
iPhone/iPad Remarque : La gestion du multi-touch est également disponible pour les champs Graphe.
WEBDEV - Code ServeurWEBDEV - Code Navigateur Conditions d'utilisation :
  • Sur le navigateur par défaut d'Android, le multi-touch fonctionne uniquement à partir de Android 3.0 et supérieur.
  • Sur le navigateur par défaut d'Android, le zoom des gestures peut entrer en conflit avec le zoom par défaut du navigateur pour les versions inférieures à Android 4.3.
Description du champ Image : Options spécifiques au multi-touch
L'onglet "Détail" de la fenêtre de description du champ Image permet de gérer les actions effectuées lors de l'utilisation des doigts :
Il est possible de gérer :
  • Pas de scroll, pas de zoom : dans ce cas, le multi-touch est désactivé.
  • Scroll automatique seulement : Si l'image n'est pas affichée dans son intégralité dans le champ, il est possible de la déplacer en scrollant directement dans l'image avec le doigt.
  • Scroll et zoom automatiques : En plus du scroll, il est possible de réaliser un zoom. Dans ce cas :
    • l'écartement de deux doigts en contact avec l'écran permet de zoomer dans l'image. Le zoom sera centré sur le point situé au milieu de la ligne tracée par les deux points de contact.
    • le resserrement de deux doigts en contact avec l'écran permet de dé-zoomer dans l'image.
Les options supplémentaires permettent de définir :
  • AndroidWidget AndroidiPhone/iPad Mode d'affichage initial de l'image. L'image peut être affichée uniquement dans un des modes suivants :
    • 100% centré : l'image est affichée à 100% et centrée dans le champ.
    • Homothétique centré : L'image est agrandie ou rétrécie en respectant les proportions de l'image d'origine pour être affichée entièrement dans le champ et centrée dans le champ.
    • Homothétique étendu centré : L'image est agrandie ou rétrécie en respectant les proportions de l'image d'origine pour que le plus petit côté de l'image soit affiché entièrement dans le champ et que l'image soit centrée dans le champ.
  • Facteur de zoom maximal : Zoom maximum pouvant être effectué avec les doigts.
  • Autoriser la mise à l'échelle par double tap : Dans ce cas, une double tape (ou double-clic) dans le champ permet d'appliquer le zoom sur une zone de l'image. Si l'image est déjà zoomée, elle sera réinitialisée à son affichage d'origine.
AndroidWidget AndroidiPhone/iPad Remarque : Si la fenêtre possède un ascenseur, il n'est pas possible d'utiliser les fonctionnalités de multi-touch du champ Image.
AndroidWidget AndroidiPhone/iPad

Cas particulier : Gestion des zones de cliquage

Si l'image est considérée comme une zone de cliquage (option "Cette image est une zone de cliquage" dans l'onglet "Détail" de la description du champ), il est possible :
  • soit de gérer uniquement le premier appui d'un doigt sur l'image (fonctionnement par défaut dans les versions précédentes) : Si plusieurs doigts sont utilisés sur l'image, les différents événements correspondants (doigt enfoncé, clic, ...) sont appelés uniquement lorsque le premier doigt est utilisé.
  • soit de gérer les différents appuis des doigts sur l'image (option "Rappeler les traitements à chaque doigt (multipoints)") : Si plusieurs doigts sont utilisés sur l'image, les différents événements correspondants (doigt enfoncé, clic, ...) sont appelés à chaque nouvel appui d'un doigt supplémentaire.
    iPhone/iPad Si le scroll ou le zoom est activé, l'option "Rappeler les traitements à chaque doigt (multipoints)" n'est pas prise en compte.
Evénements optionnels spécifiques pour le multi-touch
Trois événements optionnels spécifiques permettent de gérer le multi-touch sur les champs Image :
WEBDEV - Code ServeurWEBDEV - Code Navigateur Remarque : Ces événements sont des événements navigateur.

Evénement optionnel Scroll au doigt

L'événement "Scroll au doigt" est exécuté lors du déplacement vertical ou horizontal d'un ou plusieurs doigts en gardant le contact avec l'écran.
Cet événement peut accepter des paramètres en déclarant une procédure directement dans l'événement "Scroll au doigt" avec la syntaxe suivante :
PROCEDURE <Nom de la procédure>(<Distance X>, <Distance Y>)
où :
  • <Distance X> : Entier correspondant à la distance (en pixels) qui a été scrollée sur l'axe des X dans le champ.
  • <Distance Y> : Entier correspondant à la distance (en pixels) qui a été scrollée sur l'axe des Y dans le champ.
Remarques :
  • Android La distance correspond à la distance entre le dernier point de contact détecté et la position en cours.
  • WEBDEV - Code NavigateuriPhone/iPad La distance correspond à la distance entre le premier point de contact détecté et la position en cours.
WEBDEV - Code NavigateurAndroid Pour connaître la direction et la distance pour la manipulation effectuée, il est possible d'utiliser la variable Gesture à la place de la procédure.

Balayage horizontal et vertical

L'événement "Balayage horizontal et vertical" est exécuté lors d'un petit mouvement rapide d'un ou de plusieurs doigts sur l'écran.
Cet événement peut accepter des paramètres en déclarant une procédure directement dans l'événement "Balayage horizontal et vertical" avec la syntaxe suivante :
PROCEDURE <Nom de la procédure>(<Vitesse X>, <Vitesse Y>)
où :
  • <Vitesse X> : Entier correspondant à la vitesse (en pixels par seconde) du mouvement sur l'axe des X.
  • <Vitesse Y> : Entier correspondant à la vitesse (en pixels par seconde) du mouvement sur l'axe des Y.
WEBDEV - Code NavigateurAndroid Pour connaître la direction et la vitesse pour la manipulation effectuée, il est possible d'utiliser la variable Gesture à la place de la procédure.

Evénement optionnel "Zoom aux doigts"

L'événement "Zoom aux doigts" est exécuté lors de l'écartement ou du rapprochement de deux doigts sur l'écran.
Cet événement peut accepter des paramètres en déclarant une procédure directement dans l'événement "Zoom aux doigts" avec la syntaxe suivante :
PROCEDURE <Nom de la procédure>(<Ecartement>)
où <Ecartement> : Entier correspondant à la distance (en pixels) entre les deux points de contact au moment de l'appel de l'événement.
WEBDEV - Code NavigateurAndroid Pour connaître l'écartement, il est possible d'utiliser la variable Gesture à la place de la procédure.
iPhone/iPad L'utilisation de paramètres dans cet événement en déclarant une procédure n'est pas disponible.
Attention : Le zoom au doigt n'est pas disponible si la fonction dDébutDessin est utilisée sur le champ Image. Dans ce cas, il faut :
  • sauver l'image avec une fonction dSauveImageXXX.
  • utiliser la fonction dFinDessin.
  • réafficher l'image dans le champ Image.
Liste des exemples associés :
WM Système Exemples multiplateforme (WINDEV Mobile) : WM Système
[ + ] Cette application est un exemple didactique montrant quelques unes des fonctionnalités de WINDEV Mobile pour Android/iOS.
Les fonctions système utilisées sont :
- NFC
- Champ Multimédia
- Luminosité
- Volume
- WIFI
- Bluetooth
- Toast
- Boussole
- Accéléromètre
- Champ caméra
- LED
- Vibrations
- Notifications
- Fonctions de dessin
- Internet
Version minimum requise
  • Version 17
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 25/05/2022

Signaler une erreur ou faire une suggestion | Aide en ligne locale