Konva.js: لایبرری جاوااسکریپتی برای خلق جلوه‌های گرافیکی دوبُعدی

Konva.js: لایبرری جاوااسکریپتی برای خلق جلوه‌های گرافیکی دوبُعدی

از نوشته های من در سکان آکادمی

Konva یک لایبرری بر پایهٔ Canvas در HTML5 است که با استفاده از آن می‌توان جلوه‌های گرافیکی دوبُعدی را به سادگی در اپلیکیشن‌های موبایل و همچنین نسخه‌های دسکتاپ اجرا کرد.

ایجاد جلوه‌های بصری جذاب‌تر در صفحات وب نظیر استفاده از ترنزیشن‌ها، انیمیشن، اسکیل شدن آبجکت‌ها، قابلیت درگ‌ & دراپ و غیره همگی مواردی هستند که در صورت تسلط دولوپر به CSS و JS قابل پیاده‌سازی هستند اما با استفاده از فریمورکی نظیر Konva، می‌توان موارد این‌چنینی را با سرعت بیشتر و البته با کدهایی کمتر و مهمتر از آن، ساده‌تر اجرا کرد.

روش استفاده از Konva
برای استفاده از Konva تنها کافی است تا مشابه بسیاری دیگر از لایبرری‌های رایج مثل جی‌کوئری و بوت‌استرپ، فایل حاوی کدهای این فریمورک را از CDN آن در قسمت هِد صفحهٔ خود لود کرده و سپس کدهای مورد نیاز را فراخوانی کنید.

در منطق به کار رفته این فریمورک همه چیز از Konva.Stage آغاز می‌شود؛ این بخش می‌تواند دارای زیر شاخه‌های فراوانی با عنوان Konva.Layer باشد که در نهایت هر Layer (لایه) نیز دارای اَشکال مجزا و گروه‌هایی متشکل از آبجکت‌ها و آیتم‌ها است که در صفحه نشان داده می‌شوند.

این طبقه‌بندی مشابه مدل DOM در صفحات HTML است که در آن تمامی کدهای صفحه داخل تگ‌های HTML قرار می‌گیرند، سپس صفحه به دو بخش کلی Head و Body تقسیم می‌شود و هر کدام از این بخش‌ها نیز می‌توانند دارای زیرمجموعه‌های خود باشند.

لازم به ذکر است که هر Layer در Konva دارای دو رندرر است که عبارتند از Scene Renderer برای ایجاد مواردی که در صفحه نمایش داده می شوند (کاربر می‌تواند آن‌ها را مشاهده کند) و Hit Graph Renderer که نتایج اجرای آن به صورت مستقیم و پیش‌فرض در صفحه قابل‌رؤیت نیستند و هدف از آن‌ها بررسی رویدادهایی است که در صفحه‌‌ٔ وب اتفاق می‌افتند (البته در زمانی بسیار کوتاه و با کارایی بسیار بالا).

ادامه مطلب در سکان آکادمی

You may also like

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *