时间戳

首页 > 解决方案 > 如何使用 Canvas 在 Java 中制作一组可点击的圆圈？

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

问题描述

所以我用画布绘制了一个由 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);

        }
}

标签： javacanvaslistenerpaint

解决方案

首先不要在画布上绘图。那是一个 AWT 组件，您正在创建一个 Swing 应用程序。使用 aJPanel进行自定义绘画。然后，您将覆盖该paintComponent(...)方法。阅读 Swing 教程中关于自定义绘画的部分以获取更多信息。

现在，您应该更改绘制代码以从 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 );
    }
}

我希望它们是可点击的。

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

所以 `mouseClicked(...) 方法的基本逻辑是：

Point p = event.getPoint();

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

推荐阅读