نمای کلی HTML-in-Canvas

Natalia Markoborodova

‫HTML-in-Canvas API شکاف بین دنیای تعاملی و دردسترس DOM و کنترل سطح پیکسل با عملکرد بالای <canvas> را پر می‌کند. این میانای برنامه‌سازی کاربردی به شما امکان می‌دهد زیردرخت‌های DOM زنده را مستقیماً در زمینه‌های بوم 2D،‏ 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 بااستفاده از 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 از 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، «راهنمای وب نوین» سایر میاناهای برنامه‌سازی کاربردی مرورگر نوین و روال‌های مطلوب را پوشش می‌دهد.

مراحل بعدی