การอภิปรายสั้นๆ เกี่ยวกับความคิดบางประการเกี่ยวกับการเคลื่อนที่แบบพาราโบลาของรูปภาพใน HTML5

เป็นเรื่องปกติที่วัตถุ/รูปภาพจะเคลื่อนที่ในพาราโบลาหรือแม่นยำกว่านั้น ไปตามเส้นโค้ง Bezier นี่เป็นข้อกำหนดทั่วไปในการพัฒนา H5 ดังนั้นวิธีคำนวณเส้นทางการเคลื่อนไหวอย่างรวดเร็วตามแบบร่างการออกแบบจึงเป็นปัญหาแรกที่นักพัฒนา แก้ปัญหา.

ขนาดแบบร่างการออกแบบที่ใช้กันทั่วไปสำหรับการพัฒนา H5 ที่นี่คือ 640 * 1008 ดังนั้นแนวคิดในการแก้ปัญหาตามขนาดนี้จึงเป็นดังนี้:

1. ขั้นแรก ส่งออกองค์ประกอบที่จะแทนที่ใน PS ไปยัง PNG แยกต่างหาก หากมีการวางแผนเส้นทางการเคลื่อนไหวในแบบร่างการออกแบบ คุณจะต้องส่งออกเส้นทางเป็น PNG ด้วย

2. สร้างไฟล์ใหม่ใน AI ด้วยขนาดเดียวกับแบบร่างการออกแบบ จากนั้นลากองค์ประกอบการแทนที่ลงในไฟล์สองครั้ง หากมีเส้นทางการเคลื่อนไหว ให้ลากเข้าไปด้วย ดังที่แสดงด้านล่าง:

สิ่งที่ต้องสังเกตที่นี่คือตำแหน่งของภาพการกระจัด จุดเริ่มต้นและจุดสิ้นสุดของเส้นทางควรสอดคล้องกับจุดที่เคลื่อนที่ของภาพ สถานการณ์ที่เกี่ยวข้องมีดังนี้:

1. ไม่มีการประมวลผลการเสียรูปบนผืนผ้าใบ ดังนั้นจุดที่เคลื่อนไหวจึงอยู่ที่มุมซ้ายบนของภาพ
2. บนผืนผ้าใบ รูปภาพได้รับการแปลและย้ายเนื่องจาก dx และ dy ใน DrawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) ถูกเพิ่มโดยยึดตาม x1 และ y1 ในการแปล (x1, y1) ชดเชยสุดท้าย
3. หากองค์ประกอบถูกวางตำแหน่งตามตำแหน่ง: แน่นอน และตำแหน่งถูกควบคุมโดย Translation3d(x, y, z) ในการแปลง ค่าออฟเซ็ตควรเป็น x, y โดยปกติแล้ว ในการแปลงรูป เราอาจเลียนแบบระยะขอบด้านซ้าย ด้านบน และระยะขอบเพิ่มเติม เพื่อควบคุม ตำแหน่งขององค์ประกอบ ให้เพิ่ม Translation3D(marginLeftX, MarginLeftY, 0) เพิ่มเติมในการแปลง นอกจากนี้ ยังต้องคำนึงถึงค่าของระยะขอบนี้ด้วย

3. ใน AI ให้ใช้ปุ่ม Ctrl + r เพื่อดึงเส้นอ้างอิงออกมา และย้ายรูปภาพองค์ประกอบเพื่อดึงตำแหน่ง x และ y ดังแสดงในรูปด้านล่าง:

จากนั้นเลือกเครื่องมือปากกาแล้วคลิกที่จุดเริ่มต้นและจุดสิ้นสุด อย่าปล่อยเมาส์หลังจากคลิกจุดสิ้นสุดแล้ว ลาก AI โดยตรงและมันจะเพิ่มจุดควบคุม 2 จุดโดยอัตโนมัติ คุณสามารถปรับ ตำแหน่งของจุดควบคุมทั้งสองจุดเพื่อปรับปากกา จุดประสงค์ของเส้นทางที่สร้างโดยเครื่องมือคือจนกว่ามันจะสอดคล้องกับเส้นทางเส้นอ้างอิงบนแบบร่างดังที่แสดงด้านล่าง:

หลังจากลากไปยังตำแหน่งที่ต้องการแล้ว ให้ปล่อยเมาส์แล้วกด Enter บนแป้นพิมพ์เพื่อยืนยันเส้นทาง หากเส้นทางที่ร่างไว้ไม่ใช่สิ่งที่คุณต้องการ คุณสามารถลากจุดควบคุมต่อไปเพื่อทำการปรับเปลี่ยนได้

4. หลังจากการปรับเสร็จสิ้น ให้ลากเส้นอ้างอิงเพิ่มเติมอีกสองเส้นไปยังตำแหน่งของจุดควบคุม 1 จากนั้นเปิดแผงข้อมูลผ่านแถบเมนู - หน้าต่าง - ข้อมูล และเปลี่ยนจุดเริ่มต้น จุดควบคุม จุดสิ้นสุด และจุดสามจุด ตามลำดับ เอาพิกัดออกไป.

5. คำนวณความแตกต่างพิกเซลของจุดควบคุม จุดสิ้นสุด และจุดเริ่มต้น ตามลำดับ และคำนวณจุดควบคุมจริงและพิกัดจุดสิ้นสุดตามค่าพิกัด x, y จริง และความแตกต่างพิกเซลของรูปภาพที่จะแทนที่ใน H5 จากนั้นรวมพิกัดทั้งสามนี้เข้าด้วยกัน คลิกนำไปใช้กับสูตร