عرضه HTML در بوم نقاشی دوبعدی

Natalia Markoborodova

‫HTML-in-Canvas API به شما امکان می‌دهد زیردرخت‌های DOM تعاملی و دردسترس را مستقیماً در بافت بوم دوبعدی ارائه دهید. برای کسب اطلاعات بیشتر درباره این میانای برنامه‌سازی کاربردی و مزایای آن، نمای کلی HTML-in-Canvas را بخوانید.

این راهنما نشان می‌دهد که چگونه HTML را در بوم دوبعدی پرداز کنید. پرداخت HTML در بوم دوبعدی به مراحل زیر نیاز دارد:

1. بوم نقاشی‌تان را آماده کنید. شاخصه‌های مناسب را به‌صورت اعلانی تنظیم کنید تا مرورگر بداند که باید HTML را در بوم رندر کند. این راه‌اندازی در بافت‌های 2D،‏ WebGL، و WebGPU یکسان است. با نحوه راه‌اندازی بوم و نحوه اعلام عناصر HTML برای ترسیم مستقل آشنا شوید.
2. تصویر عنصر را در بوم بکشید.
3. [اختیاری] DOM و پیکسل‌ها را همگام‌سازی کنید.

رسم عناصر HTML در بوم دوبعدی

وقتی بوم آماده شد و عناصر به‌عنوان drawable علامت‌گذاری شدند، آن‌ها را بااستفاده از روش drawElementImage() در بافت دوبعدی پردازش کنید.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const childElement1 = document.getElementById("childElement1");
const childElement2 = document.getElementById("childElement2");

canvas.onpaint = () => {
  ctx.reset();
  // 1. Draw the primary element at coordinate (20, 20)
  ctx.drawElementImage(childElement1, 20, 20);
  // 2. Draw the secondary nested button at a custom offset
  ctx.drawElementImage(childElement2, 40, 90);
}

‫drawElementImage() از فرم‌های ۳-شناسه‌ای، ۵-شناسه‌ای، ۷-شناسه‌ای، و ۹-شناسه‌ای پشتیبانی می‌کند و پارامتر اختیاری options را می‌پذیرد:

// 1. Basic position: (element, dx, dy, options?)
ctx.drawElementImage(targetElement, 100, 150);

// 2. Scaled / resized: (element, dx, dy, dWidth, dHeight, options?)
ctx.drawElementImage(targetElement, 100, 150, 180, 60);

// 3. Cropped, default size: (element, sx, sy, swidth, sheight, dx, dy, options?)
ctx.drawElementImage(targetElement, 0, 0, 90, 30, 100, 150);

// 4. Cropped and resized: (element, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, options?)
ctx.drawElementImage(targetElement, 0, 0, 90, 30, 100, 150, 180, 60);

همگام‌سازی DOM و پیکسل‌ها

ازآنجایی‌که رندر کردن <canvas> ضروری است درحالی‌که چیدمان DOM و سبک CSS واکنشی هستند، مرورگر به مکانیزمی نیاز دارد تا پیکسل‌های بوم رندرشده، مناطق آزمایش ضربه تعاملی، و درخت‌های دسترس‌پذیری را همگام‌سازی کند. قبل‌از یادگیری نحوه همگام‌سازی DOM و پیکسل‌ها، مطمئن شوید که رویداد paint را که هنگام به‌روزرسانی عناصر DOM فعال می‌شود و نیاز به بازترسیم دارد درک کرده‌اید.

در بافت‌های بوم دوبعدی، مرورگر به‌طور خودکار مختصات چیدمان عنصر، حدود دسترس‌پذیری، و آزمایش ضربه اشاره‌گر را با مختصات بوم ترسیم‌شده همگام‌سازی می‌کند.

به‌روزرسانی دستی هندسه عنصر

در سناریوهای پیشرفته، می‌توانید از همگام‌سازی خودکار هندسه انصراف دهید و تبدیل‌های فضایی را به‌صورت دستی کنترل کنید. { preserveElementGeometry: true } را به drawElementImage() ارسال کنید تا از لغو خودکار مختصات آزمایش برخورد موجود عنصر توسط مرورگر جلوگیری شود:

// 1. Draw the element without altering its existing hit-test bounds
ctx.drawElementImage(targetElement, elementX, 200, { preserveElementGeometry: true });

// 2. Construct a custom transform matrix as needed,
// assuming scaleX/scaleY = canvas grid pixels per CSS pixel,
// from your resize observer (see "Units and sizing").
const currentTransform = new DOMMatrix();
currentTransform.a = 1.5;          // scale X
currentTransform.e = x / scaleX;   // translate X: grid px → CSS px
currentTransform.f = y / scaleY;   // translate Y: grid px → CSS px

// 3. Explicitly apply the custom transform
canvas.updateElementGeometry(targetElement, { canvasTransform: currentTransform });

مراحل بعدی

• مفاهیم فنی اصلی پشت HTML-in-Canvas را درک کنید.
• با نحوه پرداز HTML در WebGL Canvas آشنا شوید.
• با نحوه پرداز HTML در «بوم نقاشی WebGPU» آشنا شوید.
• با استراتژی‌های جایگزین آشنا شوید.
• برای هم‌رسانی بازخوردتان، مشکلی در GitHub ثبت کنید.
• مجموعه نمایشی HTML-in-Canvas را که توسط انجمن ارائه شده است بررسی کنید.