نظرة عامة على HTML-in-Canvas

Natalia Markoborodova

تعمل واجهة برمجة التطبيقات HTML-in-Canvas على سد الفجوة بين عالم DOM التفاعلي الذي يسهل الوصول إليه وعناصر التحكّم العالية الأداء على مستوى البكسل في <canvas>. تتيح لك واجهة برمجة التطبيقات رسم أشجار فرعية مباشرةً من نموذج DOM في سياقات لوحة الرسم ثنائية الأبعاد أو WebGL أو WebGPU، مع احتفاظ المتصفّح بالتفاعلية وأشجار تسهيل الاستخدام وعمليات الدمج على مستوى المتصفّح.

فيديو يقدّم نظرة عامة على HTML-in-Canvas API

للتعرّف على مزايا HTML-in-Canvas، وكيفية تحسين الحلول البديلة السابقة، وحالات الاستخدام الأنسب لها، يُرجى الاطّلاع على HTML-in-Canvas في Chrome 157: نموذج كائن المستند (DOM) التفاعلي داخل 2D وWebGL وWebGPU.

تنفيذ واجهة المستخدم باستخدام HTML-in-Canvas

لدمج HTML-in-Canvas في تطبيقك، يمكنك اتّباع الخطوات التالية:

  • إنشاء عملية تنفيذ مباشرة باستخدام واجهات برمجة التطبيقات للمتصفّح
  • استخدِم إطار عمل يتيح استخدام HTML-in-Canvas.

يمكنك أيضًا استخدام وكيل ترميز لمساعدتك. تعرَّف على كيفية تحسين تجربة وكيل الترميز باستخدام إرشادات الويب الحديث.

التنفيذ المباشر

يعتمد التنفيذ على السياق الذي تستخدمه. قبل البدء، راجِع المفاهيم الفنية الشائعة في جميع السياقات، مثل محتوى drawable وحدث paint.

تعرَّف على كيفية رسم صورة العنصر في لوحة رسم وتعديل هندسة العنصر في السياقات التالية:

دعم المكتبات وأُطر العمل

أضافت العديد من المكتبات الشائعة دعمًا تجريبيًا لـ HTML-in-Canvas، لتأثيرات WebGL وWebGPU بالإضافة إلى تأثيرات لوحة الرسم الثنائية الأبعاد. يُرجى الاطّلاع على مستندات كل مكتبة لمعرفة حالة الدعم الحالية وتفاصيل التنفيذ.

Three.js

قد يكون تعديل المصفوفات يدويًا أمرًا مملاً، لذا تضيف أُطر العمل دعمًا مدمجًا. على سبيل المثال، توفّر مكتبة Three.js دعمًا تجريبيًا باستخدام 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 أيضًا استخدام HTML-in-Canvas من خلال واجهة برمجة التطبيقات الخاصة بالبنية:

// 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 استخدام HTML-in-Canvas من خلال فئة 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 ميزة HTML-in-Canvas في الإصدار 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 هي مكتبة مفتوحة المصدر لمكوّنات واجهة المستخدم التي تستخدم HTML-in-Canvas.

تنفيذ HTML-in-Canvas باستخدام وكيل ترميز

إذا كنت تستخدم وكيل ترميز، ثبِّت إرشادات الويب الحديث التي تتضمّن أحدث تعليمات التنفيذ لميزة HTML-in-Canvas. بالإضافة إلى HTML-in-Canvas، تغطّي "إرشادات الويب الحديث" واجهات برمجة تطبيقات أخرى للمتصفّحات الحديثة وأفضل الممارسات.

الخطوات التالية