شروع کار مقدماتی با HTML5 Canvas (جلسه 18) : Transformation یا تبدیل - ذخیره و بازگرداندن وضعیت Canvas



visibility  
mode_comment   ۰

html-canvas

در جلسات گذشته در مورد قرار دادن تصاویر به روشهای مختلف درون Canvas براتون توضیحات مفصلی رو قرار دادیم و شما رو با اونا آشنا کردیم. در این جلسه و جلسات بعد قصد داریم که در مورد Transformation یا تبدیلات براتون توضیحاتی رو قرار بدیم.

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

ذخیره و بازگردانی وضعیت Canvas

قبل از اینکه ما نگاهی به متدهای Transformation بندازیم، شما رو با 2 متد ضروری و واجب که استفاده از اونا برای رسم کردن اشکال و ترسیمات پیچیده نیاز هست رو براتون توضیح میدیم.

  • متد save : این متد وضعیت فعلی Canvas رو بصورت کامل ذخیره میکنه
  • متد restore : این متد آخرین وضعیت ذخیره سازی شده با استفاده از متد save رو بازگردانی میکنه

State یا وضعیت های canvas درون Stack یا ردیف پست سر هم قرار میگیرن. هر بار که متد Save صدا زده میشه، وضعیت فعلی Canvas به Stack اضافه میشه. هر State مربوط به Canvas شامل موارد زیر هست و موارد زیر ذخیره سازی میشن:

  • Transformation ها و تبدیلاتی که اعمال شده است. از قبیل Translate و Rotate و Scale و ...
  • مقدار فعلی ویژگی های زیر:
  1. strokeStyle
  2. fillStyle
  3. globalAlpha
  4. lineWidth
  5. lineCap
  6. lineJoin
  7. miterLimit
  8. lineDashOffset
  9. shadowOffsetX
  10. shadowOffsetY
  11. shadowBlur
  12. shadowColor
  13. globalCompositeOperation
  14. font
  15. textAlign
  16. textBaseline
  17. direction
  18. imageSmoothingEnabled
  • مقدار فعلی Clipping Path که در جلسات بعدی در مورد اون براتون توضیح میدیم.

پس با هر بار استفاده از متد Save تمامی اطلاعات بالا ذخیره سازی میشن. هر بار که دلتون بخواد و در هر جایی از اجرای برنامه میتونین متد Save رو استفاده کنید و این حالت Canvas به Stack یا صف اضافه میشه و هر بار که متد restore رو فراخوانی میکنید، آخرین وضعیت ذخیره شده لود میشه و تنظیمات اون اعمال میشه. هر چه که از restore استفاده کنید، به وضعیتهای ذخیره شده قدیمی تر که در صف یا Stack قرار دارن، دسترسی پیدا خواهید کرد. در اینجا مثالی رو براتون قرار میدم که با استفاده از اون دو متد Save و Restore رو به خوبی متوجه خواهید شد. کد زیر رو در نظر بگیرید:

همونطور که دیدید در خط 4 یک مربع رسم کردیم و چون استایل اون رو مشخص نکردیم، استایل پیش فرض که همون رنگ مشکی هست، اعمال میشه. بعد از اون این وضعیت رو ذخیره کردیم تا بعدا بهش دسترسی داشته باشیم. در خط 7 یک رنگ تقریبا آبی رو برای استایل قرار دادیم و یک مربع کوچکتر رو رسم کردیم و با اینکار یک مربع آبی درون مربع سیاه رسم خواهد شد. بعد از اون مجددا وضعیت فعلی رو ذخیره کردیم. پس تا اینجای کار دو تا وضعیت رو به صف یا Stack اضافه کردیم. بعد از اون یک مربع دیگه با رنگ سفید و شفافیت 0.5 رو رسم کردیم. در خط 15 از متد restore استفاده کردیم. بنابراین آخرین وضعیت ذخیره سازی شده فراخوانی میشه و رنگ استایل آبی قرار داده میشه. بنابراین مربعی که در خط 16 رسم میشه، با استایل آبی رنگ رسم خواهد شد. در خط 18 یک بار دیگر از Restore استفاده شده و در اینجا به وضعیت ذخیره سازی شده قبلی میره و در این حالت رنگ استایل مشکی هست. پس مربعی که در خط آخر رسم میشه، با رنگ مشکلی رنگ رسم خواهد شد. بنابراین خروجی در مرورگر بصورت زیر خواهد بود:html5 canvas 55

امیدوارم که به خوبی این متدها رو متوجه شده باشید. با استفاده از این متدها راحتتر میتونین با اشکال و رسم های پیچیده تر کار کنید.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

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

موفق باشید

یا علی

Source

متخصص فرانت اِند
طراحی وب را اصولی فرا بگیرید اگر تصمیمتو گرفتی که به صورت حرفه ای به طراحی UI مشغول بشی و کسب درآمد کنی دوره فرانت اند رو از دست نده، چون توی این دوره هر چیزی که برای رسیدن به هدفت نیاز داری رو در اختیارت قرار می دیم. متخصص فرانت اِند arrow_back
comment دیدگاه کاربران
ارسال نظرات

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