مثال لتدوير الصورة باستخدام html5 Canvas

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

في الواقع، توفر اللوحة القماشية واجهات مختلفة للتحكم في اللوحة القماشية. هناك طريقة تدوير () للتدوير.

في الواقع، التدوير هنا لا يؤدي إلى تدوير اللوحة القماشية، على سبيل المثال، يدور ctx.rotate(Math.PI/2) الخاص بي بمقدار 90 درجة. هذا لا يعني أننا سنرى اللوحة القماشية تدور بمقدار 90 درجة على الصفحة. يمكننا أن نفهم أن اللوحة القماشية تتكون في الواقع من جزأين، أحدهما هو اللوحة القماشية المرئية بالعين المجردة، والآخر هو اللوحة القماشية الافتراضية المستخدمة للعمليات، وسيتم تعيين جميع أفعالنا على اللوحة القماشية الافتراضية إلى اللوحة القماشية الحقيقية.

قد يكون من الصعب فهم ذلك، لذلك دعونا نستخدم صورة لشرح ذلك. أولاً، دعنا نقدم طريقة التدوير () التي يمكنها تدوير اللوحة القماشية وتدوير أصل اللوحة القماشية بشكل افتراضي.

دعونا نلقي نظرة على تأثير التدوير بزاوية 45 درجة:

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

الكود الخاص بالصورتين هو كما يلي:

 // بدون تدوير var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.drawImage(img, 0, 0)// دوران عكس اتجاه عقارب الساعة 45 درجة var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.rotate(-Math.PI / 4);ctx.drawImage(img, 0, 0)

بعد رؤية هذا، أعتقد أن الجميع يعرف بشكل أساسي كيفية استخدام التدوير ().

دعونا نتحدث عن كيفية تدوير وسط الصورة

اسمحوا لي أن أتحدث عن كيفية استخدام الطريقتين الأخريين للقماش:

ctx.translate(x, y): هذه الطريقة هي طريقة يمكنها نقل أصل اللوحة القماشية، والمعلمات هي x وy؛

ctx.drawImage(img, x, y): تم استخدام هذه الطريقة أعلاه، ولكنها تحتوي على ثلاث معلمات، أولها هو dom للصورة المراد إدراجها، والمعلمتان التاليتان x وy هما المعلمتان لـ img. يتم تعديل الموقع.

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

هناك ثلاث خطوات هنا:

1. نقل أصل القماش
2. تدوير القماش
3. إدراج الصورة والتحرك

دعونا نلقي نظرة على هذه الخطوات الثلاث بشكل منفصل (عرض الصورة وارتفاعها 400 و 300)

نقل أصل القماش

 var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.translate(200, 150)ctx.drawImage(img, 0, 0)

تدوير القماش

 var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, 0, 0)

إدراج الصورة والتحرك

 var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, -200, -150)

هذا كل شيء، لقد انتهيت

ملاحظة: بعد إكمال سلسلة من الإجراءات، يجب على الجميع تدوير أصل اللوحة القماشية لاستعادتها. وإلا، بعد سلسلة من العمليات، سيتم إفساد إعدادات اللوحة القماشية. ما عليك سوى استعادة الإعدادات إلى حالتها الأصلية بعد كل عملية.

 var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.translate(200, 150) // 1ctx.rotate(-Math.PI / 4) // 2ctx.drawImage(img, -200, -150)// استعادة الإعدادات (يجب عكس خطوات الاستعادة إلى الخطوات التي قمت بتعديلها) ctx.rotate(Math.PI / 4) // 1ctx.translate(-200, -150) // 2// بعد ذلك أصل تعود اللوحة القماشية إلى الزاوية اليسرى العليا، وزاوية الدوران هي 0//عمليات أخرى...

شيء آخر يجب ملاحظته هو أن ما عرضته للتو هو مثال حيث يكون المحور السيني والمحور الصادي للصورة بالنسبة إلى اللوحة القماشية 0. إذا لم يكن 0، فما عليك سوى تحريك الأصل ctx.translate(200+x, 150+ص). يمثل الرقمان 200 و150 هنا نصف عرض الصورة وارتفاعها، وx وy هما x وy للصورة بالنسبة إلى اللوحة القماشية.

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

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.