تسلط بر SVG Arcs - Smashing Magazine

بنابراین، من عاشق کشیدن پرندگان با کد هستم. من با الهام از عشق برادرم به پرنده نگری، منحصر به فرد بودن پرها، رنگ ها و صداهای آنها را تحسین می کنم. اما چیزی که من بیشتر متوجه می شوم نحوه انحنای بدن آنها است و پرندگان مختلف می توانند منحنی های بسیار متفاوتی داشته باشند! بنابراین، من عشقم را به طراحی با گرافیک SVG گرفتم و از آن برای آزمایش اشکال پرندگان استفاده کردم. با گذشت زمان، آنقدر نقاشی کشیدم که در کار با اشکال کمان مهارت فوق العاده ای پیدا کردم.

در اینجا تعدادی از کارهای اخیر من است. با الهام از طرح هایی که در Dribbble با آنها برخورد کردم، نسخه های خود را با کد ایجاد کردم. می توانید کدهای مربوط به هر کدام را در CodePen من مرور کنید.

اما قبل از اینکه به ایجاد منحنی ها با کمان بپردازیم، لطفاً اینجا مکث کنید و مقاله اخیر Myriam Frisano، «نمونه های کدنویسی SVG: دستورالعمل های مفید برای نوشتن وکتورها با دست» را بررسی کنید. این یک آغازگر عالی برای نحو SVG است و به شما زمینه ای محکم می دهد تا به مفاهیمی که در اینجا پوشش می دهیم، در هنگام تسلط بر آن بپردازید. آرک های SVG.

یک تجدید کننده سریع SVG

احتمالاً می دانید که SVGها تصاویر واضح و بی نهایت مقیاس پذیر بدون تخریب پیکسلی هستند - بردارهایی برای پیروزی! چیزی که ممکن است ندانید این است تعداد کمی از توسعه دهندگان کد SVG را می نویسند. چرا؟ خوب، سینتکس در مقایسه با مثلا HTML پیچیده و ناآشنا به نظر می رسد. اما به من اعتماد کنید، هنگامی که آن را تجزیه کنید، نه تنها امکان کدگذاری دستی SVG وجود دارد، بلکه بسیار سرگرم کننده است.

بیایید مطمئن شویم که از سرعت SVG برخوردار هستید viewBox زیرا وقتی صحبت از آن به میان می آید یک مفهوم کلیدی است مقیاس پذیر بخشی از *SVG. برای توضیح این مفهوم از قیاس دوربین، لنز و بوم استفاده خواهیم کرد. پنجره مرورگر خود را به عنوان یک دوربین و SVG در نظر بگیرید viewBox همانطور که لنز دوربین بر روی نقاشی پرنده ای که شما ایجاد کرده اید (SVG) تمرکز می کند. نقاشی را روی یک بوم بزرگ تصور کنید که ممکن است بسیار فراتر از آنچه دوربین می گیرد کشیده شود. را viewBox مشخص می کند که کدام قسمت از این بوم از طریق دوربین قابل مشاهده است.

فرض کنید یک عنصر SVG داریم که اندازه آن را تعیین می کنیم 600px مربع با width و height به طور مستقیم بر روی عنصر

بیایید توجه خود را معطوف کنیم viewBox ویژگی:

را viewBox ویژگی سیستم مختصات داخلی را برای SVG تعریف می کند، با چهار مقدار که به ترتیب به x، y، عرض و ارتفاع SVG نگاشت می شوند.

در اینجا نحوه ارتباط این موضوع با قیاس ما آمده است:

• موقعیت و اندازه دوربین
  را -300, -300 موقعیت لبه چپ و بالای لنز دوربین را نشان می دهد. در همین حال، 600 x 600 مانند اندازه فریم دوربین است که بخش خاصی از آن فضا را نشان می دهد.
• اندازه بوم بدون تغییر
  تغییر دادن x و y مقادیر مکان هایی را که دوربین نشان می دهد تنظیم می کند و width و height تعیین می کند که چه مقدار از بوم را فریم می کند. اندازه بوم واقعی را تغییر نمی دهد (خود عنصر SVG، که باقی می ماند 600×600 پیکسل). مهم نیست که دوربین در کجا قرار گرفته یا زوم شده است، خود بوم ثابت می ماند.

