自定义带有图形的JButton计算器实现

Question

我正试图编程一个计算器尽可能接近Windows 7/8模型，我目前正试图给Jbutton s一个自定义的外观，但它没有按计划进行。我的按钮叫做CalculatorButton，扩展了JButton。我目前使用Graphics绘制边界并使其比标准JButton边界更圆，但它似乎只适用于一个CalculatorButton实例，而不是随后创建的。

也请原谅格式不好，这是我的第一篇文章。

下面是calculatorbutton类

import java.awt.Color;
import java.awt.Component;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Insets;
import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.border.Border;
public class CalculatorButton extends JButton {
    CalculatorButton() {
        super();
        this.setFont(new Font("Segoe UI",Font.PLAIN,12));
        this.setOpaque(false);
        this.setFocusPainted(false);
    }
    CalculatorButton(String text) {
        super(text);
        this.setFont(new Font("Segoe UI",Font.PLAIN,12));
        this.setOpaque(false);
        this.setFocusPainted(false);
        this.setContentAreaFilled(false);
    }
    protected void paintBorder(Graphics g) {
        g.setColor(new Color(144,158,171));
        g.drawLine(getX()+1,getY(),getX()+getWidth()-2,getY());
        g.drawLine(getX()+1,getY()+getHeight()-1,getX()+getWidth()-2,getY()+getHeight()-1);
        g.drawLine(getX(),getY()+1,getX(),getY()+getHeight()-2);
        g.drawLine(getX()+getWidth()-1,getY()+1,getX()+getWidth()-1,getY()+getHeight()-2);
    }   
}

下面是计算器类

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class Calculator extends JFrame {
    /***************************************/ //aesthetics like font,color,icons,etc
    private Color backgroundColor = new Color(218,229,240);
    /**************************************/ //menubar
    /*************************************///textfield
    private JPanel textPanel = new JPanel();
    /*************************************/
    private JPanel mainPanel = new JPanel();
    /*************************************/
    /*************************************/
    Calculator() {
        super("Calculator");
        setSize(400,320);
        setResizable(false);
        this.add(mainPanel,BorderLayout.CENTER);
        mainPanel.setBackground(backgroundColor);
        mainPanel.setLayout(new BoxLayout(mainPanel,BoxLayout.Y_AXIS));
        mainPanel.add(textPanel);
        textPanel.setLayout(new BoxLayout(textPanel,BoxLayout.X_AXIS));
        CalculatorButton c = new CalculatorButton("1");
        CalculatorButton cb = new CalculatorButton("w");
        textPanel.add(c);
        textPanel.add(cb);
        setVisible(true);
    }
    public static void main(String[]args)throws Exception {
        //UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
        Calculator calc = new Calculator();
        calc.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }   
}

Answer 1

首先，所有的绘画都是在本地上下文中完成的。也就是说，Graphics上下文被转换为组件位置(x/y)。

这意味着上/左角实际上是0x0，下/右角是width - 1 x height - 1

其次，不要重写paintBorder，您应该考虑创建自己的满足您需求的Border。边框不只是画图，它们还提供了关于所需额外空间的重要信息

Answer 2

扩展BasicButtonUI类。

参见如下示例。

但是有一个更好的方法，使用JavaFX的css样式