. در پست قبلی روش های ایجاد خطوط صاف در svg توسط ابزار path را بررسی کردیم و یاد گرفتیم. در این نوشته، ایجاد خطوط منحنی در SVG با ابزار path را یاد میگیریم. باز هم تاکید میکنیم که برای تولید اشکال پیچیده بهتر است از نرم افزارهای طراحی و ویرایش وکتور استفاده کنید چرا که ایجاد این تصاویر در محیط ویرایشگر متنی و با کد زدن خیلی سخت و طاقت فرساست! اما به عنوان یک متخصص طراح سایت دانستن آناتومی کد های SVG و روش ایجاد آنها میتونه مفید باشه. در آخر این پست نیز چند تا از بهترین ابزارهای آنلاین و نرم افزارهای طراحی تصاویر SVG رو معرفی میکنیم. برای ایجاد خطوط منحنی در SVG با ابزار path سه گروه دستور وجود داره: ترسیم خطوط منحنی در SVG با فرمان C, c, S, s Cubic Bézier اولین دستوری که برای ترسیم یک مسیر منحنی شکل بررسی می کنیم c نام دارد. منظور از C اول کلمه Cubic می باشد. اگر با ابزار Pen در نرم افزار Adobe Illustrator کار کرده باشید با این دستور غریبه نخواهید بود. ساختار این دستور به این صورته که سه نقطه به عنوان پارامتر میگیره؛ نقطه اول کنترل کننده یا دستگیره ای برای شروع منحنی و نقطه دوم دستگیره ای برای نقطه انتهای منحنی می باشد و نقطه سوم مکان نقطه پایانی منحنی را تعیین می کند. (شکل زیر) دستور بعدی برای رسم منحنی ، دستور S است. گاهی لازم میشه چند منحنی Bézier را به صورت دنباله دار در کنار هم داشته باشیم. که معموملا منحنی ها یکی در میان انعاکاسی از منحنی قبلی هستند تا شیب و انحنا بصورت متوازن بماند (مانند یک خط موجی یا زیگزاگ). در این موارد برای کوتاه تر کردن کد میتوان از دستور S استفاده کرد تا نیاز نباشد مختصات دستگیره منعکس شده را بنویسیم. در نتیجه دستور S فقط دو نقطه به عنوان پارامتر قبول میکنه و نیازی به تعیین دستگیره اولی نداره چرا که دستگیره اولی را همان نقطه انعکاسی دستگیره دوم منحنی قبلی که توسط دستور C یا S تعیین شده است، در نظر می گیرد. پارامتر اول دستور S دستگیره ای برای نقطه پایانی منحنی و پارامتر دوم خود نقطه پایانی منحنی را تعیین می کند. برای درک بهتر شکل زیر را ببینید. دستور Q روشی دیگه برای خطوط منحنی می باشد. سینتکس این دستور ساده تر ازدستور C است. این دستور فقط یک کنترل کننده دارد و آن کنترل کننده مسئول تنظیم انحنا برای هر دو نقطه آغاز و پایان منحنی می باشد. در نتیجه دستور Qدو نقطه به عنوان پارامتر می پذیرد، یک نقطه پایانی منحنی و یک نقطه کنترل کننده برای هر دو نقطه آغاز و پایان منحنی. تا الان متوجه شدید برای دستورانی مثل S و Q نقطه اول منحنی را تعیین نمی کنیم چراکه مکانی که قلم وجود دارد همان نقطه آغاز منحنی در نظر گرفته میشه؟… دستور T مانند دستور S یک دستور کوتاه کننده برای دستور Q است اما چند نکته مهم در رابطه با این دستور وجو داره: اول: دستور T وقتی بدرستی کار می کنه که دستور قبلی آن T یا Q باشه در غیر این صورت نقطه کنترل کننده نقطه قبلی منحنی در نظر گرفته می شه که نتیجه فقط یک خط راست خواهد بود. دوم: نسخه q و t نیز برای این دو دستور وجود دارند که همان نسخه نسبی می باشند. سوم: رسم منحنی توسط Q آسان تر است چرا که فقط یک کنترل کننده داریم اما با دستور C می توانیم منحنی های دقیق تر و پیچیده تری رسم کنیم. آخرین دستور برای ایجاد خطوط منحنی در SVG با ابزار path دستور A می باشد که به کمک آن می توان یک قوس یا کمان بیضوی رسم کرد. در حقیقت با این دستور قسمتی از یک بیضی را به کمک یک بیضی دیگه برش میزنیم! یعنی خروجی نهایی بخشی از یک بیضی خواهد بود. سینتکس مسیر برای این منحنی بصورت زیر است: دو ویژگی دیگر یعنی large-arc-flag و sweep-flag نیاز به توضیحات بیشتری دارند؛ تصور کنید برای دستور A تمام مقادیر بالا را تعیین کردیم. با توجه به شکل زیر وقتی دو بیضی با هم تداخل دارند حاصل چهار منحنی است که با رنگهای مختلف نشان داده شده اند. اینکه کدام منحنی به عنوان نتیجه نهایی دستور A نمایش داده شوند به این دو ویژگی بستگی دارد که با توجه به مقادیر آنها – که فقط صفر یا یک است – چهار خروجی متفاوت می توان در نظر گرفت. به شکل زیر دقت
همانطور که گفتیم تصاویر SVG از نوع گرافیک برداری هستند و با نرم افزارهای ویژه گرافیک برداری میشه اونها رو طراحی و ویرایش کرد. بهترین نرم افزار برای این کا از نظر من ادوبی ایلوستراتور هست که میتوان از آن خروجی SVG گرفت. در زیر هم چندتا از بهترین ابزارهای ایجاد و ویرایش آنلاین تصاویر SVG را آوردیم. SVGator، CorelDRAW Vector، Vecteezy، Vecta، Snap.svg، SVG Morpheus، Chartist.js، Chartist.js، Glyphter، iconizr و چند منبع برای یادگیری بهتر دستورات path: چکیده:
ایجاد خطوط منحنی در SVG با ابزار path
<path d='M 20 40 C 10 22 55 35 50 40' />
<path d='M 20 50 C 20 30 50 30 50 50 S 80 70 80 50' />
ایجاد خطوط منحنی در SVG با دستور Q, q, T, t Quadratic Bézier
<path d='M 20 22 Q 32 0 62 32' />
<path d='M 0 32 Q 0 6 32 32 T 64 32' />
ایجاد خطوط منحنی در SVG با دستور A, a Elliptical Arc
<path d='M 0 0 A rx ry x-axis-rotation large-arc-flag sweep-flag x y' />
به طور کلی large-arc-flag مسوول انتخاب کمان های بزگتر یا کوچکت است. یک، کمان های بزگتر( کمان های زرد و آبی) و مقادر صفر، قوس های کوچکتر (کمان های سبز و ارغوانی) را انتخاب میکند.
sweep-flag کمان سمت راست یا چپ را نتخاب میکند . مقدار یک، قوس سمت راست (کمان های زرد و ارغوانی) را انتخاب میکند و مقدار چپ کمان چپی (کمان های سبز و آبی) را انتخاب میکند.
ابزارهای سودمند:
آموزش Path قسمت دوم: ایجاد خطوط منحنی در SVG
pro
