Démarrage rapide : actions de manipulation (HTML)

Applies to Windows and Windows Phone

Vous pouvez personnaliser l’expérience utilisateur pour les actions de manipulation décrites dans la rubrique Langage tactile de Windows, telles que le glissement, le balayage, la rotation, le pincement et l’étirement. Pour ce faire, vous gérez les événements de mouvement Windows Runtime dans vos applications en JavaScript.

La plupart des applications traitent les mouvements (rotation, zoom et glissement) et s’occupent peu des données de pointeur brutes excepté de les passer à la détection de mouvements. Dans cet exemple, nous utilisons ces données de pointeur brutes pour prendre en charge la gestion et le traitement des actions de manipulation. Cela permet d’étendre le modèle d’interaction de votre application et de s’appuyer sur les événements de pointeur de base décrits dans la rubrique Démarrage rapide : pointeurs.

Mises à jour pour Windows 8.1:  Dans Windows 8.1, les API d’entrée de pointeur ont fait l’objet de plusieurs mises à jour et améliorations. Pour plus d’informations, voir Modifications apportées aux API pour Windows 8.1.

Si vous débutez dans le développement d’applications en JavaScript:  Examinez ces rubriques pour vous familiariser avec les technologies discutées ici.

Créer votre première application en JavaScript

Feuille de route pour les applications en JavaScript

Découvrir les événements avec Démarrage rapide : ajout de contrôles HTML et gestion des événements

Fonctionnalités d’application de A à Z:  

Étudier cette fonctionnalité de façon plus approfondie dans le cadre de notre série Fonctionnalités d’application de A à Z

Interaction utilisateur de A à Z (HTML)

Personnalisation de l’interaction utilisateur de A à Z (HTML)

Recommandations en matière d’expérience utilisateur:  

Les bibliothèques de contrôles de plateforme (HTML et XAML) fournissent une expérience d’interaction utilisateur complète, y compris les interactions standard, les effets physiques animés et le retour visuel. Utilisez ces contrôles intégrés si vous n’avez pas besoin d’une prise en charge d’interaction personnalisée.

Si les contrôles de plateforme ne suffisent pas, les présentes recommandations peuvent vous aider à fournir une expérience d’interaction utilisateur à la fois immersive et cohérente entre les divers modes d’entrée. Ces recommandations sont axées principalement sur l’entrée tactile, mais elles s’appliquent également à l’entrée de pavé tactile, de souris, de clavier et de stylet.

Exemples:  Découvrez cette fonctionnalité en action dans nos exemples d’applications.

Exemple de personnalisation de l’interaction utilisateur de A à Z

Entrée : exemple de gestion d’événement de pointeur DOM

Entrée : exemple de manipulations et de mouvements (JavaScript)

Objectif: apprendre à écouter, gérer et traiter les actions de manipulation à l’aide des entrées provenant d’interactions tactiles, avec la souris ou le stylo/stylet, ainsi que des événements de mouvement Windows Runtime.

Prérequis

Passez en revue Démarrage rapide : pointeurs, Démarrage rapide : manipulations et mouvements DOM et Démarrage rapide : actions statiques.

Nous partons du principe que vous savez créer une application élémentaire en JavaScript qui utilise le modèle Bibliothèque Windows pour JavaScript.

Pour suivre ce didacticiel, vous devez :

Qu’est-ce qu’un événement de mouvement ?

Un mouvement est l’acte physique ou le déplacement effectué sur ou par le périphérique d’entrée. Cela peut comprendre un ou plusieurs doigts sur une surface tactile, un digitaliseur à stylo/stylet, une souris, etc. Ces interactions naturelles sont mises en correspondance avec des éléments à la fois dans le système et dans votre application. Pour plus d’informations, voir Mouvements, manipulations et interactions.

Le tableau ci-dessous identifie les actions de manipulation traitées dans cette rubrique de démarrage rapide. Voir Démarrage rapide : actions statiques pour la prise en charge d’actions statiques, telles que l’appui et l’appui prolongé.

MouvementDescription
GlissementMouvement de glissement

Un ou plusieurs contacts qui dépassent un seuil de distance.

