Comment calculer les rayons (rayons) des coins pour des arrondis concentriques

9

J'ai un bouton roundrect que je veux contenir dans un autre roundrect. Le roundrect contenant doit toujours être à 1px du bouton.

Si je fais le rayon sur le récipient trop petit, les coins ont un plus grand espace autour d'eux.

Existe-t-il une bonne "règle de base" que je peux utiliser pour déterminer quel devrait être le rayon pour le plus grand roundrect?

adobe-photoshop Mike Brand
la source

Réponses:

12

Si vous voulez que le rectangle extérieur soit à 1px de celui intérieur, le rayon d'angle du rectangle extérieur doit également être 1px plus grand que celui de l'intérieur.

Voici un diagramme rapide qui peut vous aider à voir comment cela fonctionne:
Diagramme de rayon de coin
Le rectangle intérieur a un rayon de coin de r pixels; son coin suit l'arc du cercle rouge intérieur, qui a un rayon de r pixels et son centre correspondant r pixels loin des côtés du rectangle.

Le rectangle extérieur a un rayon de coin de r +1 pixels; son coin suit l'arc du cercle rouge extérieur, qui a un rayon de r +1 pixels et son centre correspondant r +1 pixels à l'écart des côtés du rectangle. Étant donné que le rectangle extérieur est également décalé d'un pixel vers le haut et à droite de l'intérieur (et, nous pouvons supposer, est deux pixels plus large et plus grand pour compenser), les deux cercles sont concentriques et la distance entre eux est toujours d'un pixel.

Ilmari Karonen
la source
Je suis content que la réponse soit si simple!
Mike Brand
J'avais essayé de recréer cela en comparant un rectangle rond avec une bordure extérieure de 50 px, et un nouveau rect rond (50px plus large et plus haut) avec un rayon 50px plus élevé. Ils ne correspondent pas tout à fait, mais maintenant j'imagine que c'est principalement une bizarrerie du rendu des contours de Photoshop Merci pour votre réponse!
Mike Brand
@Mike: N'oubliez pas que la distance doit être ajoutée des deux côtés du rectangle. Donc, si vous voulez que la bordure du rectangle extérieur soit à 50 px de l'intérieur, vous devez rendre le rectangle extérieur 100 px plus large et plus haut que l'intérieur (et augmenter le rayon du coin de 50 px).
Ilmari Karonen du
6

Si vous souhaitez que les coins aient des centres partagés, le rayon d'angle de la forme extérieure doit simplement être le rayon d'angle de la forme intérieure plus la distance entre les formes. Si votre forme intérieure a un rayon de coin arrondi de 5 pixels et que votre forme extérieure est à 1 pixel, le rayon de coin de la forme extérieure doit être de 6 pixels. (Ne tenant pas compte des poids de trait.)

entrez la description de l'image ici

Farray
la source