Cara menghitung jari-jari (jari-jari) sudut untuk rect bulat bulat konsentris

9

Saya memiliki tombol bundar yang ingin saya isi dalam bundrect lain. Roundrect yang mengandung harus selalu berjarak 1px dari tombol.

Jika saya membuat jari-jari pada wadah terlalu kecil maka sudut memiliki celah yang lebih besar di sekitarnya.

Apakah ada "aturan praktis" yang baik yang dapat saya gunakan untuk mencari tahu apa jari-jari harus untuk roundrect yang lebih besar?

adobe-photoshop Mike Brand
sumber

Jawaban:

12

Jika Anda ingin pembulatan luar menjadi 1px dari yang dalam, maka jari-jari sudut persegi panjang luar juga harus 1px lebih besar dari yang dalam.

Berikut adalah diagram cepat yang dapat membantu Anda melihat cara kerjanya:
Diagram radius sudut
Persegi panjang bagian dalam memiliki jari-jari sudut r piksel; sudutnya mengikuti lengkungan lingkaran merah bagian dalam, yang memiliki jari-jari r piksel dan pusatnya secara bersamaan r piksel menjauh dari sisi persegi panjang.

Kotak luar memiliki jari-jari sudut r +1 piksel; sudutnya mengikuti lengkungan lingkaran merah luar, yang memiliki jari-jari r +1 piksel dan pusatnya yang sesuai r +1 piksel dari sisi persegi panjang. Karena persegi panjang luar juga digeser satu piksel ke atas dan ke kanan bagian dalam (dan, kami dapat menganggap, dua piksel lebih lebar dan lebih tinggi untuk mengimbangi), kedua lingkaran konsentris, dan jarak di antara mereka selalu satu piksel.

Ilmari Karonen
sumber
Saya senang jawabannya sangat mudah!
Mike Brand
Saya telah mencoba menciptakan ini dengan membandingkan persegi panjang dengan batas luar 50 px, dan persegi panjang baru (50px lebih lebar dan lebih tinggi) dengan radius 50px lebih tinggi. Mereka tidak cukup cocok, tapi sekarang saya bayangkan itu terutama kekhasan pembuatan garis besar Photoshop Terima kasih atas jawaban Anda!
Mike Brand
@ Mike: Ingatlah bahwa jarak perlu ditambahkan ke kedua sisi persegi panjang. Jadi, jika Anda ingin batas persegi panjang luar menjadi 50 px dari bagian dalam, Anda perlu membuat persegi panjang luar 100 px lebih lebar dan lebih tinggi daripada bagian dalam (dan meningkatkan radius sudut sebesar 50 px).
Ilmari Karonen
6

Jika Anda ingin sudut memiliki pusat bersama, jari-jari sudut bentuk luar seharusnya menjadi jari-jari sudut bentuk dalam ditambah jarak antara bentuk. Jika bentuk bagian dalam Anda memiliki jari-jari sudut bulat 5 piksel, dan bentuk luar Anda berjarak 1 piksel, jari-jari sudut bentuk luar harus 6 piksel. (Tidak memperhitungkan bobot stroke.)

masukkan deskripsi gambar di sini

Farray
sumber