java - 如何使用 Canvas 在 Java 中制作一组可点击的圆圈？

Question

所以我使用 Canvas 绘画制作了一个由 25 个圆圈组成的网格，我希望它们可以点击。单击应该能够执行某项功能。我怎样才能这样做？

我的代码:

import javax.swing.JFrame; //JFrame Class
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Graphics;

   public class Driver extends Canvas
   {
      public void paint( Graphics g) {
         g.setColor(Color.RED);
         int rows = 5;
        for (int y=0;y< rows;y++)
            {
            for (int x=0;x<rows;x++)
               {
               g.drawOval((x + 1) * 150, (y + 1) *150, 100, 100);
               }

             }

      }
      public static void main(String[] args)
      {
         JFrame f = new JFrame("Flow"); //new JFrame
         Driver t = new Driver();
         f.setSize(900,900);//sets size of frame

         f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//sets default close operation

         f.setVisible(true);//makes panel visible
         f.add(t);

        }
}

Answer 1

首先不要在 Canvas 上绘图。这是一个 AWT 组件，您正在创建一个 Swing 应用程序。使用 JPanel 进行自定义绘画。然后您将重写 paintComponent(...) 方法。阅读 Swing 教程中关于 Custom Painting 的部分了解更多信息。

现在，您应该更改绘画代码以从 ArrayList 中绘制对象，而不是使用 drawOval(...) 方法来绘制圆。

因此，在绘画类的构造函数中，您需要创建 ArrayList 来包含要绘制的对象:

circles = new ArrayList<Shape>()
int rows = 5;

for (int y=0;y< rows;y++)
{
    for (int x=0;x<rows;x++)
    {
        circles.add( new Ellipse2D.Double((x + 1) * 150, (y + 1) *150, 100, 100) );
    }
}

这将创建您想要绘制的形状的 ArrayList。在本例中为 25 个圆圈。

现在需要更改 paintComponent() 代码以绘制每个形状。所以代码会是这样的:

@Override
protected void paintComponent(Graphics g)
{
    super.paintComponent(g);

    //  Custom code to paint all the Circles from the List

    Graphics2D g2d = (Graphics2D)g;
    Color foreground = g2d.getColor();

    g2d.setColor( Color.RED );

    for (Shape shape : circles)
    {
        g2d.draw( shape );
    }
}

I want them to be clickable.

我们进行上述更改的原因是，您现在可以将 MouseListener 添加到面板，然后在 mouseClicked 事件中您现在可以搜索包含圆圈的 ArrayList 以查看单击了哪个圆圈。 Shape 接口(interface)实现了 contains(...) 方法，因此您只需检查每个圆圈以查看它是否包含单击鼠标的 Point。

因此 `mouseClicked(...) 方法中的基本逻辑是:

Point p = event.getPoint();

for (Shape shape: circles)
{
    if (shape.contains(p))
        // do something
}