‏Drawesome: نوار ابزار نقاشی آماده برای React

سازندهٔ Drawesome تو این پست می‌گه روی کلی ابزار خلاقانه کار می‌کنه که به نقاشی نیاز دارن، مثل حاشیه‌نویسی روی اسکرین‌شات یا دور گرفتن یه بخش اشتباه. چون هر بار همین رو از اول می‌ساخت، بالاخره یه پکیج ازش درآورد. Drawesome یه نوار ابزار نقاشی برای React هست با هفت قلم، پاک‌کن، خروجی SVG و PNG و بدون وابستگی به‌جز خود React. خودش پر کنندهٔ container والدشه، پس فقط باید برای wrapper ارتفاع تعیین کنی.

به گفتهٔ نویسنده، بیشتر وقتش صرف خود نوار ابزار شده. نوار به‌جای عوض کردن پنل‌ها شکلش رو تغییر می‌ده: رنگ انتخاب کنی، ردیف قلم‌ها تبدیل به پالت رنگ می‌شه. کوچیکش کنی، تبدیل به یه دایره می‌شه که ابزار فعلی هنوز توشه. ایده‌ش از ابزارهای markup اپل اومده.

هر قلم مثل نسخهٔ واقعیش رفتار می‌کنه. مداد، خودکار و قلم‌مو با سرعت حرکت نازک‌تر می‌شن، ولی fineliner و highlighter ضخامت ثابت دارن. قلم خودنویس به جهت حساسه: یه طرف ضخیم، یه طرف مویی. پاک‌کن هم به‌جای حذف کل خط، فقط همون بخشی رو که روش می‌کشی پاک می‌کنه.

نویسنده می‌گه Drawesome عمداً نظر خودش رو داره و پیش‌فرض‌هاش همون نسخه‌ای‌ان که باید منتشر کنی. ولی props زیادی برای تغییر هست: theme با مقدار auto از تنظیمات سیستم پیروی می‌کنه، placement نوار رو به لبهٔ پایین، چپ یا راست می‌بره و draggable اجازه می‌ده کاربر جابه‌جاش کنه. با look="studio" ابزارها مثل اشیای واقعی نورپردازی می‌شن و background با مقدار transparent هیچی رنگ نمی‌کنه تا پس‌زمینهٔ صفحه دیده بشه.

برای موبایل، چون نوار به اندازهٔ ابزارهاش عریضه، دمو زیر 680px نوار رو عمودی روی لبهٔ چپ می‌ذاره و تعداد ابزارها رو کم می‌کنه. با chrome={false} کل نوار حذف می‌شه و فقط سطح نقاشی می‌مونه. DrawSurface، Toolbar و هوک useDrawing هم جدا export شدن تا اگه خواستی خودت چیدمان رو بسازی.

برای گرفتن خروجی، یه ref روی کامپوننت می‌ذاری. toSvg() یه رشته برمی‌گردونه، toPng() یه Blob می‌ده که با پارامتر scale می‌شه رزولوشن رو برای چاپ دو یا سه برابر کرد، و download() هر دو رو ذخیره می‌کنه. خروجی دقیقاً همون چیزیه که روی صفحه‌ست. strokeها هم داده‌های ساده‌ان، پس می‌شه با onChange ذخیره‌شون کرد و با initialStrokes برگردوند. شورت‌کات‌هایی مثل E برای پاک‌کن و ⌘Z برای undo هم داره.

نکات کلیدی:

• هفت قلم (مداد، خودکار، fineliner، ماژیک، highlighter، قلم‌مو، خودنویس) به‌علاوهٔ پاک‌کن
• هیچ وابستگی‌ای به‌جز React نداره
• خروجی با toSvg()، toPng(scale) و download() از طریق ref
• chrome={false} نوار رو حذف می‌کنه و DrawSurface، Toolbar و useDrawing جدا در دسترسن
• نویسنده برای ساختن ابزار نقاشی از قطعات جدا، tldraw یا Excalidraw رو پیشنهاد می‌ده