بنابراین، هنگامی که شما تنظیم کنید viewBox مختصات، شما به سادگی یک ناحیه جدید از بوم را برای تمرکز روی آن انتخاب می کنید، بدون اینکه اندازه خود بوم را تغییر دهید. این به شما امکان می دهد بدون تغییر ابعاد واقعی نمایشگر SVG، ناحیه قابل مشاهده را کنترل کنید.

اکنون زمینه ای را دارید که باید یاد بگیرید چگونه با آن کار کنید عناصر در SVG، جایی که ما شروع به کار با کمان می کنیم!

را عنصر

ما یک عنصر و ما محتویات عنصر را از طریق "عدسی" a مشاهده می کنیم viewBox.

الف به ما اجازه می دهد تا اشکال را ترسیم کنیم. ما عناصر دیگری برای ترسیم اشکال داریم - یعنی ، ، و - اما تصور کنید که به عنوان یک هنرمند محدود به اشکال هندسی دقیق هستید. اینجا رسم است عنصر وارد می شود. از آن برای ترسیم اشکال پیچیده استفاده می شود که نمی توان با شکل های اصلی ایجاد کرد. فکر کن به عنوان یک ظرف منعطف که به شما امکان می دهد دستورات طراحی مختلف را ترکیب و مطابقت دهید.

با یک تک ، می توانید چندین دستور طراحی را در یک طرح صاف و زیبا ترکیب کنید. امروز، ما روی یک دستور مسیر فوق العاده خاص تمرکز می کنیم: قوس ها به عبارت دیگر، کاری که ما انجام می دهیم این است که اشکال کمانی را با آن ترسیم می کنیم .

در اینجا یک مثال سریع و بدون زواید آورده شده است که a داخل مثالی که قبلا به آن نگاه کردیم:

       fill="transparent"    stroke="black"    stroke-width="24"  />

حالا، متوجه شدم. نگاه کردن به آن رشته اعداد برای اولین بار مانند خیره شدن به ماتریکس است، درست است؟ اما هنگامی که به آن دست پیدا کردید، خواهید دید که قوس ها به آن اندازه که به نظر می رسند ترسناک نیستند.

بیایید تجزیه کنیم در آن مثال ما آن را حتی بیشتر در بخش بعدی تجزیه خواهیم کرد، اما در حال حاضر:

• M 0 0 مسیر را به مرکز حرکت می دهد viewBox اما در واقع هنوز چیزی "نقاشی" نمی کند.
• A 100 100 0 1 1 200 0 کمانی به شعاع رسم می کند 100 در هر دو محور X و Y، به پایان می رسد (200, 0).

شما می توانید موقعیت های مختصات را به رنگ قرمز حاصل از متفاوت تجسم کنید M دستورات در دمو زیر:

ببینید که؟ دو نقطه در امتداد محور X داریم که نسبت به viewBoxمرکز، و یک خط منحنی آنها را به هم متصل می کند. اکنون بدانید که اعداد موجود در an M دستورات مختصات و اعداد را در یک تنظیم می کنند A دستور ترسیم یک خط در امتداد محورهای SVG. شما فقط یک منحنی در SVG کشیدید!

تشریح یک قوس

می توانیم بزرگنمایی کنیم M و A دستورات حتی بیشتر برای درک بهتر آنچه اتفاق می افتد.

اول از همه، ما با یک قوس یا به طور دقیق تر، کار می کنیم قوس بیضوی، که یک خط منحنی است. ما می دانیم که یک دایره کامل فقط یک دایره است بیضی با شعاع مساوی در هر دو جهت X و Y. ما می توانیم شکل دایره را با دادن مقادیر شعاع متفاوت و نامتناسب به آن تغییر دهیم.

این چیزی است که ما تاکنون می دانیم:

• M
  • 0: در امتداد محور X هماهنگ کنید.
  • 0: در امتداد محور Y هماهنگ کنید.
• A
  • 100: مقدار شعاع در جهت X.
  • 100: مقدار شعاع در جهت Y.
  • 200: نقطه پایانی قوس در جهت X.
  • 0: نقطه پایانی قوس در جهت Y.

