java - Swing 中的自定义六角形 JButton 之间的空间太大

Question

我目前正在为一个大学项目开发​​ Hidato 解谜器。我正在使用 Swing 和 Intellij IDE。

要求之一是具有正方形、六边形和三角形形状。正方形很容易，但为了实现 HexagonalGrid，我编写了一个扩展 JButton 的自定义六角形按钮。

但是，当尝试渲染网格时，我得到了这个结果。我不知道出了什么问题。

我从 this website 得到了六边形数学这显然在网上被视为 HexGrid 圣经。

这是六角形按钮和网格渲染器的代码。

import javax.swing.*;
import java.awt.*;

public class HexagonButton extends JButton {
private Shape hexagon;
float size;
float width, height;

public HexagonButton(float centerX, float centerY, float size){
    Polygon p = new Polygon();
    this.size = size;
    p.reset();
    for(int i=0; i<6; i++){
        float angleDegrees = (60 * i) - 30;
        float angleRad = ((float)Math.PI / 180.0f) * angleDegrees;

        float x = centerX + (size * (float)Math.cos(angleRad));
        float y = centerY + (size * (float)Math.sin(angleRad));

        p.addPoint((int)x,(int)y);
    }

    width = (float)Math.sqrt(3) * size;
    height = 2.0f * size;
    hexagon = p;
}

public void paintBorder(Graphics g){
    ((Graphics2D)g).draw(hexagon);
}

public void paintComponent(Graphics g){
    ((Graphics2D)g).draw(hexagon);
}

@Override
public Dimension getPreferredSize(){

    return new Dimension((int)width, (int)height);
}
@Override
public Dimension getMinimumSize(){
    return new Dimension((int)width, (int)height);
}
@Override
public Dimension getMaximumSize(){
    return new Dimension((int)width, (int)height);
}


@Override
public boolean contains(int x, int y){
    return hexagon.contains(x,y);
}
}

Public class Main extends JFrame implements MouseListener {

/**
 * Create the GUI and show it.  For thread safety,
 * this method should be invoked from the
 * event-dispatching thread.
 */
public static void main(String[] args) {
// write your code here
    //Schedule a job for the event-dispatching thread:
    //creating and showing this application's GUI.
    Main main = new Main();
    main.pack();
    main.setVisible(true);
    main.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}

Main(){
    super();
    int rows = 3;
    int cols = 3;
    setLayout(new GridLayout(rows,cols,-1,-1));
    //grid.setBorder(BorderFactory.createEmptyBorder(2,2,2,2));
    this.setMinimumSize(new Dimension(173 * rows, 200 * cols+2));

    for(int i=0;i<rows;i++){
        for(int j=0;j<cols;j++){
            float size = 25;
            int width = (int)(size * Math.sqrt(3));
            int height = (int)(size * 2.0f);
            int xOffset = (width / 2);
            if(i%2==1){
                //Offset odd rows to the right
                xOffset += (width/2);
            }
            int yOffset = height / 2;
            int centerX = xOffset + j*width;
            int centerY = yOffset + i*height;
            HexagonButton hexagon = new HexagonButton(centerX, centerY, size);
            hexagon.addMouseListener(this);
            hexagon.setMinimumSize(hexagon.getMinimumSize());
            hexagon.setMaximumSize(hexagon.getMaximumSize());
            hexagon.setPreferredSize(hexagon.getPreferredSize());
            //hexagon.setVerticalAlignment(SwingConstants.CENTER);
            hexagon.setHorizontalAlignment(SwingConstants.CENTER);
            add(hexagon);
        }

    }

}
}

有谁知道问题出在哪里吗？我对 Swing 还很陌生

Answer 1

就其值(value)而言，我不会为每个单元格使用自定义组件，而是使用单个组件，生成所需的所有形状并将它们绘制到单个组件上。

这使您可以更好地控制形状的位置，并且由于 Shape 内置了碰撞检测，因此可以非常轻松地检测鼠标经过/单击的单元格。

我对您的基本代码进行了一些调整，并提出了以下示例。

它创建一个充当“主”的形状，然后，我为每个单元格创建一个 Area 并将其位置转换到我希望它出现的位置。然后将其添加到 List 中，用于绘制所有单元格并执行鼠标“点击”检测。

这种方法的好处是，它会自动缩放形状以适应可用的组件空间

