Berechnen der Radien (Radien) von Ecken für konzentrisch gerundete Rechtecke

9

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?

adobe-photoshop Mike Brand
quelle

Antworten:

12

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:
Eckradiusdiagramm
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.

Ilmari Karonen
quelle
Ich bin froh, dass die Antwort so einfach ist!
Mike Brand
Ich hatte versucht, dies neu zu erstellen, indem ich ein rundes Rechteck mit einem Außenrand von 50 Pixel und ein neues (50 Pixel breiteres und höheres) rundes Rechteck mit einem um 50 Pixel höheren Radius verglichen habe. Sie stimmten nicht ganz überein, aber jetzt stelle ich mir vor, dass dies hauptsächlich eine Eigenart von Photoshops Umriss-Rendering ist. Vielen Dank für Ihre Antwort!
Mike Brand
@Mike: Denken Sie daran, dass der Abstand zu beiden Seiten des Rechtecks ​​hinzugefügt werden muss. Wenn Sie also möchten, dass der äußere Rechteckrand 50 Pixel vom inneren entfernt ist, müssen Sie das äußere Rechteck 100 Pixel breiter und höher als das innere machen (und den Eckenradius um 50 Pixel erhöhen).
Ilmari Karonen
6

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.)

Geben Sie hier die Bildbeschreibung ein

Farray
quelle