سه مقدار در A دستوری که به نوعی نادیده گرفتیم. اینها مانند "سوئیچ" هستند به این معنا که آنها مقادیر بولی هستند که چیزهای خاصی را در مورد قوس فعال یا غیرفعال می کنند.

• 0: قوس را در امتداد محور X می چرخاند.
• 1: تعیین می کند که آیا این یک قوس "کوچک" است (0) با دهانه بیشتر از 180 درجه یا قوس "بزرگ" (1) با دهانه بیشتر از 180 درجه.
• 1: تنظیم می کند که آیا قوس در جهت عقربه های ساعت حرکت کند یا در خلاف جهت عقربه های ساعت، جایی که 0 برابر است در جهت عقربه های ساعت و 1 برابر است در خلاف جهت عقربه های ساعت

اگر این اطلاعات را بگیریم و دوباره بنویسیم با این تعاریف، سپس با وضوح بیشتری شروع به جمع شدن می کند:

شاید بتوانیم با استفاده از اختصارات آن را کمی ساده کنیم:

بیایید این اطلاعات را بگیریم و شروع به بازی با ارزش ها کنیم تا ببینیم چگونه رفتار می کند.

تجسم امکانات

دوباره، اگر این است ما با این شروع می کنیم:

سپس، ما می توانیم آن را به روش های بی شماری دستکاری کنیم. از نظر ریاضی، می توانید با تنظیم پارامترها، تعداد بی نهایت کمان بین هر دو نقطه ایجاد کنید. در اینجا چند تغییر از یک کمان وجود دارد که وقتی تنها کاری که انجام می دهیم این است که نقاط انتهایی قوس را در X تغییر دهیم، به دست می آوریم () و Y () جهت ها

یا اجازه دهید عرض و ارتفاع قوس را با به روز رسانی شعاع آن در جهت X کنترل کنیم () و جهت Y (). اگر با آن بازی کنیم مقدار، می توانیم ارتفاع قوس را دستکاری کنیم:

به طور مشابه، ما می توانیم با به روزرسانی عرض قوس را دستکاری کنیم ارزش:

بیایید ببینیم وقتی کمان را در امتداد محور X می چرخانیم چه اتفاقی می افتد (). این پارامتر بیضی کمان را به دور مرکز آن می چرخاند. این بر دایره ها تأثیر نمی گذارد، اما یک تغییر دهنده بازی برای بیضی ها است.

حتی با مجموعه ای ثابت از نقاط پایانی و شعاع ( و ) و یک زاویه چرخش معین، چهار کمان مجزا می توانند آنها را به هم متصل کنند. این به این دلیل است که ما آن را داریم مقدار flag که می تواند یکی از دو مقدار و همچنین مقدار باشد پرچمی که یکی از دو مقدار است. دو مقدار بولی، هر کدام با دو آرگومان، چهار احتمال متمایز را به ما می دهند.

و در آخر، تنظیم نقطه پایانی قوس در امتداد X () و Y () جهت ها مکان قوس را بدون تغییر شکل کلی تغییر می دهد.

بسته بندی

و شما آن را دارید، کمان SVG ابهام زدایی شده است! چه در حال دستکاری شعاع، چرخش یا جهت قوس باشید، اکنون همه ابزارها را برای تسلط بر این منحنی های زیبا در اختیار دارید. با تمرین، آرک ها تنها بخشی دیگر از جعبه ابزار SVG شما خواهند شد، ابزاری که به شما قدرت ایجاد می دهد. طرح های پویاتر و پیچیده تر با اعتماد به نفس

بنابراین به بازی کردن ادامه دهید، به آزمایش ادامه دهید و به زودی مانند یک حرفه ای قوس ها را خم خواهید کرد - SVG های خود را نه تنها کاربردی، بلکه به زیبایی هنری می کنید. اگر از این شیرجه به آرک لذت بردید، لایک کنید یا با دوستان خود به اشتراک بگذارید. بیایید مرزهای کاری را که SVG می تواند انجام دهد را به پیش ببریم!

(gg, yk)