illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

textures.js : الگوهای SVG زیبا برای شکلها و داده ها

0 1239 ۴ فروردین ۹۴

در این مطلب میخوام یک ابزار بنام textures رو خدمت شما معرفی کنم و نحوه استفاده از اونو آموزش بدم.

textures

 

فرض کنید یک نقشه یا شکل یا هرچیز دیگه ای دارید و میخواید برای اون یک الگو یا pattern قرار بدین. راههای زیادی برای اینکار وجود داره ، از جمله استفاده از تصویر ، استفاده از کدهای CSS و ...

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

میبینید که یک دایره قرار داده شده و الگوی شش ضلعی های کوچک ( شبیه به لانه زنبور ) به آن اعمال شده.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به d3.min.js و textures.min.js نیاز داریم. این فایلهارو رو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم.

کتابخانه d3 یک ابزار برای کار کردن راحتتر با SVG هست. برای استفاده از textures باید این کتابخانه رو به سندمون اضافه کنیم.

اولین کاری که باید انجام بدیم ، اینه که بیایم و اون المنتی که میخوایم برای اون الگو قرار بدیم رو مشخص کنیم و درست کنیم. این المنت یا از قبل آماده شده و یا میتونین اونو خودتون تهیه کنید. برای این کار در ابتدا یک div با id = example رو قرار میدم ، بصورت زیر :

حالا باید با استفاده از کتابخانه d3 این div رو انتخاب کنم و عنصر svg رو با استفاده از Javascript درون اون بسازم. بصورت زیر :

میبینید که در ابتدا یک متغیر بنام svg ساختیم. بعد متد select از d3 رو فراخوانی کردیم و آدرس div مورد نظر رو بهش دادیم. بعد از اون با استفاده از متد append یک عنصر از نوع svg رو درون div جاسازی کردیم.

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

اگر با jquery آشنایی داشته باشین ، با attr و style هم آشنا هستین. این متدها در کتابخانه d3 وجود دارن و میتونین از قدرت اونا بهره بگیرین. میبینید که width و height رو 450 در نظر گرفتم. واحد این مقادیر پیکسل هست. همچنین رنگ هگزادسیمالی رو برای پس زمینه SVG مشخص کردم.

حالا باید الگوی خودمون رو قرار بدیم. برای اینکار باید به این صفحه برید و یکی از الگوهایی که مدنظرتون هست رو انتخاب کنید. فرض کنید من الگوی زیر رو انتخاب کردم :

textures1

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

  • Lines : الگوهای خطی مانند :
    textures2
  • Circles : الگوهای دایره ای مانند :
    textures3
  • Paths : الگوهای مسیری مانند :
    textures4

الگویی که در بالا انتخاب کردیم رو بخاطر بیارید. شبیه به لانه زنبور و یک نمونه از الگوهای مسیری ( Path ) بود. خب در ابتدا باید یک متغیر بنام مثلا t بسازید و کدهای جلوی الگوی انتخاب شده رو درون اون قرار بدین ، بصورت زیر :

اگر با SVG آشنایی مقدماتی داشته باشین با کلماتی همچون stroke-with ( ضخامت خط ) و stroke ( تعیین رنگ و استایل خط ) و fill ( تعیین استایل درون المنت ) و ... آشنایی دارید.

درون هر کدی که روبروی هر الگو قرار داره ، تعدادی عدد وجود داره که میتونین با کم و زیاد کردن اونا سایزها و ... رو تغییر بدین ، تا به شکل مد نظر شما نزدیکتر بشه.

بعد از اینکه متغیر t رو ساختیم و الگو رو با استفاده از شئ textures برای اون تعریف کردیم ، باید کد زیر رو قرار بدیم :

این کد باعث میشه که الگوی t که ساختیم به عنصر svg که نیز در بالا ساختیم ، نسبت داده بشه. با اینکار میتونیم از این الگو در این عنصر svg استفاده کنیم. حالا نوبت به این میرسه که شکل مورد نظر خودمون که میخوایم pattern براش قرار بدیم رو بسازیم. من در این مطلب میخوام دایره ( circle ) بسازم ، شما میتونین مربع ، مستطیل ، ستاره ، مثلث و یا هر شکلی که بخواید رو بسازید.

برای ساختن دایره باید با استفاده از دستور append یک المنت circle رو به svg که در بالا ساختیم اضافه کنیم ، بصورت زیر :

بعد از اون باید استایلها و ویژگیهای مد نظرتون رو به این دایره اعمال کنید. بصورت زیر :

میبینید که در ابتدا متد attr رو قرار دادیم و درون اون ویژگی های مورد نظر رو نوشتیم. بازم تکرار میکنم اگر با SVG آشنا باشین باید با اصطلاحات بالا آشنایی داشته باشین. ولی برای کسانی که آشنایی ندارن دوباره مطرح میکنم :

  • r : شعاع دایره
  • cx : فاصله مرکز دایره از سمت چپ
  • cy : فاصله مرکز دایره از سمت بالا
  • stroke : استایل border دایره
  • stroke-width : ضخامت border دایره

در قدم نهایی باید الگوی مورد نظر رو به این circle نسبت بدین. برای اینکار باید آدرس الگو رو در مقدار ویژگی fill قرار بدین ، تا الگو به بدنه و درون دایره اعمال بشه. برای اینکار باید کد بالا رو به صورت زیر ویرایش کنید :

میبینید که یک style قرار دادیم و بعد از اون ویژگی fill رو نوشتیم. برای مقدار این ویژگی متد url از متغیر t که در بالا ساختیم و همان الگوی ما هست رو قرار دادیم. با اینکار الگوی مورد نظر به بدنه این دایره اعمال میشه و اگر در خروجی مشاهده کنید میبینید که کار انجام شده. اگر مراحل بالارو درست انجام داده باشین ، برای اعمال این الگوی لانه زنبوری ، باید کدی همانند کد زیر داشته بشین :

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram