Ich habe eine Roundrect-Schaltfläche, die ich in einer anderen Roundrect enthalten möchte. Das enthaltene Roundrect sollte immer 1px von der Schaltfläche entfernt sein.
Wenn ich den Radius des Containers zu klein mache, haben die Ecken einen größeren Spalt um sie herum.
Gibt es eine gute "Faustregel", mit der ich herausfinden kann, wie groß der Radius für die größere Rundung sein sollte?
Antworten:
Wenn Sie möchten, dass die äußere Rundung 1 Pixel von der inneren entfernt ist, sollte der Eckenradius des äußeren Rechtecks ebenfalls 1 Pixel größer sein als der des inneren.
Hier ist ein kurzes Diagramm, anhand dessen Sie sehen können, wie es funktioniert:
Das innere Rechteck hat einen Eckenradius von r Pixel; seine Ecke folgt dem Bogen des inneren roten Kreises, der einen Radius von r Pixeln hat und dessen Mittelpunkt entsprechend r Pixel von den Seiten des Rechtecks entfernt ist.
Das äußere Rechteck hat einen Eckenradius von r +1 Pixel; seine Ecke folgt dem Bogen des äußeren roten Kreises, der einen Radius von r +1 Pixel hat und dessen Mittelpunkt entsprechend r +1 Pixel von den Seiten des Rechtecks entfernt ist. Da das äußere Rechteck ebenfalls um ein Pixel nach oben und rechts vom inneren verschoben ist (und zum Ausgleich zwei Pixel breiter und höher ist), sind die beiden Kreise konzentrisch und der Abstand zwischen ihnen beträgt immer ein Pixel.
Wenn die Ecken gemeinsame Zentren haben sollen, sollte der Eckenradius der äußeren Form einfach der Eckenradius der inneren Form plus dem Abstand zwischen den Formen sein. Wenn Ihre innere Form einen abgerundeten Eckenradius von 5 Pixel hat und Ihre äußere Form 1 Pixel entfernt ist, sollte der Eckenradius der äußeren Form 6 Pixel betragen. (Ohne Berücksichtigung von Strichgewichten.)
