Omówienie HTML w obszarze roboczym

Natalia Markoborodova

Interfejs HTML-in-Canvas API wypełnia lukę między interaktywnym i dostępnym światem DOM a wysoką wydajnością i kontrolą na poziomie pikseli, którą zapewnia <canvas>. Interfejs API umożliwia rysowanie poddrzew DOM na żywo bezpośrednio w kontekstach canvas 2D, WebGL lub WebGPU, podczas gdy przeglądarka zachowuje interaktywność, drzewa ułatwień dostępu i integracje na poziomie przeglądarki.

Omówienie interfejsu HTML-in-Canvas API w formie filmu

Aby dowiedzieć się więcej o zaletach HTML-in-Canvas, o tym, jak ulepsza wcześniejsze obejścia i w jakich przypadkach sprawdza się najlepiej, przeczytaj artykuł HTML-in-Canvas w Chrome 157: interaktywny DOM w 2D, WebGL i WebGPU.

Implementowanie interfejsu za pomocą HTML-in-Canvas

Aby zintegrować HTML-in-Canvas z aplikacją, możesz:

  • Utwórz bezpośrednią implementację za pomocą interfejsów API przeglądarki.
  • Użyj platformy, która obsługuje HTML-in-Canvas.

Możesz też skorzystać z pomocy agenta kodującego. Dowiedz się, jak ulepszyć działanie agenta kodującego dzięki Przewodnikowi po współczesnych technologiach internetowych.

Implementacja bezpośrednia

Implementacja zależy od używanego kontekstu. Zanim zaczniesz, zapoznaj się z pojęciami technicznymi, które są wspólne dla wszystkich kontekstów, takimi jak treść drawable i zdarzenie paint.

Dowiedz się, jak narysować obraz elementu na obszarze roboczym i zaktualizować geometrię elementu w tych kontekstach:

Obsługa bibliotek i platform

Kilka popularnych bibliotek dodało eksperymentalną obsługę HTML-in-Canvas dla tekstur WebGL i WebGPU oraz efektów 2D Canvas. Sprawdź dokumentację każdej biblioteki, aby poznać jej aktualny stan obsługi i szczegóły implementacji.

Three.js

Ręczne aktualizowanie macierzy może być żmudne, dlatego platformy dodają wbudowaną obsługę. Na przykład Three.js zapewnia eksperymentalną obsługę za pomocą THREE.HTMLTexture:

const material = new THREE.MeshBasicMaterial();
material.map = new THREE.HTMLTexture(uiElement); // Pass the DOM element

const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

PlayCanvas

PlayCanvas obsługuje też HTML-in-Canvas za pomocą interfejsu Texture API:

// Wait for the 'paint' event to set the source
canvas.addEventListener('paint', () => {
  htmlTexture.setSource(htmlElement);
}, { once: true });
canvas.requestPaint();

// Keep up to date
canvas.addEventListener('paint', onPaintUpload);

const material = new pc.StandardMaterial();
material.diffuseMap = htmlTexture;
material.update();

Babylon.js

Babylon.js obsługuje HTML-in-Canvas za pomocą klasy BABYLON.HtmlTexture:

// 2. Wrap the DOM element in an HtmlTexture
const htmlTexture = new BABYLON.HtmlTexture("htmlTexture", uiElement, scene);

// 3. Assign the texture to a material
const material = new BABYLON.StandardMaterial("hudMaterial", scene);
material.diffuseTexture = htmlTexture;

// 4. Apply material to 3D mesh
const plane = BABYLON.MeshBuilder.CreatePlane("hudPlane", { width: 1.6, height: 0.9 }, scene);
plane.material = material;

// 5. Start Render Loop
engine.runRenderLoop(() => {
  scene.render();
});

PixiJS

PixiJS wprowadził obsługę HTML-in-Canvas w v8.19.0:

import { HTMLSource } from 'pixi.js/html-source';

// ... Initialize the app

// Append the HTML element as a direct child of the Pixi canvas
app.canvas.appendChild(htmlElement);

// Create the HTML-in-Canvas source and wrap it in a Sprite
const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
app.stage.addChild(sprite);

app.ticker.add(() => {
  // Make sure to align the HTML element by updating its transform
  const syncT = app.canvas.getElementTransform(htmlElement, finalTransform);
  if (syncT) {
    htmlElement.style.transform = syncT.toString();
  }
});

CanvasUI

CanvasUI to biblioteka open source komponentów interfejsu, które używają HTML-in-Canvas.

Implementowanie HTML-in-Canvas za pomocą agenta kodowania

Jeśli używasz agenta kodowania, zainstaluj Przewodnik po współczesnych technologiach internetowych, który zawiera najnowsze instrukcje implementacji HTML-in-Canvas. Oprócz HTML-in-Canvas Przewodnik po współczesnych technologiach internetowych obejmuje inne nowoczesne interfejsy API przeglądarek i sprawdzone metody.

Dalsze kroki