Tôi có một nút roundrect mà tôi muốn chứa trong một roundrect khác. Roundrect chứa phải luôn cách nút 1px.
Nếu tôi làm cho bán kính trên container quá nhỏ thì các góc có khoảng cách lớn hơn xung quanh chúng.
Có một "quy tắc ngón tay cái" tốt nào mà tôi có thể sử dụng để tìm ra bán kính nào cho đường tròn lớn hơn không?
Câu trả lời:
Nếu bạn muốn hình tròn bên ngoài cách 1 pixel so với hình trong, thì bán kính góc của hình chữ nhật bên ngoài cũng phải lớn hơn 1px so với hình bên trong.
Đây là một sơ đồ nhanh có thể giúp bạn thấy nó hoạt động như thế nào:
Hình chữ nhật bên trong có bán kính góc là r pixel; góc của nó đi theo vòng cung của vòng tròn màu đỏ bên trong, có bán kính r pixel và tâm của nó tương ứng r pixel cách các cạnh của hình chữ nhật.
Hình chữ nhật bên ngoài có bán kính góc là r +1 pixel; góc của nó đi theo vòng cung của vòng tròn màu đỏ bên ngoài, có bán kính r +1 pixel và tâm của nó tương ứng r +1 pixel cách các cạnh của hình chữ nhật. Vì hình chữ nhật bên ngoài cũng được dịch chuyển một pixel lên và sang bên phải của bên trong (và, chúng tôi có thể đoán là hai pixel rộng hơn và cao hơn để bù lại), hai vòng tròn là đồng tâm và khoảng cách giữa chúng luôn là một pixel.
Nếu bạn muốn các góc có trung tâm chia sẻ, bán kính góc của hình dạng bên ngoài chỉ đơn giản là bán kính góc của hình dạng bên trong cộng với khoảng cách giữa các hình. Nếu hình dạng bên trong của bạn có bán kính góc tròn 5 pixel và hình dạng bên ngoài của bạn cách 1 pixel, bán kính góc của hình dạng bên ngoài phải là 6 pixel. (Không chiếm bất kỳ trọng lượng đột quỵ nào.)