import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Shape;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.AffineTransform;
import java.awt.geom.Area;
import java.awt.geom.GeneralPath;
import java.util.ArrayList;
import java.util.List;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class Test {

    public static void main(String[] args) {
        new Test();
    }

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

//      private Shape hexagon;
        private List<Shape> cells = new ArrayList<>(6);

        private Shape highlighted;

        public TestPane() {
            addMouseMotionListener(new MouseAdapter() {
                @Override
                public void mouseMoved(MouseEvent e) {
                    highlighted = null;
                    for (Shape cell : cells) {
                        if (cell.contains(e.getPoint())) {
                            highlighted = cell;
                            break;
                        }
                    }
                    repaint();
                }
            });
        }

        @Override
        public void invalidate() {
            super.invalidate();
            updateHoneyComb();
        }

        protected void updateHoneyComb() {
            GeneralPath path = new GeneralPath();

            float rowHeight = ((getHeight() * 1.14f) / 3f);
            float colWidth = getWidth() / 3f;

            float size = Math.min(rowHeight, colWidth);

            float centerX = size / 2f;
            float centerY = size / 2f;
            for (float i = 0; i < 6; i++) {
                float angleDegrees = (60f * i) - 30f;
                float angleRad = ((float) Math.PI / 180.0f) * angleDegrees;

                float x = centerX + ((size / 2f) * (float) Math.cos(angleRad));
                float y = centerY + ((size / 2f) * (float) Math.sin(angleRad));

                if (i == 0) {
                    path.moveTo(x, y);
                } else {
                    path.lineTo(x, y);
                }
            }
            path.closePath();

            cells.clear();
            for (int row = 0; row < 3; row++) {
                float offset = size / 2f;
                int colCount = 2;
                if (row % 2 == 0) {
                    offset = 0;
                    colCount = 3;
                }
                for (int col = 0; col < colCount; col++) {
                    AffineTransform at = AffineTransform.getTranslateInstance(offset + (col * size), row * (size * 0.8f));
                    Area area = new Area(path);
                    area = area.createTransformedArea(at);
                    cells.add(area);
                }
            }

        }

        public void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g.create();
            if (highlighted != null) {
                g2d.setColor(Color.BLUE);
                g2d.fill(highlighted);
            }
            g2d.setColor(Color.BLACK);
            for (Shape cell : cells) {
                g2d.draw(cell);
            }
            g2d.dispose();
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(200, 200);
        }

    }
}

现在，我知道，你会告诉我它们之间有空间。基于第一个单元格应位于 0x0 的事实，我想说该空间来自您的六边形算法，但我将让您自行解决这个问题;)

此外，行/列目前是硬编码的 (3x3)，应该不难使它们变得更加可变;)

更新

所以，我尝试了定位算法，并根据您链接的六边形算法，我能够想出......

    protected void updateHoneyComb() {
        GeneralPath path = new GeneralPath();

        double rowHeight = ((getHeight() * 1.14f) / 3f);
        double colWidth = getWidth() / 3f;

        double size = Math.min(rowHeight, colWidth) / 2d;

        double centerX = size / 2d;
        double centerY = size / 2d;

        double width = Math.sqrt(3d) * size;
        double height = size * 2;
        for (float i = 0; i < 6; i++) {
            float angleDegrees = (60f * i) - 30f;
            float angleRad = ((float) Math.PI / 180.0f) * angleDegrees;

            double x = centerX + (size * Math.cos(angleRad));
            double y = centerY + (size * Math.sin(angleRad));

            if (i == 0) {
                path.moveTo(x, y);
            } else {
                path.lineTo(x, y);
            }
        }
        path.closePath();

        cells.clear();
        double yPos = size / 2d;
        for (int row = 0; row < 3; row++) {
            double offset = (width / 2d);
            int colCount = 2;
            if (row % 2 == 0) {
                offset = 0;
                colCount = 3;
            }
            double xPos = offset;
            for (int col = 0; col < colCount; col++) {
                AffineTransform at = AffineTransform.getTranslateInstance(xPos + (size * 0.38), yPos);
                Area area = new Area(path);
                area = area.createTransformedArea(at);
                cells.add(area);
                xPos += width;
            }
            yPos += height * 0.75;
        }

    }

现在六边形彼此相对排列。但仍需要一些工作