CreateJS에서 핀치 줌을 지원합니까?

Question

CreateJS에서 핀치 줌 터치 제스처가 지원됩니까? docs에서 아무것도 찾을 수 없습니다.

감사

Answer 1

제스처에 대한 기본 지원은 없지만 enable it 터치 이벤트는 마우스 이벤트로 변환되고 pointerID 속성으로 식별됩니다. (I 최신 안드로이드 넘어 그것을 테스트하지 않은 있지만.)이를 바탕으로 나는 내 프로젝트에서 핀치 줌 제스처 구현 수 있었다 이것은 내 프로젝트에서 코드 조각입니다

:

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) { 
    .... 
} 

참고 : 나는 이동 및 확대/축소를 수행합니다. 무대 자체는 다양한 devicePixelRatio (망막 디스플레이 등)로 인해 확대되었으므로 globalToLocal 기능을 사용해야합니다.

Answer 2

번호 EaselJS 정상 마우스 이벤트를 처리하는 (클릭을 결정하는)뿐만 아니라, 일부 드래그 이벤트, 드래그 대상을 결정하는 일반적인 사용이 때문이다. 또한 터치 이벤트는 마우스 이벤트 (멀티 터치 포함)로 변환됩니다.

현재 스 와이프, 꼬집음 및 기타 제스처는 프레임 워크에서 처리하지 않습니다.