Emscripten canvas + jQuery - chuyển đổi tiêu điểm

Question

Tôi có một trang HTML được chia khoảng 30% - 70% thành hai cột dọc. Cột bên trái chứa nguồn cấp dữ liệu trò chuyện (được xử lý qua Node và Socket.io) và cột bên phải chứa một số ISBNđược tạo bằng emscripten tạo ra (có ID là canvas). Canvas chứa một thế giới 3D cơ bản mà người dùng có thể điều hướng bằng cách sử dụng các điều khiển tiêu chuẩn của người đầu tiên (WASD để di chuyển, chuột để 'tìm kiếm').

Theo mặc định, canvas nuốt tất cả các sự kiện bàn phím. Tôi đã sửa lỗi này bằng đoạn mã sau trong quy trình khởi tạo canvas:

Module.preRun.push(function() { 
    ENV.SDL_EMSCRIPTEN_KEYBOARD_ELEMENT = "#canvas"; 
}); 

Điều này cho phép tôi tập trung vào hộp trò chuyện, nhập tin nhắn và gửi nó.

Vấn đề tôi đang chạy vào là một khi các tin nhắn trò chuyện đã được gửi đi, tôi cố gắng và tập trung trở lại vào khung với đoạn mã sau (để cho phép các cầu thủ để điều hướng thế giới 3d với WASD):

$('#canvas').focus(); 

Tính năng này sẽ trả về tiêu điểm cho canvas, nhưng di chuyển chuột và bàn phím không hoạt động. Kỳ lạ thay, nhấp vào tab/cửa sổ trình duyệt và sau đó vào canvas dường như hoạt động - tiêu điểm được trả về canvas và tôi có thể điều hướng một lần nữa. Gọi điện theo cách thủ công $(window).blur().focus() không thực hiện thủ thuật.

Có ai biết cách tập trung trở lại canvas sau khi tin nhắn trò chuyện đã được gửi không?

- CẬP NHẬT -

Tôi đã thêm một trường nhập văn bản (với ID của hiddenField) đằng sau bức tranh và tôi đang sử dụng các chức năng preRun gán sự kiện quan trọng đối với vải đó trường (canvas không hoạt động liên tục vì một số lý do).

này hoạt động tốt cho đến khi người dùng nhấp chuột ra khỏi vải - ví dụ, vào trường trò chuyện - và rồi tấm bạt dừng đáp ứng với bất kỳ bàn phím hoặc chuột đầu vào, mặc dù tôi đang kích hoạt tập trung trở lại vào hiddenField (và có thể thấy rằng nó nhận được nó).

Dường như làm bất kỳ điều gì trên trang xung đột với hành vi tập trung của emscripten (gắn với đối tượng cửa sổ, tôi tin) và ngăn không cho canvas lấy lại tiêu điểm.

Chắc chắn có một số cách để làm mờ vải nền emscripten để sống cùng với các phần tử HTML khác?

Answer 1

Cách tiếp cận tốt nhất mà tôi có thể tìm thấy - thực sự, cách duy nhất để có được các khía cạnh riêng biệt của ứng dụng (chat & Thế giới 3D) hoạt động chính xác - đã nhúng canvas emscripten vào iframe và sử dụng các cuộc gọi chức năng cross-frame khi cần thiết để kích hoạt các hành động.

Page 
    - chat 
    - iframe 
     -- emscripten-generated page 

Đây không phải là lựa chọn đầu tiên của tôi về giải pháp, nhưng đó là giải pháp duy nhất tôi đã cố gắng làm việc.

Answer 2

Bạn cần phải thực hiện đối tượng canvas có thể lấy tiêu điểm bằng cách thêm thuộc tính tabindex="0".

Sau đó, nó phải có khả năng kích hoạt các sự kiện tập trung đúng cách:

document.querySelector("#canvas").focus() 

Answer 3

EDIT:

Xem đầy đủ bản demo qua CodePen (bao gồm các liên kết đến .js nguồn lực)

Cấu trúc:

Page 
    - emscripten-generated-page 
     - loop 
    - chat 
    - script to handle global key input handlers 

Bạn phải thiết tabindex trên yếu tố canvas (như ghi nhận của luke và described on MDN), đính kèm nghe sự kiện toàn cầu thông qua JavaScript tích hợp trong giao diện Document và sau đó gọi .triggerHandler() để đảm bảo rằng lợi nhuận vải để nó trạng thái mặc định, chi phối bởi click:

var chatInputField = $("#message-input"); 
var canvas = $("#canvas"); 


canvas.on("click", function(e){ 
    return document.addEventListener("keyup", game.toggleKeys); 
}); 

chatInputField.on("focusin", function(e) { 
    $('#canvas').attr('tabindex', 0); 
    return document.removeEventListener("keyup", game.toggleKeys, false); 
}); 

chatInputField.on("focusout", function(e) { 
    $("#canvas").triggerHandler('click'); 
    chatInputField.attr('tabindex', 0); 
}); 

Tôi đã thử nghiệm tính năng này, nó hoạt động. Đây là tệp app.js của tôi để quản lý dữ liệu nhập chính (xem dòng 297).

https://gist.github.com/shagamemnon/585df8dd215a949b839f8b02199af31b

Một caveat: bạn xác định phải rõ ràng hành vi của các tab chìa khóa bên trong trò chơi canvas.