Si le mouvement panoramique n’est pas activé et que le contact initial se trouve dans les limites d’un élément, le glissement déplace cet élément.

Si le mouvement panoramique est activé, que le contact initial se trouve dans les limites d’un élément et que la direction du glissement est perpendiculaire à l’axe de mouvement panoramique, le glissement déplace cet élément. Sinon, le mouvement panoramique est initié.

  • État d’entrée : un ou plusieurs contacts détectés.
  • Mouvement : glissement qui croise un seuil de distance.
  • État de sortie : dernier contact libéré, ou terminé.
BalayageMouvement de balayage

Un ou plusieurs contacts qui se déplacent dans un seuil de distance (mouvement de glissement bref). Le balayage n’est pas un mouvement basé sur la vitesse ou la durée.

Si l’application ne permet pas le mouvement panoramique et que le contact initial se trouve dans les limites d’un élément, le balayage déplace cet élément.

Si l’application ne permet pas le mouvement panoramique, si le contact initial se trouve dans les limites d’un élément et enfin si la direction du balayage est perpendiculaire à l’axe de mouvement panoramique, le balayage sélectionne cet élément. Sinon, le balayage initie un mouvement panoramique.

  • État d’entrée : un ou plusieurs contacts détectés.
  • Mouvement : glissement qui ne croise pas de seuil de distance.
  • État de sortie : dernier contact libéré, ou terminé.
Pincement et étirementMouvement de pincement et d’étirement

Deux contacts, ou plus, qui convergent ou divergent pour effectuer un zoom avant ou arrière, respectivement.

Généralement utilisé pour redimensionner un objet, effectuer un zoom avant ou arrière sur un affichage et pour un zoom sémantique.

  • État d’entrée : deux contacts, ou plus, détectés dans le rectangle de délimitation d’un objet.
  • Mouvement : glissement avec des contacts convergeant ou divergeant.
  • État de sortie : moins de deux contacts détectés.
RotationMouvement de rotation

Le mouvement de rotation effectué avec deux doigts, ou plus, permet de faire pivoter un objet. Faites pivoter l’appareil lui-même pour faire pivoter l’écran entier.

Deux contacts, ou plus, qui se déplacent avec un mouvement circulaire autour du centre (ou point) de rotation.

Généralement utilisé pour faire pivoter un objet.

  • État d’entrée : deux contacts, ou plus, détectés dans le rectangle de délimitation d’un objet.
  • Mouvement : glissement d’un ou de plusieurs contacts dans un mouvement circulaire.
  • État de sortie : moins de deux contacts détectés.

Pour plus d’informations sur ces mouvements et leur association au langage tactile de Windows 8, voir Conception de l’interaction tactile.

 

Important  Si vous implémentez votre propre prise en charge d’interaction, gardez à l’esprit que les utilisateurs s’attendent à disposer d’une expérience intuitive impliquant une interaction directe avec les éléments d’interface utilisateur de votre application. Nous vous recommandons de modeler vos interactions personnalisées sur les bibliothèques de contrôles de plateforme (HTML et XAML) pour des raisons de cohérence et de simplicité de détection. Les contrôles de ces bibliothèques fournissent une expérience d’interaction utilisateur complète, notamment pour les interactions standard, les effets physiques animés, le retour visuel et l’accessibilité. Ne créez des interactions personnalisées que pour répondre à des exigences claires et bien définies, notamment en l’absence d’interactions de base prenant en charge votre scénario.

Création de l’interface utilisateur

Cet exemple montre comment activer une seule action de manipulation, la rotation pour faire pivoter, sur un élément d’interface utilisateur de base. Un carré (target) fait office d’objet cible pour l’entrée et la détection du pointeur. Les données de ce pointeur sont passées à un objet GestureRecognizer qui traite les données d’un mouvement de rotation pour créer une manipulation de rotation avec un comportement inertiel standard.

L’application fournit les fonctionnalités d’interaction utilisateur suivantes :

  • Rotation : fait pivoter l’objet, avec inertie quand les contacts du pointeur sont terminés. Ce comportement d’interaction est conforme aux Recommandations en matière de retour visuel et aux recommandations relatives au langage tactile de Windows. Ces dernières stipulent que le mouvement de rotation doit être limité à la rotation d’éléments d’interface utilisateur.

    Remarque  Cet exemple peut facilement être modifié pour prendre en charge le glissement et le zoom. Cette possibilité sera traitée ultérieurement dans ce guide de démarrage rapide.

