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

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

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

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

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

<script src="https://cdn.rawgit.com/konvajs/konva/2.0.2/konva.min.js"></script>

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

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

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

استایل تمامی آیتم‌هایی که توسط این فریمورک ساخته می‌شوند با استفاده از CSS قابل تغییر است؛ همچنین بسیاری از موارد رایج در صفحات مثل اَشکال هندسی، مسیرها، خطوط منحنی و فیلترها از پیش ساخته شده و برای نمایش آن‌ها تنها نیاز است تا با چند خط کد ساده، فراخوانی شوند.