HTML5 مثيل البرنامج التعليمي: TAG CANVAS تنفذ مصفوفة تحويل

مقالة مقدمة من wulin.com (www.vevb.com): تطبيق علامات القماش للممارسة اليومية HTML5 - Matrix Transformation.

حتى الآن ، تعلمنا تقنية تحويل الرسم البياني التي تم تنفيذها باستخدام التحول الإحداثي. عندما لا يتمكن التحول الإحداثي من تلبية احتياجاتنا ، يمكننا استخدام تقنية تحويل المصفوفة. بعد ذلك ، سنقدم تقنيات تحويل المصفوفة والتشوه أكثر تعقيدًا.

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

طريقة التحويل

context.transform (a ، b ، c ، d ، x ، y) ؛

تحتوي هذه الطريقة على 6 معلمات ، من بينها يتم استخدام المعلمات الأربعة A و B و C و D لتشويه الشكل ؛ X و Y يمثلان نقاط الإحداثيات المتحركة.

الطرق الثلاث المذكورة في القسم السابق باستخدام تحويل الإحداثيات لتشوه الرسم البياني:

ترجمة (x ، y) ؛

المقياس (x ، y) ؛

تدوير (زاوية) ؛

يمكن استبدالها جميعًا بطريقة التحويل ، والمعلمات الستة في السياق. التحويل (A ، B ، C ، D ، X ، Y) ؛ كما يلي:

ترجمة (x ، y) ؛

مقياس (أ ، د) ؛

تدوير (B ، C) ؛ // هذه الطريقة لديها في الواقع معلمة واحدة فقط. من أجل تسهيل الفهم والتوافق مع التحويل ، يتم استخدام المعلمات 2 المتبقية. أضعها هنا لأخبرك أن هاتين المعلمتين متشابهتين في الوظيفة وترتبط بالتناوب.

حالة الكود