Voici le code HTML correspondant à cet exemple.


<html>
<head>
    <meta charset="utf-8" />
    <title>Manipulation Gestures</title>
    
    <!-- WinJS references -->
    <link rel="stylesheet" href="//Microsoft.WinJS.2.0/css/ui-light.css" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- BasicGesture references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/InputProcessor.js"></script>
    <script src="/js/ManipulationManager.js"></script>
    <script src="/js/default.js"></script>
</head>
<body>
    <div class="Container" id="Container">
        <div id="targetTitle">Manipulation gestures (rotation)</div>
        <div class="TargetContainer" id="targetContainer">
            <div id="target" draggable="false"></div>
        </div>
        <div id="targetFooter">&nbsp;</div>
    </div>
</body>
</html>


Voici le code CSS (feuilles de style en cascade) correspondant à cet exemple.

Remarque  Les événements de pointeur ne se déclenchent pas au cours d’une interaction de panoramique ou de zoom. Vous pouvez désactiver les mouvements de panoramique et de zoom au niveau d’une région via les propriétés CSS msTouchAction, overflow et -ms-content-zooming.


html,body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

div #Container {
/*
This element permits no default touch behaviors.
A manipulation-blocking element is defined as an element that explicitly 
blocks direct manipulation via declarative markup, and instead fires gesture 
events such as MSGestureStart, MSGestureChange, and MSGestureEnd.
*/
    touch-action: none;
    display: -ms-grid;
    -ms-grid-rows: 200px 1fr 50px;
    -ms-grid-columns: 1fr;
    overflow: hidden;
    position: absolute;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    border-collapse: collapse;
}

div #targetTitle {
    touch-action: none;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    background-color: black;
    color: white;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    border-collapse: collapse;
    font-family: 'Segoe UI';
    font-size: large;
}
div #targetContainer {
    touch-action: none;
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    background-color: white;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    border-collapse: collapse;
}
div #targetFooter {
    touch-action: none;
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    background-color: black;
    color: white;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    border-collapse: collapse;
    font-family: 'Segoe UI';
    font-size: large;
}

div #target {
    -ms-transform-origin: 0px 0px;
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: black;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    border-collapse: collapse;
}


Initialiser l’application

Configurez la cible, son conteneur et la gestion de la manipulation pour la cible lorsque l’application démarre.

Nous initialisons ici l’élément cible (et d’autres de l’interface utilisateur) dans le conteneur et configurons un gestionnaire pour les manipulations.


/// <summary> 
/// Initializes the target and manipulation handling.
/// </summary>
function initialize() {
    var container = document.getElementById("targetContainer");
    var target = document.getElementById("target");
    var title = document.getElementById("targetTitle");
    var footer = document.getElementById("targetFooter");
    // Set the height of the target container for initial positioning of the target.
    var containerHeight = window.innerHeight - title.clientHeight - footer.clientHeight;
    container.style.height = containerHeight + "px";
    // Set the initial position of the target.
    target.style.msTransform = (new MSCSSMatrix()).
        translate((container.clientWidth - parseInt(target.clientWidth)) / 2.0,
        (containerHeight - parseInt(target.clientHeight)) / 2.0);
    // Configure manipulation handling.
    var manipulable = new Manipulator.ManipulationManager();
    // The configuration function can support all manipulations.
    // For this example, we limit manipulation support to rotation with inertia.
    manipulable.configure(false,
                          true, // Rotation.
                          false,
                          true, // Inertia.
                          1,
                          0,
                          {
                              x: (container.clientWidth - parseInt(target.clientWidth)) / 2.0,
                              y: (containerHeight - parseInt(target.clientHeight)) / 2.0
                          });
    manipulable.setElement(target);
    manipulable.setParent(container);
    // Handler for transforms related to the manipulation.
    manipulable.registerMoveHandler({
        x: (container.clientWidth / 2.0),
        y: (containerHeight / 2.0)
    }, Manipulator.ManipulationManager.FixPivot.MoveHandler);
}


