Canvas Transformations

‎تبديلات دربوم ـCanvas Transformations

‎هنگاميكه در بوم بصورت نرمال ترسيمي انجام ميشود، ترسيم همان است كه درمتد و ويژگي هاي ‎اعمال شده مشاهده ميكنيد .اما ميتوان با استفاده از متدهائي تغييرات در ترسيم مثل ‎مقياس ، مكان، جهت و ... اعمال نمود .دراين صفحه متدهاي تبديلي بوم كه مربوط مي ‎باشند ، تشريح ميگردد.

‎جدول متدهاي تبديلي دربوم همراه لينك داخلي وتشريح آنها در زير آمده است.

‎متدCanvas scale()‎

‎متد‎scale()‎‎ براي شئ زمينه دوبعدي‎(context)‎ مقياس ترسيم برقرار ‎ميكند .درصورتيكه براي شئ مقياس اعلام نشود همان مقياس عادي يعني‎scale(1,1)‎ ‎بدون تبديلي اعمال ميشود.

‎مثال ـ مستطيلي با مقياس معمول ترسيم ودوباره بامقياس‎200%‎ رسم ميشود .

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);

‎فرمت استفاده ـSyntax

<;>contxt.scale(scalwidth,scaleheight)

‎مقادير پارامتر ـparameter Values

‎مثال ـ مستطيلي ترسيم ميكند .مقياس به‎200%‎ تنظيم ودوباره مستطيلي رسم ميشود. ‎مقياس دوباره به‎200%‎ تنظيم ومستطيل ترسيم ميگردد.اين كار يك بار ديگر هم انجام ‎ميشود.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// scales 100%
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2); //scales 200%
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2); //scales 400%
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2); //scales 800%
ctx.strokeRect(5, 5, 25, 15);

‎متدCanvas rotate()‎

‎متد‎rotate()‎‎ ترسيم شئ زمينه‎(‎context‎)‎ مرتبط را چرخش ‎ميدهد.

‎مثال ـ مستطيل را بيست در جه چرخش ميدهد.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50, 20, 100, 50);

‎فرمت استفاده ـSyntax

‎مقادير پارامتر ـParameter Values

‎متدCanvas translate()‎

‎با متد‎translate()‎‎ نقطه ‎(0,0)‎ شئ زمينه ‎(‎context‎)‎ ‎دوباره ترسيم ميگردد.

‎مثال ـ مستطيلي در نقطه‎(10,10)‎ ترسيم ميشود .نقطه‎(0,0)‎ بامتد ‎translate(70,70)‎روي‎(70,70)‎ تنظيم ميشود .با ترسيم مجدد ‎مستطيل،ترسيم آن از نقطه‎(80,80)‎ شروع ميشود.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 100, 50);

context.translate(x,y)

‎مقادير پارامتر ـParameter Values

‎متدCanvas transform()‎

‎متد‎transform()‎‎ شئ زمينه‎(‎context‎)‎ را روي موارد ‎مقياس، چرخش ، انتقال ياحركت، وكجي براي ترسيم تنظيم ميكند.

‎هر شئ در بوم براي ترسيم داراي يك ماتريس تبديل‎(transformation matrix)‎ميباشد.

‎مثال ـ ترسيم مستطيل . يك ماتريس جديد با متد‎transform()‎‎ اضافه ميشود .مستطيل ‎مطابق روال قبلي وماتريس تبديل جاري ترسيم ميشود .مجددا اضافه نمودن ماتريس ورسم مستطيل.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(0, 0, 250, 100)

ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);

ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);

‎فرمت استفاده ـSyntax

context.transform(a,b,c,d,e,f)

‎مقادير پارامتر ـParameter Values

‎متدCanvas setTransform()‎

‎متد‎settransform()‎‎ زمينه‎(‎contex‎)‎ را براي مقياس، چرخش، حركت ‎و كجي تنظيم ميكند .هر شئ در بوم داراي يك ماتريس تبديل است .متد فوق ماتريس تبديل را ‎به ماتريس هويت‎(identity matrix)‎ بازنشاني ميكند وسپس ‎transform()‎‎ ‎باهمان آرگومان ها اجرا ميكند.

‎مثال ـ مستطيلي ترسيم ميكند .ماتريس تبديل بازنشاني‎(reset)‎ ميشود .دوباره مستطيل ‎كشيده ميشود

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(0, 0, 250, 100)

ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);

ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);

‎هرموقعي كه متد‎setTransform()‎‎ فراخواني ميشود، ماتريس تبديل جديدي ساخته ‎ميشود .درمثال بالا مستطيل قرمز پنهان ونمايان نيست، زيرا آن پشت مستطيل سبز قرار دارد.

‎فرمت استفاده ـSyntax

context.setTransform(a,b,c,d,e,f)

‎مقادير پارامتر ـParameter Values