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

آخرین مطالب

امکانات وب

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

0 4 ۱۳ اردیبهشت ۹۶

html-canvas

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

Rotating یا چرخش

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

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

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

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

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

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

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

varcanvas=document.getElementById('canvas');

varctx=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 پیکسل، نیم پیکسل فضا اشغال کنن و به همین دلیل در خروجی سایز مورد نظر نصف خواهد شد.

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

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

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

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

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

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.scale(10,3);

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

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

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

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.scale(-1,1);

ctx.font="36px serif";

ctx.fillText("Hello world!",-200,120);

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

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

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

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

موفق باشید

یا علی

Source

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 387 تاريخ : جمعه 15 ارديبهشت 1396 ساعت: 3:03

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

آخرین مطالب

امکانات وب