تحويلات الرسمية في HTML5

طرق تحويل لوحة HTML5، عرض أمثلة على الإنترنت حول كيفية استخدام لوحة HTML5 لتحويلات الدوران، التحريك، التكبير، دوران حول نقاط مختلفة، تكبير النسب، إلخ.

يمكن تطبيق التحويل على أي محتوى يتم رسمه على لوحة HTML5. إليك قائمة بالتحويلات التي يمكنك تطبيقها:

• تحريك (تحريك المحتويات المرسومة)

• الدوران

• التكبير

في هذا المقال، يتم تقديم جميع هذه التحويلات

مصفوفة التحويل

يمكن تعيين مصفوفة التحويل في سياق 2D. ستتم ضرب هذه المصفوفة في جميع المحتويات المرسومة على اللوحة. بالنسبة للمثال الذي أستخدمه في هذا الدرس، قمت بتعيينها إلى مصفوفة الهوية، والتي تقوم بضرب مجموعات التوازي x، y في التوازي x، y. بمعنى آخر، لا يتم أي تحويل.
هذا هو طريقة تعيين مصفوفة التحويل إلى مصفوفة الوحدة.

context.setTransform(1, 0, 0, 1, 0, 0);

التحريك

يمكن تطبيق التحريك على جميع المحتويات المرسومة على اللوحة. يعني التحريك إعادة تحديد موقع المحتويات المرسومة. إليك كيفية إعداد التحريك في الكود:

var x = 100;
var y = 50;
context.translate(x, y);

هذا المثال سيدفع جميع الأشكال المرسومة على اللوحة ب100 وحدة على المحور x، و50 وحدة على المحور y.
ملاحظة: التموضع ينطبق فقط على الأشكال التي يتم رسمها بعد استدعاء وظيفة translate(). الأشكال التي تم رسمها قبل استدعاء هذه الوظيفة لا تتأثر.
هذا مثال آخر. تم رسم شكلين مستطيلاً في نفس الموقع، ولكن تم رسم الأول قبل إجراء استدعاء وظيفة translate()، والثاني بعد ذلك.

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas غير مدعوم
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 100, 100);
context.translate(50, 25);
context.fillStyle = "#0000ff";
context.fillRect(10, 10, 100, 100);
</script>

هذا هو النتيجة عند رسمه على اللوحة:

الدوران

يمكنك تطبيق الدوران التلقائي على أي شكل يتم رسمه على لوحة HTML5. يتم القيام بذلك من خلال وظيفة rotate() في سياق 2D. إليك مثال بسيط:

context.rotate(radians);

مقدار الزاوية يتم تقديمه كمعامل للوظيفة rotate(). يجب أن يكون هذا القيمة بالراديان وليس بالدرجات.
جميع الأشكال التي يتم رسمها بعد إعداد الدوران ستدور حول نقطة 0,0 على لوحة الرسم. هذا هو الزاوية العلوية اليسرى للوحة الرسم.
مثل التحريك، يتم تطبيق اللفة فقط على الأشكال التي يتم رسمها بعد استدعاء rotate().
هذا مثال على رسم نفس المربع قبل و بعد إعداد اللفة:

<canvas id="ex2" width="500" height="150" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas غير مدعوم
</canvas>
<script>
　var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d");
　context.fillStyle = "#ff0000";
　context.fillRect(10, 10, 100, 100);
　context.rotate((Math.PI / 180) * 25); // لفة 25 درجة.
　context.fillStyle = "#0000ff";
　context.fillRect(10, 10, 100, 100);
</script>

هذا هو الشكل الذي يبدو عليه عند رسم المربع على الرسم.

لفة حول نقطة مختلفة

كما ذكر سابقاً، جميع الأشكال تدور حول الزاوية العلوية اليسرى من الرسم (0,0). ولكن ماذا إذا كنت ترغب في لفة الشكل حول نقطة مختلفة؟ على سبيل المثال، لفة الشكل حول مركزه الخاص؟
للفة الشكل حول مركزه الخاص، يجب أولاً تحريك الرسم إلى مركز الشكل، ثم لفة الرسم، ثم تحريك الرسم مرة أخرى إلى 0,0، ثم رسم الشكل.
هذا مثال على رمز يجعل المربع الأزرق يدور حول مركزه:

