带圆角和透明度的边框
Posted
技术标签:
【中文标题】带圆角和透明度的边框【英文标题】：Border with rounded corners & transparency 【发布时间】：2013-02-08 02:59:37 【问题描述】：以下屏幕截图显示了TextBubbleBorder1 的测试。我想让矩形外部的组件的角完全透明并显示它下面的任何组件。我找到了一种方法，通过在Graphics2D 实例上设置Clip（表示圆角外的区域）并调用clearRect()，将标签的BG 颜色限制在“边框内”。这可以在Label 1 中看到。
但是，当父面板上有红色 BG（或任何非标准颜色）时，您会看到这种方法的缺点。角落默认为默认面板颜色（在Panel 2 中最容易看到）。
最终我希望它适用于父容器中的非标准颜色，但它的部分灵感来自What do I need to do to replicate this component with gradient paint?
有人知道让这些角落透明的方法吗？
import java.awt.*;
import java.awt.geom.*;
import javax.swing.*;
import javax.swing.border.*;
public class BorderTest
public static void main(String[] args)
Runnable r = new Runnable()
@Override
public void run()
JPanel gui = new JPanel(new GridLayout(1,0,5,5));
gui.setBorder(new EmptyBorder(10,10,10,10));
gui.setBackground(Color.RED);
AbstractBorder brdr = new TextBubbleBorder(Color.BLACK,2,16,0);
JLabel l1 = new JLabel("Label 1");
l1.setBorder(brdr);
gui.add(l1);
JLabel l2 = new JLabel("Label 2");
l2.setBorder(brdr);
l2.setBackground(Color.YELLOW);
l2.setOpaque(true);
gui.add(l2);
JPanel p1 = new JPanel();
p1.add(new JLabel("Panel 1"));
p1.setBorder(brdr);
p1.setOpaque(false);
gui.add(p1);
JPanel p2 = new JPanel();
p2.add(new JLabel("Panel 2"));
p2.setBorder(brdr);
gui.add(p2);
JOptionPane.showMessageDialog(null, gui);
;
// Swing GUIs should be created and updated on the EDT
// http://docs.oracle.com/javase/tutorial/uiswing/concurrency/initial.html
SwingUtilities.invokeLater(r);
class TextBubbleBorder extends AbstractBorder
private Color color;
private int thickness = 4;
private int radii = 8;
private int pointerSize = 7;
private Insets insets = null;
private BasicStroke stroke = null;
private int strokePad;
private int pointerPad = 4;
RenderingHints hints;
TextBubbleBorder(
Color color)
new TextBubbleBorder(color, 4, 8, 7);
TextBubbleBorder(
Color color, int thickness, int radii, int pointerSize)
this.thickness = thickness;
this.radii = radii;
this.pointerSize = pointerSize;
this.color = color;
stroke = new BasicStroke(thickness);
strokePad = thickness / 2;
hints = new RenderingHints(
RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
int pad = radii + strokePad;
int bottomPad = pad + pointerSize + strokePad;
insets = new Insets(pad, pad, bottomPad, pad);
@Override
public Insets getBorderInsets(Component c)
return insets;
@Override
public Insets getBorderInsets(Component c, Insets insets)
return getBorderInsets(c);
@Override
public void paintBorder(
Component c,
Graphics g,
int x, int y,
int width, int height)
Graphics2D g2 = (Graphics2D) g;
int bottomLineY = height - thickness - pointerSize;
RoundRectangle2D.Double bubble = new RoundRectangle2D.Double(
0 + strokePad,
0 + strokePad,
width - thickness,
bottomLineY,
radii,
radii);
Polygon pointer = new Polygon();
// left point
pointer.addPoint(
strokePad + radii + pointerPad,
bottomLineY);
// right point
pointer.addPoint(
strokePad + radii + pointerPad + pointerSize,
bottomLineY);
// bottom point
pointer.addPoint(
strokePad + radii + pointerPad + (pointerSize / 2),
height - strokePad);
Area area = new Area(bubble);
area.add(new Area(pointer));
g2.setRenderingHints(hints);
Area spareSpace = new Area(new Rectangle(0, 0, width, height));
spareSpace.subtract(area);
g2.setClip(spareSpace);
g2.clearRect(0, 0, width, height);
g2.setClip(null);
g2.setColor(color);
g2.setStroke(stroke);
g2.draw(area);
-
虽然
TextBubbleBorder 是为Internal padding for JTextArea with background Image 设计的（并且最终使用JLabel，因为由于上述原因，文本区域一团糟），但通过将pointerSize 指定为0，我们最终会得到一个'圆角矩形' 代替。
【问题讨论】：
边框的美妙之处在于，它们只提供插图，不提供关于那里形状的提示，因此组件实际上不可能填充边框内的区域。我过去所做的都是被骗的。本质上，我已经创建了一个具有我想要的自定义形状的面板，然后将其放置到另一个提供背景功能的组件中，例如投影或我想要实现的任何东西...... 如果您覆盖paint（是paint 而不是paintComponent）并将剪辑设置为您想要的确切形状怎么办？
谢谢@mKorbel，我会根据'mre+Stroke'进行一些狩猎。
@mKorbel 我不知道该笑还是该哭。看来这个问题是那个问题的直接重复，我什至以前看过它，并且对这个问题和 2 个答案（包括你发布的非常酷的边框）投了赞成票！如果我有任何问题会告诉你..
@GuillaumePolet 感谢您的提示。如果我无法在副本（由 mKorbel 链接）中获得为我工作的答案，我会检查一下。
【参考方案1】：
注意此代码中有一个剪辑错误，已在paintComponent() is drawing on other components 的已接受答案中修复。仅当合并了“剪辑错误修复”时，才应将其视为一种解决方案。
// Paint the BG color of the parent, everywhere outside the clip
// of the text bubble.
查看代码中正确显示为的源代码中的这一点：
import java.awt.*;
import java.awt.image.*;
import java.awt.geom.*;
import javax.swing.*;
import javax.swing.border.*;
public class BorderTest
public static void main(String[] args)
Runnable r = new Runnable()
@Override
public void run()
JPanel gui = new JPanel(new GridLayout(2,0,5,5));
gui.setBorder(new EmptyBorder(10,10,10,10));
gui.setBackground(Color.RED);
AbstractBorder brdrLeft = new TextBubbleBorder(Color.BLACK,2,16,16);
AbstractBorder brdrRight = new TextBubbleBorder(Color.BLACK,2,16,16,false);
JLabel l1 = new JLabel("Label 1");
l1.setBorder(brdrRight);
gui.add(l1);
JLabel l2 = new JLabel("Label 2");
l2.setBorder(brdrLeft);
l2.setBackground(Color.YELLOW);
l2.setOpaque(true);
gui.add(l2);
JPanel p1 = new JPanel();
p1.add(new JLabel("Panel 1"));
p1.setBorder(brdrRight);
p1.setOpaque(false);
gui.add(p1);
JPanel p2 = new JPanel();
p2.add(new JLabel("Panel 2"));
p2.setBorder(brdrLeft);
gui.add(p2);
JOptionPane.showMessageDialog(null, gui);
;
// Swing GUIs should be created and updated on the EDT
// http://docs.oracle.com/javase/tutorial/uiswing/concurrency/initial.html
SwingUtilities.invokeLater(r);
class TextBubbleBorder extends AbstractBorder
private Color color;
private int thickness = 4;
private int radii = 8;
private int pointerSize = 7;
private Insets insets = null;
private BasicStroke stroke = null;
private int strokePad;
private int pointerPad = 4;
private boolean left = true;
RenderingHints hints;
TextBubbleBorder(
Color color)
this(color, 4, 8, 7);
TextBubbleBorder(
Color color, int thickness, int radii, int pointerSize)
this.thickness = thickness;
this.radii = radii;
this.pointerSize = pointerSize;
this.color = color;
stroke = new BasicStroke(thickness);
strokePad = thickness / 2;
hints = new RenderingHints(
RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
int pad = radii + strokePad;
int bottomPad = pad + pointerSize + strokePad;
insets = new Insets(pad, pad, bottomPad, pad);
TextBubbleBorder(
Color color, int thickness, int radii, int pointerSize, boolean left)
this(color, thickness, radii, pointerSize);
this.left = left;
@Override
public Insets getBorderInsets(Component c)
return insets;
@Override
public Insets getBorderInsets(Component c, Insets insets)
return getBorderInsets(c);
@Override
public void paintBorder(
Component c,
Graphics g,
int x, int y,
int width, int height)
Graphics2D g2 = (Graphics2D) g;
int bottomLineY = height - thickness - pointerSize;
RoundRectangle2D.Double bubble = new RoundRectangle2D.Double(
0 + strokePad,
0 + strokePad,
width - thickness,
bottomLineY,
radii,
radii);
Polygon pointer = new Polygon();
if (left)
// left point
pointer.addPoint(
strokePad + radii + pointerPad,
bottomLineY);
// right point
pointer.addPoint(
strokePad + radii + pointerPad + pointerSize,
bottomLineY);
// bottom point
pointer.addPoint(
strokePad + radii + pointerPad + (pointerSize / 2),
height - strokePad);
else
// left point
pointer.addPoint(
width - (strokePad + radii + pointerPad),
bottomLineY);
// right point
pointer.addPoint(
width - (strokePad + radii + pointerPad + pointerSize),
bottomLineY);
// bottom point
pointer.addPoint(
width - (strokePad + radii + pointerPad + (pointerSize / 2)),
height - strokePad);
Area area = new Area(bubble);
area.add(new Area(pointer));
g2.setRenderingHints(hints);
// Paint the BG color of the parent, everywhere outside the clip
// of the text bubble.
Component parent = c.getParent();
if (parent!=null)
Color bg = parent.getBackground();
Rectangle rect = new Rectangle(0,0,width, height);
Area borderRegion = new Area(rect);
borderRegion.subtract(area);
g2.setClip(borderRegion);
g2.setColor(bg);
g2.fillRect(0, 0, width, height);
g2.setClip(null);
g2.setColor(color);
g2.setStroke(stroke);
g2.draw(area);
【讨论】：
这个question 借用了你的代码，发现在滚动窗格中使用使用此边框的组件时，剪辑代码存在问题。我认为我提出的解决方案也适用于此。 在构造函数中TextBubbleBorder(Color color) new TextBubbleBorder(color, 4, 8, 7); 为什么不使用TextBubbleBorder(Color color) this(color, 4, 8, 7); 呢？【参考方案2】：
试试这个：
JPanel p = new JPanel()
@Override
protected void paintComponent(Graphics g)
super.paintComponent(g);
Dimension arcs = new Dimension(15,15); //Border corners arcs width,height, change this to whatever you want
int width = getWidth();
int height = getHeight();
Graphics2D graphics = (Graphics2D) g;
graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
//Draws the rounded panel with borders.
graphics.setColor(getBackground());
graphics.fillRoundRect(0, 0, width-1, height-1, arcs.width, arcs.height);//paint background
graphics.setColor(getForeground());
graphics.drawRoundRect(0, 0, width-1, height-1, arcs.width, arcs.height);//paint border
;
通过我的测试：
JFrame f = new JFrame();
f.setLayout(null);
f.setDefaultCloseOperation(3);
f.setSize(500, 500);
JPanel p = new JPanel()
@Override
protected void paintComponent(Graphics g)
super.paintComponent(g);
Dimension arcs = new Dimension(15,15);
int width = getWidth();
int height = getHeight();
Graphics2D graphics = (Graphics2D) g;
graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
//Draws the rounded opaque panel with borders.
graphics.setColor(getBackground());
graphics.fillRoundRect(0, 0, width-1, height-1, arcs.width, arcs.height);//paint background
graphics.setColor(getForeground());
graphics.drawRoundRect(0, 0, width-1, height-1, arcs.width, arcs.height);//paint border
;
p.setBounds(10,10,100,30);
p.setOpaque(false);
f.getContentPane().setBackground(Color.red);
f.add(p);
f.show();
结果是：
【讨论】：
【参考方案3】：感谢@BackSlash，很好很简单。我对此进行了扩展，因此它更具可重用性。这也允许在构造函数中设置背景颜色。我还展示了如何制作一个有趣的圆形面板。
import java.awt.*;
import javax.swing.*;
public class RoundedPanelExample extends JFrame
public RoundedPanelExample()
setDefaultCloseOperation(EXIT_ON_CLOSE);
setTitle("Rounded Panel Example");
setResizable(true);
setDefaultLookAndFeelDecorated(true);
setSize(500, 500);
Container pane = getContentPane();
pane.setLayout(null);
pane.setBackground(Color.LIGHT_GRAY);
JPanel p1 = new RoundedPanel(10, Color.CYAN);
p1.setBounds(10,10,100,60);
p1.setOpaque(false);
pane.add(p1);
JPanel p2 = new RoundedPanel(15, Color.RED);
p2.setBounds(150,10,50,50);
p2.setOpaque(false);
pane.add(p2);
JPanel p3 = new RoundedPanel(30);
p3.setBounds(230,10,100,150);
p3.setOpaque(false);
pane.add(p3);
JPanel p4 = new RoundedPanel(20);
p4.setBounds(10,200,100,100);
p4.setBackground(Color.GREEN);
p4.setOpaque(false);
pane.add(p4);
JPanel p5 = new RoundedPanel(200);
p5.setBounds(150,200,200,200);
p5.setBackground(Color.BLUE);
p5.setOpaque(false);
pane.add(p5);
public static void main(String[] args)
RoundedPanelExample gui = new RoundedPanelExample();
gui.setVisible(true);
class RoundedPanel extends JPanel
private Color backgroundColor;
private int cornerRadius = 15;
public RoundedPanel(LayoutManager layout, int radius)
super(layout);
cornerRadius = radius;
public RoundedPanel(LayoutManager layout, int radius, Color bgColor)
super(layout);
cornerRadius = radius;
backgroundColor = bgColor;
public RoundedPanel(int radius)
super();
cornerRadius = radius;
public RoundedPanel(int radius, Color bgColor)
super();
cornerRadius = radius;
backgroundColor = bgColor;
@Override
protected void paintComponent(Graphics g)
super.paintComponent(g);
Dimension arcs = new Dimension(cornerRadius, cornerRadius);
int width = getWidth();
int height = getHeight();
Graphics2D graphics = (Graphics2D) g;
graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
//Draws the rounded panel with borders.
if (backgroundColor != null)
graphics.setColor(backgroundColor);
else
graphics.setColor(getBackground());
graphics.fillRoundRect(0, 0, width-1, height-1, arcs.width, arcs.height); //paint background
graphics.setColor(getForeground());
graphics.drawRoundRect(0, 0, width-1, height-1, arcs.width, arcs.height); //paint border
【讨论】：
这对我有用，但我无法更改形状的边框颜色，请帮忙 你可以在paintComponent的第二行到最后一行设置边框颜色。 paintComponent 中的最后一行绘制了边框。您可以创建一个接受边框颜色的新构造函数，并像当前使用的背景颜色一样使用它。以上是关于带圆角和透明度的边框的主要内容，如果未能解决你的问题，请参考以下文章