พิกัด Y ของสี่เหลี่ยมหลังการหมุนบนผืนผ้าใบ ดังที่แสดงในภาพ สี่เหลี่ยมจะถูกหมุนบนแกนจุดศูนย์กลาง หลังจากการหมุนและคืนค่าแคนวาสแล้ว ฉันต้องการค้นหาพิกัด X,Y ใหม่เหมือนที่แสดงในรูปภาพที่สอง ก่อนที่จุดการหมุนจะเป็น 50,50 และหลังจากการหมุนอาจเป็น 62,40
ฉันพบคำถามที่คล้ายกัน ดังนั้นฉันจึงรับ รูปภาพจากที่นั่น แต่คำถามนั้นมีไว้สำหรับ WPF บางส่วนและความต้องการของฉันคือ JS จะหาพิกัดของทุกมุมของสี่เหลี่ยมหลังการหมุนได้อย่างไร?
ฉันสร้างคลาสการแปลง JavaScript อย่างง่ายเพื่อจุดประสงค์นี้
การใช้มันคุณสามารถเปลี่ยนจุดโดยพลการโดยการเปลี่ยนแปลงสิ่งที่คุณทำ
เมื่อคุณแปลงผืนผ้าใบ ให้แปลงวัตถุ Transform ในลักษณะเดียวกัน จากนั้นเรียก transformPoint(x, y) เพื่อกลับพิกัดที่เหมาะสม
ดังนั้นในกรณีของคุณที่โทร transformPoint(50, 50) จะกลับมาประมาณ [62, 40] เป็นต้น
https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js
นี่คือตัวอย่าง: http://jsfiddle.net/b2fEX/
