Jak obliczyć promienie (promienie) narożników dla koncentrycznych zaokrąglonych prostokątów

9

Mam okrągły przycisk, który chcę zawrzeć w innym okrągłym kształcie. Zawierająca runda powinna zawsze znajdować się w odległości 1 piksela od przycisku.

Jeśli zrobię promień pojemnika zbyt mały, wówczas rogi mają wokół nich większą szczelinę.

Czy istnieje dobra „ogólna zasada”, której mogę użyć, aby dowiedzieć się, jaki powinien być promień dla większego zaokrąglenia?

adobe-photoshop Mike Brand
źródło

Odpowiedzi:

12

Jeśli chcesz, aby zewnętrzna zaokrąglenie znajdowała się 1px od wewnętrznego, to promień narożnika zewnętrznego prostokąta powinien być również o 1px większy niż promień wewnętrzny.

Oto krótki schemat, który może pomóc zobaczyć, jak to działa:
Schemat promienia narożnika
Wewnętrzny prostokąt ma promień narożnika r pikseli; jego narożnik biegnie wzdłuż łuku wewnętrznego czerwonego koła, które ma promień r pikseli, a jego środek odpowiednio r pikseli od boków prostokąta.

Zewnętrzny prostokąt ma promień narożnika r +1 pikseli; jego róg biegnie wzdłuż łuku zewnętrznego czerwonego koła o promieniu r +1 pikseli, a jego środek odpowiednio r +1 pikseli od boków prostokąta. Ponieważ zewnętrzny prostokąt jest również przesunięty o jeden piksel w górę i na prawo od wewnętrznego (i można przypuszczać, że jest o dwa piksele szerszy i wyższy, aby to zrównoważyć), dwa koła są koncentryczne, a odległość między nimi wynosi zawsze jeden piksel.

Ilmari Karonen
źródło
Cieszę się, że odpowiedź jest taka prosta!
Mike Brand
Próbowałem to odtworzyć, porównując okrągły prostokąt z zewnętrzną ramką 50 pikseli oraz nowy (50 pikseli szerszy i wyższy) okrągły prostokąt o promieniu wyższym o 50 pikseli. Nie do końca do siebie pasowały, ale teraz wyobrażam sobie, że to głównie dziwactwo renderowania konturu Photoshopa Dziękujemy za odpowiedź!
Mike Brand
@ Mike: Pamiętaj, że odległość należy dodać po obu stronach prostokąta. Jeśli więc chcesz, aby zewnętrzna krawędź prostokąta znajdowała się 50 pikseli od wewnętrznej, musisz uczynić zewnętrzny prostokąt o 100 pikseli szerszym i wyższym niż wewnętrzny (i zwiększyć promień narożnika o 50 pikseli).
Ilmari Karonen
6

Jeśli chcesz, aby narożniki miały wspólne środki, promień narożnika kształtu zewnętrznego powinien być po prostu promieniem narożnika kształtu wewnętrznego plus odległość między kształtami. Jeśli wewnętrzny kształt ma zaokrąglony promień narożnika wynoszący 5 pikseli, a zewnętrzny kształt jest oddalony o 1 piksel, promień narożnika zewnętrznego kształtu powinien wynosić 6 pikseli. (Nie uwzględnia żadnych obciążeń skoku).

wprowadź opis zdjęcia tutaj

Farray
źródło