Cara mencari koordinat baru persegi panjang setelah rotasi

Koordinat Y persegi panjang setelah rotasi pada kanvas. Seperti yang ditunjukkan pada gambar, persegi panjang akan diputar pada sumbu titik pusatnya. Setelah rotasi dan kanvas dipulihkan, saya ingin mencari koordinat X,Y baru seperti yang ditunjukkan pada gambar kedua, sebelum titik rotasi menjadi 50,50 dan setelah rotasi bisa menjadi 62,40.

Saya menemukan pertanyaan serupa jadi saya mengambilnya gambar dari sana tetapi pertanyaan itu untuk beberapa WPF dan kebutuhan saya adalah JS. Bagaimana cara mencari koordinat seluruh sudut persegi panjang setelah rotasi?

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini


person Sandeep Kumar    schedule 04.02.2013    source sumber
comment
@Doorknob Pencarian Google cepat tidak benar-benar memberikan jawabannya, kalau tidak saya tidak akan menemukan posting ini! ;) Saya berada dalam situasi yang sama!   -  person Rutwick Gangurde    schedule 06.02.2013
comment
stackoverflow.com/a/22511805/2106820   -  person Arfan Mirza    schedule 19.03.2014


Jawaban (1)


Saya membuat kelas transformasi JavaScript sederhana untuk tujuan ini.

Dengan menggunakannya, Anda dapat mengubah titik sembarang dengan mengubah buatan Anda.

Saat Anda mengubah kanvas, ubah objek Transform dengan cara yang sama lalu panggil transformPoint(x, y) untuk mendapatkan kembali koordinat yang sesuai.

Jadi dalam kasus Anda, panggilan transformPoint(50, 50) akan menghasilkan sekitar [62, 40], dll.

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

Berikut contohnya: http://jsfiddle.net/b2fEX/

person Simon Sarris    schedule 04.02.2013