Это вторая часть моего руководства по Webassembly - приложениям WebGL. В части 1 мы увидели, как создать приложение« Hello Triangle ». Но если вы хотите создать веб-сайт в стиле Figma, вам нужно будет обрабатывать события Javascript внутри кода C.

Заголовок Emscripten html5.h

Html5.h Emscripten - это то место, где находятся все заголовки Emscripten API для взаимодействия с DOM. Тесты с примерами работающего кода можно найти здесь.

Давайте запишем событие нажатия мыши в обратный вызов C. Это включает директиву препроцессора emscripten_set_mousedown_callback. Поместим это где-нибудь в функцию main:

#include <emscripten/html5.h>
int main(void) {
    /* ... */
    emscripten_set_mousedown_callback(
        EMSCRIPTEN_EVENT_TARGET_WINDOW,
        NULL,
        1,
        mouse_down_callback
    );
    /* ... */
}

emscripten_set_mousedown_callback принимает четыре аргумента:

  • target: перечисление, которое может указывать на окно, документ, экран или холст. Обратите внимание: на то, что скрывается внутри холста WebGL, нельзя настроить таргетинг.
  • userData: void *, который будет передан обратному вызову.
  • useCapture: логическое значение для аргумента useCapture для addEventListener.
  • обратный вызов: типа em_mouse_callback_func

Теперь давайте определим наш обратный вызов в глобальной области:

#include <stdio.h>
EM_BOOL mouse_down_callback(
    int eventType,
    const EmscriptenMouseEvent *event,
    void *userData
) {
    printf(
        "Received mouse down event at x: %ld, y %ld\n",
        event->screenX,
        event->screenY
    );
    return 0;
}

А пока ваш код должен компилироваться. Вы должны иметь возможность щелкнуть в любом месте экрана и увидеть, как событие нажатия мыши регистрируется на консоли.

Все другие типы событий HTML5 могут быть захвачены таким же образом с помощью функции C для функциональной веб-сборки - приложения WebGL!