Gérer l’entrée du pointeur et configurer la reconnaissance de mouvement

Pour cet exemple, nous utilisons une classe wrapper de base (InputProcessor) pour définir les gestionnaires d’événements de pointeur avec l’objet GestureRecognizer qui utilise l’entrée du pointeur.

Dans la plupart des cas, nous vous conseillons d’obtenir les informations sur le pointeur via l’argument d’événement des gestionnaires d’événements de pointeur dans l’infrastructure de langage choisie.

Si l’argument d’événement n’expose pas les détails du pointeur nécessaires à votre application, vous pouvez obtenir l’accès aux données étendues du pointeur à partir de l’argument d’événement via les méthodes getCurrentPoint et getIntermediatePoints, ou les propriétés currentPoint et intermediatePoints. Nous vous recommandons d’utiliser les méthodes getCurrentPoint et getIntermediatePoints car vous pouvez spécifier le contexte des données du pointeur.

Astuce  Pour cet exemple, un seul objet est associé à une reconnaissance de mouvement. Si votre application contient un grand nombre d’objets qui peuvent être manipulés (tels que des puzzles), envisagez de créer dynamiquement la reconnaissance de mouvement uniquement lorsque l’entrée du pointeur est détectée sur un objet cible. La reconnaissance de mouvement peut être détruite lorsque la manipulation est terminée (voir Entrée : exemple de mouvements instanciables). Pour éviter la surcharge de création et de destruction de reconnaissances de mouvement, créez un petit pool de reconnaissances de mouvement lors de l’initialisation et assignez-les dynamiquement au fil des besoins.

Dans ce cas, la reconnaissance de mouvement (_gestureRecognizer) écoute et traite tous les événements de pointeur et de mouvement.


