تخفیف ویژه

شروع کار مقدماتی با HTML5 Canvas (جلسه 20) : Transformation یا تبدیل - Rotating و Scaling

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۱۳ اردیبهشت ۱۳۹۶

html-canvas

در جلسه قبل در مورد اولین متد مربوط به تبدیل که Translating یا انتقال بود، براتون توضیحاتی رو قرار دادیم. در این جلسه در مورد دو متد Rotate و Scale صحبت خواهیم کرد.

Rotating یا چرخش

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

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

حالا یک مثال ساده رو با هم بررسی میکنیم تا بهتر با این متد آشنا بشیم. کد زیر رو در نظر بگیرید:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillRect(70, 0, 100, 30);

با اینکار یک مستطیل 100 در 30 در موقعیت 70 و 0 رسم خواهد شد. بصورت زیر:

حالا میتونیم قبل از رسم مستطیل، محور مختصات رو بچرخونیم. بصورت زیر:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.rotate(45 * Math.PI / 180);
ctx.fillRect(70, 0, 100, 30);

خروجی در مرورگر بصورت زیر میشه:

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

به همین راحتی. قبل از چرخاندن محور مختصات میتونین با استفاده از متد save وضعیت فعلی رو ذخیره کنید تا در موقع لازم با استفاده از متد Restore آخرین وضعیت ذخیره شده رو بازگردانی کنید.

Scaling یا بزرگ و کوچک کردن

متد بعدی مربوط به تبدیلات، متد Scale هست. با استفاده از این متد میتونیم واحدها درون Canvas رو کاهش یا افزایش بدیم. دستور استفاده از این متد بصورت زیر هست:

ctx.scale(x, y);
  • x : مقیاس در جهت افقی
  • y : مقیاس در جهت عمودی

هر دو ورودی بالا، اعداد حقیقی هستن. اگر عدد وارد شده کمتر از 1 باشه، باعث میشه که سایز کوچکتر و اگر بزرگتر از 1 باشه، باعث میشه که سایز مورد نظر بزرگتر بشه. اگر مقدار 1 رو قرار بدیم، تغییری در خروجی اعمال نمیشه. با استفاده از قرار دادن عدد منفی میتونین جهت محور رو تغییر بدین و اون رو برعکس کنید.

بصورت پیش فرض، یک واحد Canvas، یک پیکسل هست. حالا مثلا اگر ما برای x مقدار 0.5 رو قرار بدیم، باعث میشه که هر واحد مربوط به Canvas، بجای 1 پیکسل، نیم پیکسل فضا اشغال کنن و به همین دلیل در خروجی سایز مورد نظر نصف خواهد شد.

حالا مثالهایی رو با هم بررسی میکنیم تا به خوبی با این متد آشنا بشیم. کد زیر رو در نظر بگیرید:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillRect(10, 10, 10, 10);

خروجی بصورت زیر میشه:

حالا اگر از متد Scale استفاده کنیم، بصورت زیر میشه:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.scale(10, 3);
ctx.fillRect(10, 10, 10, 10);

خروجی در مرورگر:

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

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.scale(-1, 1);
ctx.font = "36px serif";
ctx.fillText("Hello world!", -200, 120);

خروجی بصورت زیر میشه:

همونطور که میبینید جهت محور افقی برعکس شده و مقادیر منفی در سمت راست و مقادیر مثبت در سمت چپ قرار میگیرن. بهمین راحتی.

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

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.