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?
Odpowiedzi:
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:
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.
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).
