DOM-Gesten und -Manipulationen (vollständiger Code, HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Dieses Thema enthält das in Schnellstart: Zeiger verwendete vollständige Codebeispiel.

Dieses Thema enthält die folgenden Abschnitte:

Technologien
Anforderungen
Anzeigen des Codes ()

Downloadort

Dieses Beispiel kann nicht heruntergeladen werden.

Technologien

Programmiersprachen	C++
Programmiermodelle	Windows Runtime

Anforderungen

Unterstützte Mindestversion (Client)	Windows 8
Unterstützte Mindestversion (Server)	Windows Server 2012
Mindestens erforderliches SDK	Microsoft Visual Studio Express 2012 für Windows 8

Anzeigen des Codes ()

default.css

body {
    overflow: hidden;
    position: relative;
}

div #targetContainer {
/*
Set the width and height properties of the target container to fill the viewport. 
You can set these properties to 100%, but we use 100vw (viewport width) and 100vh (viewport height).
See https://go.microsoft.com/fwlink/?LinkID=301480 for more detail on CSS units supported by Internet Explorer.
*/
    height: 100vw;
    width: 100vh;
    overflow: hidden;
    position: absolute;
}

div #colorMixer {
/*
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;
    -ms-transform-origin: 0px 0px;
    position: absolute;
    background-color: black;
    border-color: white;
    border-width: thick;
    border-style: solid;
}

div #colorSelector {
    position: relative;
}

div #eventLog {
    -ms-overflow-style:scrollbar;
}

input.Red {
    background-color: rgb(255,0,0);
}

input.Green {
    background-color: rgb(0,255,0);
}

input.Blue {
    background-color: rgb(0,0,255);
}

default.html

<html>
<head>
    <meta charset="utf-8" />
    <title>PointerInput</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <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/default.js"></script>
</head>
<body>
    <div class="TargetContainer" id="targetContainer">
        <div id="colorMixer">
            <input type="radio" name="color" value="R" title="Red" id="red" class="Red" /><label for="red" id="labelRed">Red</label>
            <input type="radio" name="color" value="G" title="Green" id="green" class="Green" /><label for="green" id="labelGreen">Green</label>
            <input type="radio" name="color" value="B" title="Blue" id="blue" class="Blue" /><label for="blue" id="labelBlue">Blue</label>
            <div id="targetLog"></div>
            <div id="eventLog"></div>
        </div>
    </div>
</body>
</html>

default.js

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                initialize();
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    var _width = 640;
    var _height = 640;

    var _pointerInfo;
    var _targetLog;

    var _selectedColor;
    var _colorRed, _colorGreen, _colorBlue;

    // Color-specific data object.
    //   value: The color value (r, g, or b)
    //   rotation: The rotation value used to calculate color value.
    //   matrix: The transform matrix of the target.
    function colorInfo(value, rotation, matrix) {
        this.value = value;
        this.rotation = rotation;
        this.matrix = matrix;
    }

    function initialize() {
        // Configure the target.
        setTarget();

        // Initialize color tracking.
        setColors();
    }

    // Configure the interaction target.
    function setTarget() {
        //  Set up the target position, size, and transform.
        colorMixer.style.width = _width + "px";
        colorMixer.style.height = _height + "px";
        colorMixer.style.msTransform = (new MSCSSMatrix()).
            translate((window.innerWidth - parseInt(colorMixer.style.width)) / 2.0,
            (window.innerHeight - parseInt(colorMixer.style.height)) / 2.0);

        // Create gesture recognizer.
        var msGesture = new MSGesture();
        msGesture.target = colorMixer;
        colorMixer.gesture = msGesture;
        // Expando property for handling multiple pointer devices.
        colorMixer.gesture.pointerType = null;

        // Expando property to track pointers.
        colorMixer.pointers = [];

        // Declare event handlers.
        colorMixer.addEventListener("pointerdown", onPointerDown, false);
        colorMixer.addEventListener("pointerup", onPointerUp, false);
        colorMixer.addEventListener("pointercancel", onPointerCancel, false);
        colorMixer.addEventListener("lostpointercapture", onLostPointerCapture, false);
        colorMixer.addEventListener("MSGestureChange", onMSGestureChange, false);
        colorMixer.addEventListener("MSGestureTap", onMSGestureTap, false);
        colorMixer.addEventListener("MSGestureEnd", onMSGestureEnd, false);
        colorMixer.addEventListener("MSGestureHold", onMSGestureHold, false);
    }

    // Initialize values and event listeners for color tracking.
    function setColors() {
        var m = new MSCSSMatrix(colorMixer.style.msTransform);
        _colorRed = new colorInfo(0, 0, m);
        _colorGreen = new colorInfo(0, 0, m);
        _colorBlue = new colorInfo(0, 0, m);

        document.getElementById("red").addEventListener("click", onColorChange, false);
        document.getElementById("green").addEventListener("click", onColorChange, false);
        document.getElementById("blue").addEventListener("click", onColorChange, false);
    }

    // Re-draw target based on transform matrix associated with color selection.
    function onColorChange(e) {
        switch (e.target.id) {
            case "red":
                colorMixer.style.msTransform = _colorRed.matrix;
                break;
            case "green":
                colorMixer.style.msTransform = _colorGreen.matrix;
                break;
            case "blue":
                colorMixer.style.msTransform = _colorBlue.matrix;
                break;
        }
        _selectedColor = e.target.id;

        eventLog.innerText = "Color change";
        targetLog.innerText = colorMixer.style.msTransform;
    }
    // Pointer down handler: Attach the pointer to a gesture object.
    function onPointerDown(e) {
        // Do not attach pointer if no color selected.
        if (_selectedColor === undefined)
            return;
        _selectedColor = getSelectedColor();

        // Process pointer.
        if (e.target === this) {
            this.style.borderStyle = "double";
            //  Attach first contact and track device.
            if (this.gesture.pointerType === null) {
                this.gesture.addPointer(e.pointerId);
                this.gesture.pointerType = e.pointerType;
            }
                // Attach subsequent contacts from same device.
            else if (e.pointerType === this.gesture.pointerType) {
                this.gesture.addPointer(e.pointerId);
            }
                // New gesture recognizer for new pointer type.
            else {
                var msGesture = new MSGesture();
                msGesture.target = e.target;
                e.target.gesture = msGesture;
                e.target.gesture.pointerType = e.pointerType;
                e.target.gesture.addPointer(e.pointerId);
            }
        }
        eventLog.innerText = "Pointer down";
    }

    // Get the current color.
    function getSelectedColor() {
        var colorSelection = document.getElementsByName("color");
        for (var i = 0; i < colorSelection.length; i++) {
            if (colorSelection[i].checked)
                return colorSelection[i].id;
        }
    }

    // Gesture change handler: Process gestures for translation, rotation, and scaling.
    // For this example, we don't track pointer movements.
    function onMSGestureChange(e) {
        // Get the target associated with the gesture event.
        var elt = e.gestureObject.target;
        // Get the matrix transform for the target.
        var matrix = new MSCSSMatrix(elt.style.msTransform);

        // Process gestures for translation, rotation, and scaling.
        e.target.style.msTransform = matrix.
            translate(e.offsetX, e.offsetY).
            translate(e.translationX, e.translationY).
            rotate(e.rotation * 180 / Math.PI).
            scale(e.scale).
            translate(-e.offsetX, -e.offsetY);

        // Mix the colors based on rotation value.
        switch (_selectedColor) {
            case "red":
                _colorRed.rotation += ((e.rotation * 180 / Math.PI));
                _colorRed.rotation = _colorRed.rotation % 360;
                targetLog.innerText = _colorRed.rotation.toString();
                if (_colorRed.rotation >= 0)
                    _colorRed.value = parseInt(Math.abs(_colorRed.rotation) * (256 / 360));
                else
                    _colorRed.value = parseInt((360 - Math.abs(_colorRed.rotation)) * (256 / 360));
                document.getElementById("labelRed").innerText = _colorRed.value.toString();
                _colorRed.matrix = matrix;
                break;
            case "green":
                _colorGreen.rotation += ((e.rotation * 180 / Math.PI));
                _colorGreen.rotation = _colorGreen.rotation % 360;
                targetLog.innerText = _colorGreen.rotation.toString();
                if (_colorGreen.rotation >= 0)
                    _colorGreen.value = parseInt(Math.abs(_colorGreen.rotation) * (256 / 360));
                else
                    _colorGreen.value = parseInt((360 - Math.abs(_colorGreen.rotation)) * (256 / 360));
                document.getElementById("labelGreen").innerText = _colorGreen.value.toString();
                _colorGreen.matrix = matrix;
                break;
            case "blue":
                _colorBlue.rotation += ((e.rotation * 180 / Math.PI));
                _colorBlue.rotation = _colorBlue.rotation % 360;
                if (_colorBlue.rotation >= 0)
                    _colorBlue.value = parseInt(Math.abs(_colorBlue.rotation) * (256 / 360));
                else
                    _colorBlue.value = parseInt((360 - Math.abs(_colorBlue.rotation)) * (256 / 360));
                document.getElementById("labelBlue").innerText = _colorBlue.value.toString();
                _colorBlue.matrix = matrix;
                break;
        }
        e.target.style.backgroundColor = "rgb(" + _colorRed.value + ", " + _colorGreen.value + ", " + _colorBlue.value + ")";
        targetLog.innerText = e.target.style.msTransform;
        eventLog.innerText = "Gesture change";
    }

    // Tap gesture handler: Display event.
    // The touch language described in Touch interaction design (https://go.microsoft.com/fwlink/?LinkID=268162),
    // specifies that the tap gesture should invoke an elements primary action (such as launching an application 
    // or executing a command). 
    // The primary action in this sample (color mixing) is performed through the rotation gesture.
    function onMSGestureTap(e) {
        eventLog.innerText = "Gesture tap";
    }

    // Gesture end handler: Display event.
    function onMSGestureEnd(e) {
        if (e.target === this) {
            this.style.borderStyle = "solid";
        }
        eventLog.innerText = "Gesture end";
    }

    // Hold gesture handler: Display event.
    function onMSGestureHold(e) {
        eventLog.innerText = "Gesture hold";
    }

    // Pointer up handler: Display event.
    function onPointerUp(e) {
        eventLog.innerText = "Pointer up";
    }

    // Pointer cancel handler: Display event.
    function onPointerCancel(e) {
        eventLog.innerText = "Pointer canceled";
    }

    // Pointer capture lost handler: Display event.
    function onLostPointerCapture(e) {
        eventLog.innerText = "Pointer capture lost";
    }
    app.start();
})();

Freigeben über