شرح تفصيلي لوظيفة قياس القماش من خلال مصفوفة التحويل

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

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

 Let delta = this.deltaInst; delta.bind('zoom', (data) => { delta._transform.scale.forEach((s, i) => { delta._transform.scale[i] *= data.delta > 0? 2 : 1/2 }); Let offsetX = data.x - delta._transform.translate[0]; delta._transform.translate[1]; delta._transform.translate[0] += -(data.delta > 0? 1 : -1/2)*offsetX; دلتا > 0؟ 1: -1/2)*offsetY;

من المفترض هنا أن كل تكبير يتم تكبيره بمقدار 2 مرات، ولكن يمكن أيضًا أن يكون بنسب تكبير أخرى.

الخطوة الأولى هي ضرب أو قسمة نسبة التكبير/التصغير الحالية على 2 وفقًا لاتجاه التمرير؛

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

دعونا نلقي نظرة على رمز RefreshAll:

 Let ctx = this.context; ctx.scale(...this._transform.scale); if (!Array.isArray(shapes)) { الأشكال = [الأشكال] } الأشكال. ctx.restore();

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

في الكود أعلاه، يمكن أيضًا استبدال ctx.transform() بالكامل بالطرق ctx.translate() وctx.scale(). كما هو موضح في جزء التعليق من الكود، فإن المعلمات هي القيم المحسوبة مسبقًا.

يمكن العثور على الكود الكامل على عنوان جيثب: https://github.com/helloweilei/delta

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