Windows803响应用户交互.docx

2.打开js文件夹下的default.js文件，用以下代码覆盖原代码：

JavaScript

（function（）{

"usestrict";

varscenarios={url:

"/html/gesture.html"};

functionactivated（eventObject）{

if（eventObject.detail.kind===Windows.ApplicationModel.Activation.ActivationKind.launch）{

//UsesetPromisetoindicatetothesystemthatthesplashscreenmustnotbetorndown

//untilafterprocessAllandnavigatecompleteasynchronously.

eventObject.setPromise（WinJS.UI.processAll（）.then（function（）{

//Navigatetoeitherthefirstscenarioortothelastrunningscenario

//beforesuspensionortermination.

varurl=WinJS.Application.sessionState.lastUrl||scenarios.url;

returnWinJS.Navigation.navigate（url）;

}））;

}

}

WinJS.Navigation.addEventListener（"navigated",function（eventObject）{

varurl=eventObject.detail.location;

varhost=document.getElementById（"contentHost"）;

//Callunloadmethodoncurrentscenario,ifthereisone

host.winControl&&host.winControl.unload&&host.winControl.unload（）;

WinJS.Utilities.empty（host）;

eventObject.detail.setPromise（WinJS.UI.Pages.render（url,host,eventObject.detail.state）.then（function（）{

WinJS.Application.sessionState.lastUrl=url;

}））;

}）;

WinJS.Application.addEventListener（"activated",activated,false）;

WinJS.Application.start（）;

}）（）;

3.在js文件夹下新建gesture.js文件，并输入以下代码：

JavaScript

（function（）{

"usestrict";

varpage=WinJS.UI.Pages.define（"/html/gesture.html",{

ready:

function（element,options）{

}

}）;

}）（）;

4.在“usestrict”;语句下面添加以下关于获取颜色的函数

JavaScript

//获取一种颜色

functiongetColorFromIndex（index）{

varcolors=["rgb（0,140,0）","rgb（0,98,140）","rgb（194,74,0）","rgb（89,0,140）","rgb（191,150,0）","rgb（140,0,0）"];

returncolors[index%colors.length];

}

//获取已选颜色在colors数组中的下一个颜色

functiongetNextColorFromColor（color）{

varcolors=["rgb（0,140,0）","rgb（0,98,140）","rgb（194,74,0）","rgb（89,0,140）","rgb（191,150,0）","rgb（140,0,0）"];

returngetColorFromIndex（colors.indexOf（color）+1）;

}

5.下面定义定义一些监听鼠标操作的函数

6.当鼠标按下时，触发的方法如下：

JavaScript

//当鼠标键位按下时触发的方法

functiononTableTopPointerDown（e）{

if（e.currentTarget.gestureObject.pointerType===null）{

e.currentTarget.msSetPointerCapture（e.pointerId）;

e.currentTarget.gestureObject.pointerType=e.pointerType;

e.currentTarget.gestureObject.addPointer（e.pointerId）;

if（e.target===e.currentTarget）{

e.target.targetedContacts.push（e.pointerId）;

}

}

elseif（e.currentTarget.gestureObject.pointerType===e.pointerType）{

e.currentTarget.msSetPointerCapture（e.pointerId）;

e.currentTarget.gestureObject.addPointer（e.pointerId）;

if（e.target===e.currentTarget）{

e.target.targetedContacts.push（e.pointerId）;

}

}

else{

return;

}

if（!

e.target.gestureObject）{

e.target.gestureObject=newMSGesture（）;

e.target.gestureObject.target=e.target;

e.target.gestureObject.pointerType=e.pointerType;

e.target.addEventListener（"MSGestureChange",onPieceGestureChange,false）;

e.target.addEventListener（"MSGestureEnd",onPieceGestureEnd,false）;

e.target.addEventListener（"MSGestureTap",onPieceGestureTap,false）;

e.target.addEventListener（"MSGestureHold",onPieceGestureHold,false）;

e.target.gestureObject.pointerType===e.pointerType;

e.target.gestureObject.addPointer（e.pointerId）;

e.target.parentElement.topmostZ+=1;

e.target.style.zIndex=e.target.parentElement.topmostZ;

}

elseif（e.target.gestureObject.pointerType===e.pointerType）{

e.target.gestureObject.addPointer（e.pointerId）;

e.target.parentElement.topmostZ+=1;

e.target.style.zIndex=e.target.parentElement.topmostZ;

}

}

7.当鼠标按键松开时，触发以下方法

JavaScript

//当鼠标键位抬起时触发的方法

functiononTableTopPointerUp（e）{

vartableTop;

if（e.target===e.currentTarget）{

tableTop=e.target;

}

else{

tableTop=e.target.parentElement;

}

vari=tableTop.targetedContacts.indexOf（e.pointerId）;

if（i!

==-1）{

tableTop.targetedContacts.splice（i,1）;

}

}

8.除了监听鼠标事件外，我们还要监听屏幕的触摸事件。

在实验中，我们在屏幕上绘制了一些小方块，用它们来响应用户的触摸手势的变化

9.以下函数用于响应小方块上的触摸手势

JavaScript

//停止操作小方块时触发的事件

