Código completo de gestos y manipulaciones de DOM (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente
En este tema, se proporciona el ejemplo de código completo usado en Inicio rápido: punteros.
Este tema contiene estas secciones:
- Tecnologías
- Requisitos
- Ver el código ()
Ubicación de descarga
Este ejemplo no se puede descargar.
Tecnologías
| Lenguajes de programación | C++ |
| Modelos de programación | Windows Runtime |
Requisitos
| Cliente mínimo compatible | Windows 8 |
| Servidor mínimo compatible | Windows Server 2012 |
| SDK mínimo necesario | Microsoft Visual Studio Express 2012 para Windows 8 |
Ver el código ()
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();
})();