‏react-konva: گرافیک کانواس با کامپوننت‌های ری‌اکت

react-konva بایندینگ‌های اعلانی فریم‌ورک Konva برای ری‌اکته، یعنی به جای اینکه دستی روی canvas نقاشی کنی، هر شکل Konva مثل Rect، Circle، Line، Text، Image و Star رو به شکل یه کامپوننت ری‌اکت با props و state و هوک و پشتیبانی کامل از رویدادها می‌نویسی. تو مستندات اومده که بهترین مدل ذهنی اینه: Konva برای react-konva همون چیزیه که DOM برای خود React هست.

درختش ثابته: Stage بیرونی‌ترین عنصره، داخلش یه یا چند Layer و داخل لایه‌ها شکل‌ها. موقعیت هر شکل رو تو state نگه می‌داری و با رویدادهایی مثل onDragEnd به‌روزش می‌کنی:

<Stage width={window.innerWidth} height={window.innerHeight}>
  <Layer>
    <Rect x={20} y={50} width={100} height={100} fill="red" draggable />
  </Layer>
</Stage>

نسخهٔ major کتابخونه باید با نسخهٔ major ری‌اکت یکی باشه: برای React 19 پکیج فعلی رو نصب می‌کنی و برای React 18 باید react-konva@18 بگیری. یه محدودیت مهم هم داره که تو مستندات با تأکید اومده: فقط تو مرورگر کار می‌کنه و رو React Native جواب نمی‌ده، چون اونجا نه DOM هست نه canvas که توش نقاشی کنه. اگه یه ادیتور Konva وب داری، اجراش تو WebView یه گزینهٔ عملیه؛ ولی برای اپ نیتیو جدید پیشنهاد خودشون React Native Skia هست.

مستندات چندتا نمونهٔ اجراشدنی هم داره که تقریباً همهٔ کاربردهای واقعی کانواس رو پوشش می‌ده: ادیتور طراحی با انتخاب و دستگیرهٔ تغییر اندازه و تاریخچه و خروجی تصویر، وایت‌بورد بی‌نهایت با pan و zoom، ادیتور نود با یال‌های زنده، ابزار annotation روی عکس، پلان ساختمون و نقشهٔ رزرو صندلی، و یه وایت‌بورد چندنفره با Yjs. اگه کل ادیتور رو می‌خوای نه فقط اجزاش، Polotno یه SDK تجاریه که خود نگه‌دارنده‌های Konva ساختن و UIش ری‌اکته.

نکات کلیدی:

• درخت کار: Stage بعد Layer و بعد شکل‌ها؛ هر شکل Konva یه کامپوننت ری‌اکت با پشتیبانی کامل رویدادهاست.
• نسخهٔ major باید با ری‌اکت یکی باشه: برای React 19 پکیج فعلی، برای React 18 نسخهٔ react-konva@18.
• فقط مرورگر پشتیبانی می‌شه؛ React Native نه، و جایگزین پیشنهادی React Native Skia هست.
• نمونه‌های آماده: ادیتور طراحی، کانواس بی‌نهایت، ادیتور نود، annotation عکس، پلان ساختمون و وایت‌بورد چندنفره با Yjs.
• Polotno یه SDK تجاری ادیتور طراحیه که روی Konva ساخته شده و به شکل کامپوننت وارد اپ ری‌اکت می‌شه.