Это вторая часть моего руководства по 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!