java Swingにて、画像分割した際に画像が見切れてしまう。

Question

前提・実現したいこと

Swingにて、神経衰弱を作成する課題を現在行っているのですが、
画像サイズ：1480 x 748の画像を5行13列で分割したいのですが、キングが表示されず
縦も少し見切れてしまっている状態です。(添付画像の状態)

この画像を使って、画像をシャッフルしたり・ゲーム開始時は裏面だけを表示したりする
処理を追加していきたいため、ちゃんと画像を分割したいのですが元画像の大きさを変更してみても変わりませんでした。
記載しているコードがおかしいのかも判断できないため、お手数ですが、ご教示いただけますと幸いです。

発生している問題・エラーメッセージ

エラーはなし

該当のソースコード

import java.awt.Graphics;

import javax.swing.JFrame;

public class Pair_matching extends JFrame{
	CARD card;
	
	// CARDのシャッフル、0x100:裏、0x200：非表示
	int T[] = new int[52];
	
	public static void main(String[] args) {
		new Pair_matching();
	}
	
	public Pair_matching() {
		super("神経衰弱");
		card = new CARD("card52.png", 106, 148);
		setBounds(10, 10, 1550, 950);
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setVisible(true);
	}
	
	// Paint Method
	public void paint(Graphics g) {
		super.paint(g);
		for(int i=0; i<5; i++) {
			for(int j=0; j<13; j++) {
				card.view(g,i*13+j,j*106+20,i*150+46);
			}
		}
	}
}

import java.awt.Graphics;
import java.awt.Image;
import java.io.File;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.swing.JFrame;

public class CARD extends JFrame{
	private Image img;
	private int Height, Width, Hnum, Wnum;
	int frameNum;
	Random rand;
	
	public CARD(String filename, int ws, int hs) {
		Width= ws;
        Height= hs;
        Wnum=Hnum= 1;
        // 画像のロード
        File infile = new File(filename);
        img = loadImage(infile);
        Wnum = img.getWidth(null)/Width;
        Hnum = img.getHeight(null)/Height;
        frameNum = Wnum*Hnum;
        if(Wnum<1 || Hnum<1 ) {
        	System.out.println("Image File Error");
        	rand = new Random(); // 乱数の初期化
        }
	}

	// Sprit View
	public void view(Graphics g, int n, int dx, int dy) {
		int sx, sy;
		if(n >= frameNum) {
			System.out.println("Sprite Number Error");
			return;
		}
		sx = (n % Wnum) * Width;
		sy = (n / Wnum) * Height;
		if(img != null) {
			g.drawImage(img, dx, dy, dx+Width, dy+Height, sx, sy, sx+Width, sy+Height, this);
		}
	}
	
	// Load Image
	public static Image loadImage(File infile) {
		try {
			Image img = ImageIO.read(infile);
			return img;
		}catch(IOException e) {
			throw new RuntimeException(e);
		}
	}
}

試したこと

画像自体が大きい過ぎるのかと思い、サイズ変更してみましたが変わりませんでした。

補足情報（FW/ツールのバージョンなど）

Eclipse：Version: 2021-06 (4.20.0)

Comments

[jimbe]

なぜ CARD クラスは JFrame を継承しているのでしょう。

Answer 1

drawImage のパラメータである各座標値をカード毎に表示してみて、カード画像内の各位置とあっているかを確認されては如何でしょうか。

---

106等の数値を直接指定するのではなく、画像が正しく作られている前提で、各イメージの大きさを求める風にしては如何でしょう。

import java.awt.Graphics;
import java.awt.Image;
import java.awt.image.ImageObserver;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.JFrame;

public class ConcentrationFrame extends JFrame {

    public static void main(String[] args) throws IOException {
        new ConcentrationFrame().setVisible(true);
    }

    private CardsImage cardsImage;

    public ConcentrationFrame() throws IOException {
        super("神経衰弱");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setBounds(10, 10, 1550, 950);

        cardsImage = new CardsImage("card52.png");
    }

    public void paint(Graphics g) {
        super.paint(g);
        for(int i=0; i<13*4+1; i++) {
            int x = (i%13) * cardsImage.getCardWidth()  + 20;
            int y = (i/13) * cardsImage.getCardHeight() + 46;
            cardsImage.drawCard(g, i, x, y, this);
        }
    }

    private static class CardsImage {
        private Image img;
        private int height, width;

        public CardsImage(String filename) throws IOException {
            img = ImageIO.read(new File(filename)); //画像のロード
            width = img.getWidth(null) / 13;
            height = img.getHeight(null) / 5;
        }

        public void drawCard(Graphics g, int n, int dx, int dy, ImageObserver observer) {
            if(img == null) throw new IllegalStateException("image nothing.");
            if(n >= 13*4+1) throw new IllegalArgumentException("Number Error");

            int sx = (n % 13) * width;
            int sy = (n / 13) * height;
            g.drawImage(img, dx, dy, dx+width, dy+height, sx, sy, sx+width, sy+height, observer);
        }
        public int getCardWidth() { return width; }
        public int getCardHeight() { return height; }
    }
}

Answer 2

1480 x 748の画像を5行13列で分割したい

縦も横も割り切れなくないですか？
まあ割り切れなきゃダメというわけでもないでしょうが、intで計算していると誤差がたまりそうな気がします。

元画像がわからないので何とも言えませんが、106とかの根拠は何でしょう？（1480/13とはだいぶ乖離がありますが）

g.drawImage(img, dx, dy, dx + Width, dy + Height, sx, sy, sx + Width, sy + Height, null);
g.drawRect(dx, dy, Width, Height);

とかでどこに何を描いているかを見えるようにすると、わかりやすくなるかもしれません。

あるいは BufferedImage#getSubimage で、１枚ずつ切ってしまったほうが楽な気もします。

Comments

[sosoooooo3]

ご回答いただきありがとうございます。

> 元画像がわからないので何とも言えませんが、106とかの根拠は何でしょう？（1480/13とはだいぶ乖離がありますが）

上記ですが、参考にしていたサイトが画像内のカードのサイズを記載していたため、
「1480 x 748」のサイズ内にあるトランプ1枚分の大きさをフォトショップ等でサイズを測って記載しました。(参考サイトの画像の大きさがどのくらいかは記載がなかったので、わかりかねます。すみません)

> あるいは BufferedImage#getSubimage で、１枚ずつ切ってしまったほうが楽な気もします。

この記述は試していないため、試したいと思います。

[TN8001]

まずはdrawRectを試してみてください。
要は「切り出し位置を間違っているのでは？」と思っています。

全部並べてしまうと一見うまくいっているように見えてしまうので、例えばハートの１０だけ出すとかもいいかもしれません。