将图像拆分为可点击区域 [英] Split image into clickable regions

问题描述

有没有办法将图像分割到区域（现在它是JLabel，但我可以在必要时更改它）？

我在程序中使用swing并且我有一个图像（这个例子是正方形） ）里面有一些三角形，星星和梯形（它可以是JPG，PNG等）。

想法是用户会点击其中一个形状，然后我会再放一个小图标用户点击的区域顶部。用户可以点击多个区域，但在一天结束时，我需要知道点击了哪些形状。

Is there any way to split an image to region (right now it's JLabel but I can change it if necessary)?
I use swing in my program and I have an image (square for this example) with some triangles, stars and trapezoids inside it (it can be JPG, PNG, etc).
The idea is that the user will click inside one of those shapes and then I will put another small icon on top of the area the user clicked. The user can click on multiple areas but at the end of the day, I need to know which shapes were clicked.

似乎有人可能吗？

推荐答案

看看我是什么已作出：

这是我用于测试的图像：

This is the image I used for testing:

图片拆分后：

以下是来源：

import java.awt.Graphics2D;
import java.awt.GridLayout;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.SwingUtilities;

public class Test {

    private JFrame frame;
    private JLabel[] labels;
    private static String imagePath = "c:/test.jpg";
    private final int rows = 3; //You should decide the values for rows and cols variables
    private final int cols = 3;
    private final int chunks = rows * cols;
    private final int SPACING = 10;//spacing between split images

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {

            @Override
            public void run() {
                new Test().createAndShowUI();
            }
        });
    }

    private void createAndShowUI() {
        frame = new JFrame("Test");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        initComponents();
        frame.setResizable(false);
        frame.pack();
        frame.setVisible(true);
    }

    private void initComponents() {

        BufferedImage[] imgs = getImages();

        //set contentpane layout for grid
        frame.getContentPane().setLayout(new GridLayout(rows, cols, SPACING, SPACING));

        labels = new JLabel[imgs.length];

        //create JLabels with split images and add to frame contentPane
        for (int i = 0; i < imgs.length; i++) {
            labels[i] = new JLabel(new ImageIcon(Toolkit.getDefaultToolkit().createImage(imgs[i].getSource())));
            frame.getContentPane().add(labels[i]);
        }
    }

    private BufferedImage[] getImages() {
        File file = new File(imagePath); // I have bear.jpg in my working directory
        FileInputStream fis = null;
        try {
            fis = new FileInputStream(file);
        } catch (FileNotFoundException ex) {
            Logger.getLogger(Test.class.getName()).log(Level.SEVERE, null, ex);
        }
        BufferedImage image = null;
        try {
            image = ImageIO.read(fis); //reading the image file
        } catch (IOException ex) {
            Logger.getLogger(Test.class.getName()).log(Level.SEVERE, null, ex);
        }
        int chunkWidth = image.getWidth() / cols; // determines the chunk width and height
        int chunkHeight = image.getHeight() / rows;
        int count = 0;
        BufferedImage imgs[] = new BufferedImage[chunks]; //Image array to hold image chunks
        for (int x = 0; x < rows; x++) {
            for (int y = 0; y < cols; y++) {
                //Initialize the image array with image chunks
                imgs[count] = new BufferedImage(chunkWidth, chunkHeight, image.getType());

                // draws the image chunk
                Graphics2D gr = imgs[count++].createGraphics();
                gr.drawImage(image, 0, 0, chunkWidth, chunkHeight, chunkWidth * y, chunkHeight * x, chunkWidth * y + chunkWidth, chunkHeight * x + chunkHeight, null);
                gr.dispose();
            }
        }
        return imgs;
    }
}

唯一的缺陷是我没有检查是否图像比屏幕大，可能会导致问题，这可以通过使用 getScaledInstance（int x，int y，int width，in height）的简单图像大小来解决图像并将其分成块。

The only flaw is I haven't checked if the image is larger then the screen which could cause problems, that would be resolved by a simple image resize using getScaledInstance(int x,int y, int width, in height) on the image and the separating it into chunks.

抱歉，如果形状中的问题，我错过了部分，看看 绘制（形状s） 方法 Graphics2D / 图形。

Sorry I missed the part if the question in Shapes, have a look at draw(Shape s) method of Graphics2D/Graphics.

我读过这个：

任何Shape对象可以用作限制将要渲染的绘图区域的
部分的剪切路径。剪切路径
是 Graphics2D 上下文的一部分;要设置剪辑属性，请调用
Graphics2D.setClip 并传入定义要使用的剪切
路径的Shape。

Any Shape object can be used as a clipping path that restricts the portion of the drawing area that will be rendered. The clipping path is part of the Graphics2D context; to set the clip attribute, you call Graphics2D.setClip and pass in the Shape that defines the clipping path you want to use.

请看这里将u]图像剪裁成形状：剪切绘图区域

See here for clipping an u]image to a shape: Clipping the Drawing Region

参考文献：

• 如何将图像拆分为块 - Java ImageIO

• How to Split an Image into Chunks - Java ImageIO

这篇关于将图像拆分为可点击区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！