/// <summary> 
/// InputProcessor is a thin wrapper for pointer event handling and gesture detection.
/// Defines an InputProcessor class that takes all pointer event data and feeds it to
/// a GestureRecognizer for processing of the manipulation gestures 
/// as configured in ManipulationManager.js.
/// </summary>
(function () {
    "use strict";
    WinJS.Namespace.define("Manipulator", {
        InputProcessor: WinJS.Class.define(function () {
            // Constructor.
            this._gestureRecognizer = new Windows.UI.Input.GestureRecognizer();
            this._downPoint = null;
            this._lastState = null;
        }, {
            // Instance members.
            element: {
                /// <summary> 
                /// The manipulable element.
                /// </summary>
                get: function () {
                    if (!this._element) {
                        return null;
                    }
                    return this._element;
                },
                set: function (value) {
                    this._element = value;
                    this._setupElement();
                }
            },
            parent: {
                /// <summary> 
                /// The container that defines the coordinate space used
                /// for transformations during manipulation of the target.
                /// </summary>
                get: function () {
                    if (!this._parent) {
                        return null;
                    }
                    return this._parent;
                },
                set: function (value) {
                    this._parent = value;
                }
            },
            getRecognizer: function () {
                /// <summary>
                /// The gesture recognition object.
                /// </summary>
                return this._gestureRecognizer;
            },
            getDown: function () {
                /// <summary>
                /// The pointer data for the pointerdown event.
                /// </summary>
                return this._downPoint;
            },
            _setupElement: function () {
                /// <summary> 
                /// Declare the event listeners for the pointer events on the target.
                /// </summary>
                var that = this;
                this._element.addEventListener("pointerdown",
                    function (evt) { Manipulator.InputProcessor._handleDown(that, evt); },
                    false);
                this._element.addEventListener("pointermove",
                    function (evt) { Manipulator.InputProcessor._handleMove(that, evt); },
                    false);
                this._element.addEventListener("pointerup",
                    function (evt) { Manipulator.InputProcessor._handleUp(that, evt); },
                    false);
                this._element.addEventListener("pointercancel",
                    function (evt) { Manipulator.InputProcessor._handleCancel(that, evt); },
                    false);
                this._element.addEventListener("wheel",
                    function (evt) { Manipulator.InputProcessor._handleMouse(that, evt); },
                    false);
            }
        }, {
            // Static members.
            _handleDown: function (that, evt) {
                /// <summary> 
                /// Handler for the pointerdown event.
                /// </summary>
                /// <param name="that" type="Object">
                /// The InputProcessor object handling this event.
                /// </param>
                /// <param name="evt" type="Event">
                /// The event object.
                /// </param>
                var pp = evt.getCurrentPoint(that._parent);
                that._element.setPointerCapture(pp.pointerId);
                that._gestureRecognizer.processDownEvent(pp);

                // Prevent propagation of this event to additional event handlers.
                evt.stopImmediatePropagation();

                // Capture the pointer location for this event.
                that._downPoint = { x: pp.position.x, y: pp.position.y };
            },
            _handleMove: function (that, evt) {
                /// <summary> 
                /// Handler for the pointermove event.
                /// </summary>
                /// <param name="that" type="Object">
                /// The InputProcessor object handling this event.
                /// </param>
                /// <param name="evt" type="Event">
                /// The event object.
                /// </param>
                var pps = evt.getIntermediatePoints(that._parent);
                that._gestureRecognizer.processMoveEvents(pps);

                // Prevent propagation of this event to additional event handlers.
                evt.stopImmediatePropagation();
            },
            _handleUp: function (that, evt) {
                /// <summary> 
                /// Handler for the pointerup event.
                /// </summary>
                /// <param name="that" type="Object">
                /// The InputProcessor object handling this event.
                /// </param>
                /// <param name="evt" type="Event">
                /// The event object.
                /// </param>
                var pp = evt.getCurrentPoint(that._parent);
                that._gestureRecognizer.processUpEvent(pp);

                // Prevent propagation of this event to additional event handlers.
                evt.stopImmediatePropagation();
            },
            _handleCancel: function (that, evt) {
                /// <summary> 
                /// Handler for the pointercancel event.
                /// </summary>
                /// <param name="that" type="Object">
                /// The InputProcessor object handling this event.
                /// </param>
                /// <param name="evt" type="Event">
                /// The event object.
                /// </param>
                that._gestureRecognizer.completeGesture();

                // Prevent propagation of this event to additional event handlers.
                evt.stopImmediatePropagation();
            },
            _handleMouse: function (that, evt) {
                /// <summary> 
                /// Handler for the mouse wheel event.
                /// </summary>
                /// <param name="that" type="Object">
                /// The InputProcessor object handling this event.
                /// </param>
                /// <param name="evt" type="Event">
                /// The event object.
                /// </param>
                var pp = evt.getCurrentPoint(that._parent);
                that._gestureRecognizer.processMouseWheelEvent(pp, evt.shiftKey, evt.ctrlKey);

                // Prevent propagation of this event to additional event handlers.
                evt.stopImmediatePropagation();
                evt.preventDefault();
            }
        })
    });
})();


Traitez la manipulation.

Nous utilisons ici une classe du gestionnaire de manipulation (ManipulationManager) pour définir les comportements et les contraintes de manipulation pour l’objet GestureRecognizer. Cet objet a été défini dans InputProcessor (_inputProcessor) qui a été décrit à l’étape précédente.