<canvas id="ex3" width="500" height="150" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas غير مدعوم
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var width = 100;
var height = 100
var cx = x + 0.5 * width;
var cy = y + 0.5 * height;
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.translate(cx, cy);
context.rotate((Math.PI / 180) * 25); // لفة 25 درجة.
context.translate(-cx, -cy); // عودة المركز إلى 0,0
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

هذا هو الشكل الذي يبدو عليه عند رسمه على الرسم.

هذا المثال أولاً يتحرك مركز الرسم إلى مركز المربع (cx،cy). ثم يلف الرسم 25 درجة. بعد ذلك، يتحرك الرسم مرة أخرى إلى 0,0. الآن، الرسم يلف حول cx،cy 25 درجة. كل ما ترسمه سيتم عرضه حول cx،cy. في النهاية، يتم رسم المربع وكأنه لم يحدث شيء، ولكن الآن سيتم لفه حول cx،cy 25 درجة. هذا يمكن تحقيقه فقط باستخدام طلب التحويل. لا تتغير إحداثيات المربع. يرجى ملاحظة كيفية تشابه الاستدعاءات الثلاثة لـ context.fillRect()، للرسم باللون الأحمر والأزرق للمربعات. إنه الاستدعاء بينهما للتحويل الذي يجعلهما يظهران في مواقع مختلفة ومدورين.

التكبير

يمكن تطبيق التكبير التلقائي على جميع الأشكال المرسومة على ورق HTML5.
عند التكبير، يمكنك تكبير جميع الأشكال على محور x و y باستخدام بعض العوامل. يمكنك استخدام دالة scale() لضبط هذه العوامل، مثلما هو موضح أدناه:

var scaleX = 2;
var scaleY = 2;
context.scale(scaleX, scaleY);

سيتم تكبير جميع الأشكال على محور x و y بمقدار الضعف في هذا المثال.
مثل translate() و rotate()، يتم تطبيق نسبة التكبير فقط على الأشكال التي يتم رسمها بعد استدعاء scale().
هذا مثال آخر على كيفية رسم مستطيلين أحمر وأزرق باستخدام كود، حيث يتم تطبيق نسبة التكبير على المستطيل الأزرق:

<canvas id="ex5" width="500" height="250" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas غير مدعوم
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var width = 100;
var height = 100
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.scale(2, 2);
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

هذه هي الرسوميات التي تم إنشاؤها على الورق:

لاحظ أن حجم مستطيل الأزرق ضعف حجم المستطيل الأحمر.
يجب الانتباه أيضًا إلى أن المسافة من الزاوية العلوية اليسرى لمستطيل الأزرق إلى الزاوية العلوية اليسرى للورق (0,0) ضعف. يتم تقليل جميع الأشكال بمقدار الضعف، بما في ذلك زاوية مستطيل الأزرق العلوية اليسرى. إذا كنت ترغب في تجنب تحريك الأشكال أثناء التكبير، فعليك دمج التكبير والتغذية بالحركة.

نسبة التمدد

يمكنك استخدام ميزة التمدد لتحقيق التمدد النسبي. تحتوي الرسمية على 4 مستطيلات. تحت الرسمية هناك حقل إدخال يمكن استخدامه لتغيير مستوى التمدد (نسبة التمدد).

درجة التمدد:

إذا رأيت حقل نصي يحتوي على مستوى التمدد، فأدخل مستوى التمدد بين 1 و10، ثم غادر الحقل النصي لرؤية النتيجة. إذا رأيت ماسح، فما عليك سوى تحريك الماسح

دمج التمدد والدوران والتمدد

بالطبع، يمكنك دمج جميع ثلاثة التحويلات في نفس الرسمية. ولكن، مثل دمج الدوران والتمدد، فإن ترتيب استدعاء وظائف السياق 2D مهم أيضًا. إذا تم استدعاء scale() قبل translate() وما إلى ذلك، فإن النتيجة قد تبدو مختلفة. قد تحتاج إلى تعديل ترتيب استدعاء الوظائف لتحقيق النتيجة الصحيحة