2014-12-26 59 views

回答

3

手势没有本地支持,但一旦您将触摸事件转换为鼠标事件并通过pointerID属性进行标识。在此基础上,我已经能够实现双指缩放手势在我的项目(虽然我没有测试它超出了目前最新的Android。)

这是我的项目的代码段:

stage.on("mousedown", function (evt : createjs.MouseEvent) { 
    if (evt.pointerID == 0 || evt.pointerID == -1) { //touch 1 or mouse 
     touch1 = new createjs.Point(stage.globalToLocal(evt.stageX, 0).x, stage.globalToLocal(0, evt.stageY).y); 
    } else if (evt.pointerID == 1) { //touch 2 
     touch2 = new createjs.Point(stage.globalToLocal(evt.stageX, 0).x, stage.globalToLocal(0, evt.stageY).y); 
    } 
}); 

stage.on("pressup", function (evt : createjs.MouseEvent) { 
    if (evt.pointerID == 0 || evt.pointerID == -1) { //touch 1 or mouse 
     touch1 = null; 
    } else if (evt.pointerID == 1) { //touch 2 
     touch2 = null; 
    } 
}); 

stage.on("pressmove", function(evt : createjs.MouseEvent) { 
    if (evt.pointerID == -1 || evt.pointerID == 0) { 
     var touch = touch1; 
    } else if (evt.pointerID == 1) { 
     var touch = touch2; 
    } 

    var dX = stage.globalToLocal(evt.stageX, 0).x - touch.x; 
    var dY = stage.globalToLocal(0, evt.stageY).y - touch.y; 

    if (touch1 && touch2) var oldDist = distanceP(touch1, touch2); 

    touch.x += dX; 
    touch.y += dY; 

    //if both fingers are used zoom and move the canvas 
    if (touch1 && touch2) { 
     var newDist = distanceP(touch1, touch2); 
     var newZoom = zoom * newDist/oldDist; 
     zoomMap(newZoom, new createjs.Point((touch1.x+touch2.x)/2, (touch1.y + touch2.y)/2)) 

     //if both fingers are used apply only half of the motion to each of them 
     dX /= 2; 
     dY /= 2; 
    } 

    map.x += dX; 
    map.y += dY; 

    stage.update(); 
}); 

function distanceP(p1 : createjs.Point, p2 : createjs.Point) : number { 
    return Math.sqrt((p2.x-p1.x)*(p2.x-p1.x) + (p2.y-p1.y)*(p2.y-p1.y)); 
} 

function zoomMap(newZoom : number, zoomCenter : createjs.Point) { 
    .... 
} 

注:我移动和缩放DO,称为Map。舞台本身由于各种devicePixelRatio(视网膜显示等)而放大,这就是为什么使用globalToLocal函数的原因。

1

号EaselJS处理正常的鼠标事件(判断被点击的),以及一些拖动事件中,由于确定拖动目标是一种常见的用法。另外,触摸事件被转换为鼠标事件(包括多点触摸)。

此时,框架不处理诸如滑动,捏等手势之类的事情。

+0

在这种情况下,我将能够建立捏缩放检测,只有问题是如何正确触摸事件转换为鼠标事件?我如何识别第二次触摸并区分两个手指的移动?谢谢 –

+0

查看ui/Touch课程。它将触摸ID传递到舞台,然后使用MouseEvent进行调度。 MouseEvent包含一个nativeEvent,pointerID,并指示它是否是主(鼠标)指针。 http://www.createjs.com/Docs/EaselJS/classes/MouseEvent.html – Lanny