Balik & putar gambar

Cara kerja

Setiap gambar didekode sekali menjadi elemen Image. Tiap baris menyimpan status kecil — hitungan seperempat putaran plus dua penanda pembalikan — dan tombol mengubahnya di tempat, sehingga Anda bisa menumpuk operasi (kanan, kanan, balik-H) sambil pembacaan W × H diperbarui seketika. Unduhan memproses status itu lewat satu kali render canvas.

Matematika transformasinya

Untuk putaran r derajat dengan keluaran ow × oh, urutan canvas-nya adalah translate(ow/2, oh/2), rotate(r), scale(±1, ±1), lalu drawImage(img, −w/2, −h/2). Karena titik asal berada di tengah canvas, offset setengah lebar/setengah tinggi itu membingkai persegi panjang yang diputar dengan sempurna pada 90°, 180°, dan 270°.

Mengapa W × H bertukar

Pada 90° dan 270° sisi panjang menjadi vertikal, jadi canvas keluaran dibangun dengan lebar = tinggi sumber dan tinggi = lebar sumber. Lencana di tiap baris menghitungnya ulang seketika — itu pula sebabnya tangkapan layar landscape menjadi portrait tanpa pemotongan.

Operasi inkremental pada sumbu layar

Setelah jumlah seperempat putaran yang ganjil, sumbu horizontal berkas justru menjadi vertikal di layar. Maka klik Horizontal mengganti penanda vertikal saat rotasi 90°/270° — "Horizontal" selalu menggambarkan arah yang Anda lihat, bukan yang tersimpan, dan kombinasi apa pun dari keempat tombol berakhir pada salah satu dari delapan simetri persegi panjang.

Pertanyaan yang sering diajukan