در جلسه قبل در مورد متدهای transform و setTransform و resetTransform توضیحاتی رو قرار دادیم. در این جلسه در مورد Compositing یا ترکیب کردن اشکال صحبت خواهیم کرد.
Compositing
در همه مثالهایی که در جلسات قبل با هم بررسی کردیم، شکلهای جدیدی که رسم می‌کردیم، بر روی شکلهای قدیمی‌تر قرار میگرفتن. این نحوه قرار گرفتن اشکال بر روی هم، در بسیاری از موارد مناسب و مطلوب هست ولی در بعضی اوقات شاید اون چیزی که ما میخوایم نباشه و لازم باشه که تغییراتی در اون به وجود بیاریم. در این مواقع با استفاده از ویژگی globalCompositeOperation میتونیم حالت پیش فرض رو تغییر بدیم.
شما علاوه بر اینکه میتونین اشکال جدید رو در پشت اشکال قدیمی‌تر قرار بدین، میتونین قسمتی از اشکال که با هم اشتراک دارن رو نمایش بدین و تقریبا هر کاری رو میتونین انجام بدین.
نحوه استفاده از این ویژگی بصورت زیر هست:
ctx.globalCompositeOperation = 'type';
شما میتونین برای ویژگی globalCompositeOperation یکی از 12 نوع و حالت ترکیب شدن رو بصورت رشته ای قرار بدین و با اینکار نحوه ترکیب شدن و قرار گرفتن المنتهای قدیم و جدید فرق خواهند کرد. از حالتهای زیر میتونین به عنوان مقدار برای ویژگی بالا استفاده کنید:
- source-over
- destination-over
- source-in
- destination-in
- source-out
- destination-out
- source-atop
- destination-atop
- lighter
- darker
- xor
- copy
هر کدام از حالتهای بالا، خروجی متفاوتی رو به وجود میارن که ما در اینجا اونا رو بررسی میکنیم. برای فهم بهتر این قضیه، یک مربع و یک دایره رو با رنگهای متفاوت رسم میکنیم و این ویژگی رو برای اونا امتحان میکنیم. کدها در ابتدا بصورت زیر هستند:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
با اینکار خروجی بصورت زیر خواهد بود:
میبینید که بصورت نرمال و طبیعی دایره که المنت جدیدتر هست، بر روی مربع رسم شده است. خب حالا حالتهای مختلف رو با هم بررسی میکنیم.
مقدار source-over:
این مقدار، مقدار پیش فرض ویژگی مورد نظر هست و باعث میشه که اشکال جدید بر روی اشکال قدیمی‌تر رسم شوند. برای استفاده از این ویژگی بصورت زیر عمل میکنیم:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
میبینید که به سادگی مقدار ویژگی رو برابر با source-over قرار دادیم. با اینکار خروجی، مثل تصویر قبل خواهد شد:
مقدار source-in:
اگر از این مقدار استفاده کنیم، باعث میشه که فقط اون قسمتی از شکل جدید (دایره) که با شکل قبلی (مربع) اشتراک دارن نمایش داده بشه و بقیه قسمتها مخفی و Transparent میشه. کدها بصورت زیر خواهد بود:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);
ctx.globalCompositeOperation = 'source-in';
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
خروجی در مرورگر بصورت زیر میشه:
میبینید که فقط اشتراک دو شکل در خروجی نمایش داده میشه.
مقدار source-out:
اون قسمتهایی از شکل جدید که با شکل قدیمی اشتراک نداره، رسم و نمایش داده میشه و بقیه قسمتها شفاف و Transparent میشن. کدها بصورت زیر میشه:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);
ctx.globalCompositeOperation = 'source-out';
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
خروجی در مرورگر:
مقدار source-atop:
اون قسمتهایی از شکل جدید که با شکل قدیمی اشتراک و همپوشانی ندارن، مخفی میشن. اون قسمتهایی که اشتراک داره، بر روی شکل قدیمی نمایش داده میشه. کدها بصورت زیر میشه:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);
ctx.globalCompositeOperation = 'source-atop';
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
خروجی در مرورگر بصورت زیر میشه:
به همین راحتی.
در جلسات بعد با ادامه آموزش در خدمتتون هستیم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !