MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

The MSGestureChange handler for each individual piece (onGestureChange) then takes all the
translation, rotation, and scaling data in the eventArgs object and applies them with CSS. This shows
how convenient it is that all those properties are already reported in the coordinate space we need:
function onGestureChange(e) {
var elt = e.target;
var m = new MSCSSMatrix(elt.style.msTransform);
}
elt.style.msTransform = m.
translate(e.offsetX, e.offsetY).
translate(e.translationX, e.translationY).
rotate(e.rotation * 180 / Math.PI).
scale(e.scale).
translate(-e.offsetX, -e.offsetY);
There’s a little more going on in the sample, but what we’ve shown here are the important parts.
Clearly, if you didn’t want to support certain kinds of manipulations, you’d again simply ignore certain
properties in the event args object.
Scenario 2 of this sample has the same output but is implemented a little differently. As you can see
in its initialize function (js/gesture.js), the only events that are initially registered apply to the entire
“table top” that contains the black background and a surrounding border. Gesture objects for the
individual pieces are created and attached to a pointer within the MSPointerDown event
(onTableTopPointerDown). This approach is much more efficient and scalable to a puzzle app that has
hundreds or even thousands of pieces, as gesture objects are held only for as long as a particular piece
is being manipulated. Those manipulations are also like those of Scenario 1, where all the
MSGestureChange properties are applied through a CSS transform. For further details, refer to the code
comments in js/gesture.js, as they are quite extensive.
Scenario 3 of this sample provides another demonstration of performing translate, pinch-stretch, and
rotate gestures using the mouse wheel. As shown in the PointerEvents example, the only thing you need
to do here is process the wheel event, set eventArgs.pointerId to 1, and pass that onto your
MSPointerDown handler that then adds the pointer to the gesture object:
elt.addEventListener("wheel", onMouseWheel, false);
function onMouseWheel(e) {
e.pointerId = 1; // Fixed pointerId for MouseWheel
onPointerDown(e);
}
Again, that’s all there is to it. (I love it when it’s so simple!) As an exercise, you might try adding this
little bit of code to Scenarios 1 and 2 as well.
The Gesture Recognizer
With inertial gestures, which continue to send some number of MSGestureChange events after pointers
are released, you might be asking this question: What, exactly, controls those events? That is, there is
386