/// <summary> 
/// ManipulationManager is the manipulation processing engine for the 
/// GestureRecognizer object defined in InputProcessor.js.
/// Different components and behaviors of manipulation (rotate, translate, zoom, 
/// and inertia) can be enabled, disabled, and customized as required.
/// </summary>
(function () {
    "use strict";
    WinJS.Namespace.define("Manipulator", {
        ManipulationManager: WinJS.Class.define(function () {
            // Constructor.
            // Create an input processor.
            this._inputProcessor = new Manipulator.InputProcessor();
            // Initialize the manipulation movement and end handlers.
            this._endHandler = null;
            this._moveHandler = null;
            // Create the transform matrices used for manipulating
            // and resetting the target.
            this._currentTransform = new MSCSSMatrix();
            this._initialTransform = new MSCSSMatrix();
            // Initialize the transform matrices values.
            this._initialTransformParams = {
                translation: { x: 0, y: 0 },
                rotation: 0,
                scale: 1
            };
            this._currentTransformParams = {
                translation: { x: 0, y: 0 },
                rotation: 0,
                scale: 1
            };
        }, {
            // Instance members.
            configure: function (scale, rotate, translate, inertia,
                                initialScale, initialRotate, initialTranslate) {
                /// <summary> 
                /// Define the behaviors of the ManipulationManager object.
                /// </summary>
                /// <param name="scale" type="Boolean">
                /// True if scaling is enabled.
                /// </param>
                /// <param name="rotate" type="Boolean">
                /// True if rotation is enabled.
                /// </param>
                /// <param name="translate" type="Boolean">
                /// True if translation is enabled.
                /// </param>
                /// <param name="inertia" type="Boolean">
                /// True if inertia is enabled.
                /// </param>
                /// <param name="initialScale" type="Number">
                /// The initial scale factor.
                /// </param>
                /// <param name="initialRotate" type="Number">
                /// The initial rotation value.
                /// </param>
                /// <param name="initialTranslate" type="Object">
                /// The initial translation values (x,y).
                /// </param>

                // Get the GestureRecognizer associated with this manipulation manager.
                var gr = this._inputProcessor.getRecognizer();
                // Set the manipulations supported by the GestureRecognizer if the
                // interaction is not already being processed.
                if (!gr.isActive) {
                    var settings = 0;
                    if (scale) {
                        settings |= Windows.UI.Input.GestureSettings.manipulationScale;
                        if (inertia) {
                            settings |= Windows.UI.Input.GestureSettings.manipulationScaleInertia;
                        }
                    }
                    if (rotate) {
                        settings |= Windows.UI.Input.GestureSettings.manipulationRotate;
                        if (inertia) {
                            settings |= Windows.UI.Input.GestureSettings.manipulationRotateInertia;
                        }
                    }
                    if (translate) {
                        settings |= Windows.UI.Input.GestureSettings.manipulationTranslateX |
                            Windows.UI.Input.GestureSettings.manipulationTranslateY;
                        if (inertia) {
                            settings |= Windows.UI.Input.GestureSettings.manipulationTranslateInertia;
                        }
                    }

                    // Cache a reference to the current object.
                    var that = this;

                    // If any manipulation is supported, declare the manipulation event listeners.
                    if (scale || rotate || translate) {
                        gr.addEventListener('manipulationstarted',
                            function (evt) { Manipulator.ManipulationManager._manipulationStarted(that, evt); },
                            false);
                        gr.addEventListener('manipulationupdated',
                            function (evt) { Manipulator.ManipulationManager._manipulationUpdated(that, evt); },
                            false);
                        gr.addEventListener('manipulationended',
                            function (evt) { Manipulator.ManipulationManager._manipulationEnded(that, evt); },
                            false);
                    }

                    gr.gestureSettings = settings;

                    // Initialize the transform matrices.
                    this._currentTransformParams.scale = initialScale;
                    this._currentTransformParams.rotation = initialRotate;
                    this._currentTransformParams.translation = initialTranslate;

                    this._initialTransformParams.scale = initialScale;
                    this._initialTransformParams.rotation = initialRotate;
                    this._initialTransformParams.translation = initialTranslate;

                    // Set the transformation values.
                    if (initialRotate) {
                        this._initialTransform = this._initialTransform.rotate(initialRotate);
                    }
                    else {
                        this._currentTransformParams.rotation = 0;
                        this._initialTransformParams.rotation = 0;
                    }
                    if (initialTranslate) {
                        this._initialTransform = this._initialTransform.translate(initialTranslate.x, initialTranslate.y);
                    }
                    else {
                        this._currentTransformParams.translation = { x: 0, y: 0 };
                        this._initialTransformParams.translation = { x: 0, y: 0 };
                    }
                    if (initialScale) {
                        this._initialTransform = this._initialTransform.scale(initialScale);
                    }
                    else {
                        this._currentTransformParams.scale = 1;
                        this._initialTransformParams.scale = 1;
                    }

                    this._currentTransform = this._initialTransform;
                }
            },
            setElement: function (elm) {
                /// <summary> 
                /// Set the manipulable object.
                /// </summary>
                /// <param name="elm" type="Object">
                /// The object that supports manipulation.
                /// </param>
                this._inputProcessor.element = elm;
                // Set the transform origin for rotation and scale manipulations.
                this._inputProcessor.element.style.msTransformOrigin = "0 0";
            },
            setParent: function (elm) {
                /// <summary> 
                /// Set the parent of the manipulable object.
                /// </summary>
                /// <param name="elm" type="Object">
                /// The parent of the object that supports manipulation.
                /// </param>
                this._inputProcessor.parent = elm;
            },
            registerEndHandler: function (handler) {
                /// <summary> 
                /// Register handler to be called after the manipulation is complete.
                /// </summary>
                /// <param name="handler" type="Function">
                /// The manipulationended event handler.
                /// </param>
                this._endHandler = handler;
            },
            registerMoveHandler: function (arg, handler) {
                /// <summary> 
                /// Register handler to be called when manipulation is under way.
                /// </summary>
                /// <param name="args">
                /// Arguments passed to the move handler function.
                /// </param>
                /// <param name="handler" type="Function">
                /// The manipulationupdated event handler.
                /// </param>
                this._moveHandlerArg = arg;
                this._moveHandler = handler;
            },
            resetAllTransforms: function () {
                /// <summary> 
                /// Reset the ManipulationManager object to its initial state.
                /// </summary>

                // Check that the element has been registered before before attempting to reset.
                if (this._inputProcessor.element) {
                    // Reapply the initial transform
                    this._inputProcessor.element.style.transform = this._initialTransform.toString();
                    this._currentTransform = this._initialTransform;

                    // Reset the current transform parameters to their initial values.
                    this._currentTransformParams.translation = this._initialTransformParams.translation;
                    this._currentTransformParams.rotation = this._initialTransformParams.rotation;
                    this._currentTransformParams.scale = this._initialTransformParams.scale;
                }
            },

            _applyMotion: function (pivot, translation, rotation, scaling) {
                /// <summary> 
                /// Apply the manipulation transform to the target.
                /// </summary>
                /// <param name="pivot" type="Object">
                /// The X,Y values for the rotation and scaling pivot point.
                /// </param>
                /// <param name="translation" type="Object">
                /// The X,Y values for the translation delta.
                /// </param>
                /// <param name="rotation" type="Number">
                /// The angle of rotation.
                /// </param>
                /// <param name="scaling" type="Number">
                /// The scaling factor.
                /// </param>

                // Create the transform, apply parameters, and multiply by the current transform matrix.
                var transform = new MSCSSMatrix().translate(pivot.x, pivot.y).
                    translate(translation.x, translation.y).
                    rotate(rotation).
                    scale(scaling).
                    translate(-pivot.x, -pivot.y).multiply(this._currentTransform);

                this._inputProcessor.element.style.transform = transform.toString();
                this._currentTransform = transform;
            },

            _updateTransformParams: function (delta) {
                /// <summary> 
                /// Update the current transformation parameters based on the new delta.
                /// </summary>
                /// <param name="that" type="Object">
                /// The change in rotation, scaling, and translation.
                /// </param>
                this._currentTransformParams.translation.x = this._currentTransformParams.translation.x + delta.translation.x;
                this._currentTransformParams.translation.y = this._currentTransformParams.translation.y + delta.translation.y;
                this._currentTransformParams.rotation = this._currentTransformParams.rotation + delta.rotation;
                this._currentTransformParams.scale = this._currentTransformParams.scale * delta.scale;
            }
        }, {
            // Static members.
            _manipulationStarted: function (that, evt) {
                /// <summary> 
                /// The manipulationstarted event handler.
                /// </summary>
                /// <param name="that" type="Object">
                /// ManipulationManager object on which the event was performed.
                /// </param>
                /// <param name="evt" type="Event">
                /// The event data.
                /// </param>
                Manipulator.ManipulationManager._manipulationHelper(that, evt);
            },
            _manipulationUpdated: function (that, evt) {
                /// <summary> 
                /// The manipulationupdated event handler.
                /// </summary>
                /// <param name="that" type="Object">
                /// ManipulationManager object on which the event was performed.
                /// </param>
                /// <param name="evt" type="Event">
                /// The event data.
                /// </param>
                Manipulator.ManipulationManager._manipulationHelper(that, evt);
            },
            _manipulationEnded: function (that, evt) {
                /// <summary> 
                /// The manipulationended event handler.
                /// </summary>
                /// <param name="that" type="Object">
                /// ManipulationManager object on which the event was performed.
                /// </param>
                /// <param name="evt" type="Event">
                /// The event data.
                /// </param>
                // Pass the event to the manipulation helper function.
                Manipulator.ManipulationManager._manipulationHelper(that, evt);

                // Call the manipulationended handler, if registered.
                if (that._endHandler) {
                    that._endHandler();
                }
            },
            _manipulationHelper: function (that, evt) {
                /// <summary> 
                /// Helper function for calculating and applying the transformation parameter deltas.
                /// </summary>
                /// <param name="that" type="Object">
                /// ManipulationManager object on which the event was performed.
                /// </param>
                /// <param name="evt" type="Event">
                /// The event data.
                /// </param>

                if (evt.delta) {
                    // Rotation/scaling pivot point.
                    var pivot = { x: evt.position.x, y: evt.position.y };

                    // Translation values.
                    var translation = { x: evt.delta.translation.x, y: evt.delta.translation.y };

                    // Rotation angle.
                    var rotation = evt.delta.rotation;

                    // Scale factor.
                    var scale = evt.delta.scale;

                    // Group the transformation parameter deltas.
                    var delta = {
                        pivot: pivot,
                        translation: translation,
                        rotation: rotation,
                        scale: scale
                    };

                    // Apply the manipulation movement constraints.
                    if (that._moveHandler) {
                        delta = that._moveHandler(that._moveHandlerArg, delta, that._currentTransformParams, that._currentTransform);
                    }

                    // Update the transformation parameters with fresh deltas.
                    that._updateTransformParams(delta);

                    // Apply the transformation.
                    that._applyMotion(delta.pivot, delta.translation, delta.rotation, delta.scale);
                }
            },
            FixPivot: WinJS.Class.define(function () {
            /// <summary>
            /// Constrain the center of manipulation (or pivot point) to a set of X,Y coordinates,  
            /// instead of the centroid of the pointers associated with the manipulation.
            /// <param name="pivot" type="Object">
            /// The pivot coordinates for the ManipulationManager object.
            /// </param>
            /// <param name="delta" type="Object">
            /// The transformation parameter deltas (pivot, delta, rotation, scale).
            /// </param>
            /// </summary>
            }, {
            }, {
                MoveHandler: function (pivot, delta) {
                    delta.pivot = pivot;
                    return delta;
                }
            }),
        })
    });
})();


