شروع کار مقدماتی با HTML5 Canvas (جلسه 21) : Transformation یا تبدیل - setTransform و resetTransform

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

html-canvas

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

متد transform

آخرین متد مربوط به Transformation، متد Transform هست که شما مستقیما میتونین با استفاده از ماتریس مربوطه، اون رو تغییر بدین. شما میتونین با استفاده از این ماتریس سه کار قبلی از جمله Translating و Rotating و Scaling و Skewing رو انجام بدین. برای این کار شما باید یک ماتریس 3 در 3 رو مشخص کنید.

همونطور که میبینید در ردیف سوم و ستون آخر این ماتریس، عدد 1 قرار داده شده و بقیه 0 هستن. در ردیف اول و ستون اول کلمه x_scale قرار داده شده. این کلمه به معنای این هست که هر عددی در اینجا قرار بگیره، میزان Scale شدن افقی رو مشخص میکنه. کلمه y_translate به معنای اینه که هر عددی در اینجا قرار بگیره، مقدار جابجا شدن المنت در مسیر عمودی رو مشخص میکنه.

در هر لحظه، Canvas مورد نظر یک ماتریس Transform داره که وضعیت فعلی رو مشخص میکنه. اگر شما از متد transform استفاده کنید و ماتریس بالا رو بهش بدین، این ماتریس در ماتریس فعلی canvas ضرب میشه و خروجی به عنوان ماتریس Transform قرار داده میشه. همونطور که میبینید فقط 2 ردیف اول از ماتریس بالا مقادیر متفاوتی دارند. به همین دلیل درون متد transform لازم نیس که 9 عضو رو مشخص کنیم و فقط 6 عضو رو مشخص میکنیم. دستور استفاده از این متد بصورت زیر هست:

ctx.transform(x_scale, x_skew, y_skew, y_scale, x_translate, y_translate);

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

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

ctx.transform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

همونطور که میبینید، میزان skew شدن در جهت افقی رو 1 قرار دادیم و با اینکار بجای رسم یک مربع 100 در 100، خروجی بصورت زیر خواهد بود:

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

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

ctx.rotate(30 * Math.PI / 180);

ctx.transform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

میبینید که در ابتدا 30 درجه canvas رو چرخانده ایم و بعد از اون با استفاده از متد transform، میخواهیم که canvas رو به صورت افقی skew کنیم. پس ماتریس جدید در ماتریس فعلی ضرب میشه و خروجی بصورت زیر میشه:

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

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

ctx.rotate(30 * Math.PI / 180);

ctx.setTransform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

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

اگر به هر منظور قصد داشته باشید که ماتریس فعلی canvas رو به حالت اول و پیش فرض در بیارید، میتونین از متد resetTransform استفاده کنید. بصورت زیر:

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

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

ctx.resetTransform();

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

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

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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