Chạm vào Sự kiện không quay trở lại Dữ liệu cảm ứng

Question

Chỉnh sửa: "Điều này không thể thực hiện trong Giao diện người dùng góc" là một câu trả lời hợp lệ, nếu đó thực sự là trường hợp.

Đây là dữ liệu trả về tôi nhận được từ sự kiện chạm. Thiếu sót một cách rõ ràng là bất kỳ liên kết X/Y cảm ứng hữu ích nào (https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches). Đây là một câu hỏi chung chung vô vọng, nhưng dù sao, bất kỳ ý tưởng nào? Đối tượng "sự kiện" được chuyển đến hàm được thực thi khi chạm:

{ 
     "originalEvent": { 
     "isTrusted": true 
     }, 
     "type": "touchstart", 
     "timeStamp": 1450388006795, 
     "jQuery203026962137850932777": true, 
     "which": 0, 
     "view": "$WINDOW", 
     "target": {}, 
     "shiftKey": false, 
     "metaKey": false, 
     "eventPhase": 3, 
     "currentTarget": {}, 
     "ctrlKey": false, 
     "cancelable": true, 
     "bubbles": true, 
     "altKey": false, 
     "delegateTarget": {}, 
     "handleObj": { 
     "type": "touchstart", 
     "origType": "touchstart", 
     "data": null, 
     "guid": 2026, 
     "namespace": "" 
     }, 
     "data": null 
    } 

Bây giờ, IS này ở chế độ giao diện người dùng góc trong canvas, nhưng sự kiện chuột hoạt động tốt. Đây là yếu tố tôi btw:

link: function(scope, element, attrs, model){ 
       //scope.canvasElem = element[0].children[0].children[0]; 
       scope.canvasElem = angular.element($('.touchScreen'))[0]; 
       scope.ctx = scope.canvasElem.getContext('2d'); 

Dưới đây là một ví dụ về cách tôi ràng buộc:

element.bind('touchstart', scope.touchStart); 

Chỉnh sửa, và đây là một đối tượng sự kiện mousedown để so sánh:

{ 
    "originalEvent": { 
    "isTrusted": true 
    }, 
    "type": "mousedown", 
    "timeStamp": 1450389131400, 
    "jQuery20309114612976554781": true, 
    "toElement": {}, 
    "screenY": 436, 
    "screenX": 726, 
    "pageY": 375, 
    "pageX": 726, 
    "offsetY": 81, 
    "offsetX": 41, 
    "clientY": 375, 
    "clientX": 726, 
    "buttons": 1, 
    "button": 0, 
    "which": 1, 
    "view": "$WINDOW", 
    "target": {}, 
    "shiftKey": false, 
    "relatedTarget": null, 
    "metaKey": false, 
    "eventPhase": 3, 
    "currentTarget": {}, 
    "ctrlKey": false, 
    "cancelable": true, 
    "bubbles": true, 
    "altKey": false, 
    "delegateTarget": {}, 
    "handleObj": { 
    "type": "mousedown", 
    "origType": "mousedown", 
    "data": null, 
    "guid": 2025, 
    "namespace": "" 
    }, 
    "data": null 
} 

Answer 1

Để có được tọa độ x và y thử sử dụng mã bên dưới

x1 = event.touches[0].pageX; 
y1 = event.touches[0].pageY; 

Answer 2

Ví dụ, bạn có thể liên kết các sự kiện liên lạc sử dụng chỉ thị, bên trong chỉ có thể có một mã như thế này,

element.on('touchstart', function (event) { 
    event = event.originalEvent || event; 
    //actions 
    event.stopPropagation(); //if you need stop the propagation of the event 
}); 

cũng cần phải có cẩn thận về hành vi của các loại 4 của sự kiện liên lạc (touchstart, touchend, touchmove , touchcancel) tùy thuộc vào mục tiêu của bạn. Đối với chụp vị trí của việc sử dụng con trỏ,

element.on('touchmove', function (event) { 
    event.preventDefault(); 
    if (event.targetTouches.length == 1) { //when only has one target in touch 
     var touch = event.targetTouches[0]; 
     // Place element where the finger is 
     var x = touch.pageX + 'px'; 
     var y = touch.pageY + 'px'; 
    } 
    event.stopPropagation(); 
}); 

Answer 3

var touchRelativeToViewWindow = { 
    x: event.originalEvent.touches[0].pageX, 
    y: event.originalEvent.touches[0].pageY 
}; 

Muộn còn hơn không (lưu ý, đây là cho touchmove):

Khi đi qua AngularJs/jQuery, chúng ta cần phải nhìn vào originalEvent cho tất cả các chi tiết. Lưu ý rằng phần [0] có thể cho biết nhiều lần chạm đồng thời. Tôi không biết chúng được đặt hàng như thế nào, nhưng touches[0] có thể là ngón tay đầu tiên và touches[1] có thể là ngón tay thứ hai. Các giải pháp trên làm việc cho tôi vì tôi chỉ mong đợi người dùng sử dụng bút stylus.