Des liens vers des exemples plus complexes sont proposés à la section Rubriques associées, en bas de cette page.

Exemple complet

Voir Code complet des actions de manipulation.

Récapitulatif et étapes suivantes

Ce guide de démarrage rapide vous a appris à gérer les événements d’action de manipulation dans les applications du Windows Store en JavaScript.

Les actions de manipulation sont utiles pour prendre en charge et gérer des interactions complexes telles que le glissement pour effectuer un mouvement panoramique, une réorganisation/un déplacement, un zoom et une rotation.

Voir la rubrique Entrée : exemple de mouvements instanciables pour consulter un exemple plus complexe de gestion des mouvements.

Remarque  Cet exemple n’est pas conforme aux recommandations du langage tactile de Windows concernant les interactions personnalisées. Certaines actions statiques ont été redéfinies à des fins didactiques.

Pour la gestion des interactions statiques (telles que le glissement, le balayage, la rotation, le pincement et l’étirement), voir Démarrage rapide : actions statiques.

Pour plus d’informations sur le langage tactile de Windows 8, voir Conception de l’interaction tactile.

Rubriques associées

Développeurs
Réponse à l’interaction utilisateur
Développement d’applications du Windows Store (JavaScript et HTML)
Démarrage rapide : pointeurs
Démarrage rapide : manipulations et mouvements DOM
Démarrage rapide : actions statiques
Concepteurs
Conception de l’interaction tactile

 

 

Afficher:
© 2014 Microsoft