Események, callbackek és koordinátarendszerek

Becsült olvasási idő: 12–15 perc

Kulcsfogalmak: event listener · callback · PointerEvent · clientX · clientY · local coordinate A Signal Lab nem folyamatosan számolja újra a pointert. Eseményre vár:

stage.addEventListener("pointermove", updateFromPointer);

Függvényreferencia vs függvényhívás

updateFromPointer

Ez függvényreferencia: átadjuk a függvényt, hogy a böngésző később hívja meg.

updateFromPointer()

Ez függvényhívás: most azonnal lefuttatjuk.

Az addEventListener()-nek callbackként függvényreferenciát adunk.

Callback

A callback olyan függvény, amelyet egy másik rendszer később meghív.

pointermove történik
       ↓
browser
       ↓
updateFromPointer(event)

Honnan jön az event?

function updateFromPointer(event) {
  // ...
}

Az event értékét nem mi készítjük elő. A böngésző az esemény megtörténtekor létrehoz egy eseményobjektumot, majd átadja a callbacknek.

Event object

Az event object az eseményről hordoz adatot.

event.clientX
event.clientY
event.target
event.timeStamp

Nem minden eseményobjektumnak ugyanazok a tulajdonságai. Egy PointerEvent és egy KeyboardEvent más adatokat hordoz.

clientX és clientY

clientX és clientY a pointer koordinátája a böngésző viewportjához képest.

VIEWPORT
0,0 ┌──────────────────────────┐
    │              ● pointer  │
    │         clientX/clientY │
    └──────────────────────────┘

De a signal a stage saját terében mozog. Ezért át kell váltanunk lokális koordinátára.

getBoundingClientRect()

const bounds = stage.getBoundingClientRect();

A bounds többek között megadja:

• bounds.left
• bounds.top
• bounds.width
• bounds.height

Viewport → local coordinate

pointerX = event.clientX - bounds.left;
pointerY = event.clientY - bounds.top;

Ha a pointer viewport-X értéke 700, a stage bal széle pedig 100, akkor a stage-en belüli X:

700 - 100 = 600

A tényleges kódban clampeljük is:

pointerX = clamp(event.clientX - bounds.left, 0, bounds.width);

Miért fontos a koordinátarendszer?

Ugyanaz a pont több koordinátarendszerben más számokkal írható le. Ez később Canvas, WebGL, játékfejlesztés, videó és 3D rendszerek esetén is alapvető lesz.

Billentyűzet

A Space lenyomását a window objektumon figyeljük:

window.addEventListener("keydown", (event) => {
  if (event.key === " ") {
    logSnapshot();
  }
});

Itt egy névtelen callbacket adunk át az addEventListener()-nek. A KeyboardEvent key adatából döntjük el, mit tegyünk.

Ellenőrző kérdések

1. Mi a különbség updateFromPointer és updateFromPointer() között?
2. Ki hozza létre az event objektumot?
3. Mihez képest mér a clientX?
4. Hogyan lesz viewport-koordinátából stage-local koordináta?