functiononPieceGestureEnd（e）{

cleanUpTileGesture（e.target）;

}

//在小方块上轻敲时触发的方法

functiononPieceGestureTap（e）{

e.target.style.backgroundColor=getNextColorFromColor（e.target.style.backgroundColor）;

cleanUpTileGesture（e.target）;

}

//在小方块上手势保持不变时触发的方法

functiononPieceGestureHold（e）{

e.target.style.msTransform=e.target.startingTransform;

e.target.style.backgroundColor=getColorFromIndex（e.target.startingColorIndex）;

cleanUpTileGesture（e.target）;

}

//在小方块上手势变化时触发的方法

functiononPieceGestureChange（e）{

if（e.target.parentElement.targetedContacts.length!

==0）{

return;

}

varcurrentXform=newMSCSSMatrix（e.target.style.msTransform）;

varcurrentScale=Math.sqrt（currentXform.m11*currentXform.m22-currentXform.m12*currentXform.m21）;

if（e.scale*currentScale>=0.1）{

e.target.style.msTransform=currentXform.translate（e.offsetX,e.offsetY）.

translate（e.translationX,e.translationY）.

rotate（e.rotation*180/Math.PI）.

scale（e.scale）.

translate（-e.offsetX,-e.offsetY）;

}

else{

e.target.style.msTransform=currentXform.translate（e.offsetX,e.offsetY）.

translate（e.translationX,e.translationY）.

rotate（e.rotation*180/Math.PI）.

translate（-e.offsetX,-e.offsetY）;

}

}

10.除此之外，对于面板，我们也给予了触摸手势的支持

JavaScript

//面板上手势变化时触发的方法

functiononTableTopGestureChange（e）{

if（（e.target===e.currentTarget）&&（e.target.targetedContacts.length!

==0））{

varcurrentXform=newMSCSSMatrix（e.target.style.msTransform）;

e.target.style.msTransform=currentXform.

translate（e.offsetX,e.offsetY）.

translate（e.translationX,e.translationY）.

rotate（e.rotation*180/Math.PI）.

scale（e.scale）.

translate（-e.offsetX,-e.offsetY）;

}

}

//在面板上轻敲时触发的方法

functiononTableTopGestureTap（e）{

if（（e.target===e.currentTarget）&&（e.target.targetedContacts.length!

==0））{

e.target.style.msTransform=newMSCSSMatrix（）;

}

e.gestureObject.pointerType=null;

}

//在面板上手势保持不变时触发的方法

functiononTableTopGestureHold（e）{

if（（e.target===e.currentTarget）&&（e.target.targetedContacts.length!

==0））{

initialize（）;

}

e.gestureObject.pointerType=null;

}

11.然后在添加一些工具函数

JavaScript

//手势停止操作面板时触发的方法，用于还原变量

functiononTableTopGestureEnd（e）{

e.gestureObject.pointerType=null;

}

//移除小方块上注册的事件

functioncleanUpTileGesture（elt）{

elt.gestureObject=null;

elt.removeEventListener（"MSGestureChange",onPieceGestureChange）;

elt.removeEventListener（"MSGestureEnd",onPieceGestureEnd）;

elt.removeEventListener（"MSGestureTap",onPieceGestureTap）;

}

12.最后，利用以上函数完成页面的初始化，并为页面的元素添加一些事件处理的句柄

JavaScript

//初始化面板

functioninitialize（）{

varwidth=640;

varheight=360;

varsize=Math.min（width,height）*0.5;

varradius=size/Math.SQRT2+1.0;

varpieces=document.getElementsByClassName（"PuzzlePiece"）;

varangleDelta=2.0*Math.PI/pieces.length;

varangleStart=angleDelta/2.0;

//初始化四个小方块的大小、颜色等属性

for（vari=0;i

varangle=angleStart+i*angleDelta;

pieces[i].style.msTransform=（newMSCSSMatrix（））.translate（-size/2.0,-size/2.0）.

translate（width/2.0+radius*Math.cos（angle）,height/2.0+radius*Math.sin（angle））;

pieces[i].startingTransform=pieces[i].style.msTransform;

pieces[i].style.backgroundColor=getColorFromIndex（i）;

pieces[i].startingColorIndex=i;

pieces[i].style.width=size+"px";

pieces[i].style.height=size+"px";

pieces[i].style.zIndex=i;

pieces[i].gestureObject=null;

}

//初始化整个面板区域的大小、颜色等属性，并注册鼠标点击和手势操作的事件

vartableTop=document.getElementsByClassName（"TableTop"）[0];

tableTop.style.width=width+"px";

tableTop.style.height=height+"px";

tableTop.style.backgroundColor="rgb（0,0,0）";

tableTop.style.msTransform=（newMSCSSMatrix（））;

tableTop.addEventListener（"MSPointerDown",onTableTopPointerDown,true）;

tableTop.addEventListener（"MSPointerUp",onTableTopPointerUp,true）;

tableTop.addEventListener（"MSPointerCancel",onTableTopPointerUp,true）;

tableTop.gestureObject=newMSGesture（）;

tableTop.gestureObject.target=tableTop;

tableTop.gestureObject.pointerType=null;

tableTop.targetedContacts=[];

tableTop.topmostZ=3;

t