مناقشة مختصرة حول بعض الأفكار حول الحركة المكافئة للصور في HTML5

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

حجم مسودة التصميم الشائع الاستخدام لتطوير H5 هنا هو 640 * 1008، وبالتالي فإن فكرة الحل بناءً على هذا الحجم هي كما يلي:

1. أولاً، قم بتصدير العنصر الذي سيتم إزاحته في PS إلى ملف png بشكل منفصل. إذا تم تخطيط مسار الحركة في مسودة التصميم، فستحتاج أيضًا إلى تصدير المسار بتنسيق png؛

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

ما يجب ملاحظته هنا هو موضع صورة الإزاحة، ويجب أن تتوافق نقطة البداية ونقطة النهاية للمسار مع نقطة الحركة في الصورة، وتكون المواقف المقابلة كما يلي:

1. لا توجد معالجة للتشوه في القماش، لذا فإن نقطة الحركة هي الزاوية اليسرى العليا من الصورة.
2. في اللوحة القماشية، تمت ترجمة الصورة ونقلها لأنه تمت إضافة dx و dy في drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) بناءً على x1 و y1 في ترجمة (x1, y1). الإزاحة النهائية.
3. إذا تم وضع العنصر بواسطة الموضع: المطلق ويتم التحكم في الموضع بواسطة Translator3d(x, y, z) في التحويل، فيجب أن تكون الإزاحة x وy. عادةً، في التحويل، قد نقوم بتقليد الهامش الأيسر والعلوي والإضافي للتحكم في موضع العنصر، أضف ترجمة إضافية (marginLeftX، MarginLeftY، 0) في التحويل، ويجب أيضًا أخذ قيمة هذا الهامش في الاعتبار.

3. في الذكاء الاصطناعي، استخدم مفتاحي ctrl + r لسحب الخط المرجعي، وحرك صورة العنصر لسحب موضعي x و y، كما هو موضح في الشكل أدناه:

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

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

4. بعد الانتهاء من التعديل، اسحب خطين مرجعيين إضافيين إلى موضع نقطة التحكم 1، ثم افتح لوحة المعلومات من خلال شريط القائمة - النافذة - المعلومات، وقم بتغيير نقطة البداية ونقطة التحكم ونقطة النهاية والنقاط الثلاث على التوالي.

5. احسب فرق البكسل لنقطة التحكم ونقطة النهاية ونقطة البداية على التوالي، واحسب نقطة التحكم الحقيقية وإحداثيات نقطة النهاية بناءً على قيم إحداثيات x وy الحقيقية وفرق البكسل للصورة المراد إزاحتها في H5 ثم قم بدمج هذه الإحداثيات الثلاثة، ثم انقر فوق تطبيق على الصيغة.