在现有图像上绘制一个带有每个单元格坐标的网格

Question

我正在尝试制作一个函数，它接受一个 JPG 文件，添加一个网格覆盖，并在每个单元格中写入文本 A1、A2、A3 等等。当前代码（下方）仅绘制网格，具有静态列/行大小。问题 1) 如何在每个单元格中添加坐标作为文本？例如，行是字母，列是数字。所以第一行是 A1、A2、A3 ...，下一行是 B1、B2、B3。问题 2）如何修改它，以便指定我想要的行数和列数，并且它会自动相应地调整列/行的大小以适应输入图像的尺寸？function draw_grid(&$img, $x0, $y0, $width, $height, $cols, $rows, $color) {    imagesetthickness($img, 5);    //draw outer border    imagerectangle($img, $x0, $y0, $x0+$width*$cols, $y0+$height*$rows, $color);    //first draw horizontal    $x1 = $x0;    $x2 = $x0 + $cols*$width;    for ($n=0; $n<ceil($rows/2); $n++) {        $y1 = $y0 + 2*$n*$height;        $y2 = $y0 + (2*$n+1)*$height;        imagerectangle($img, $x1,$y1,$x2,$y2, $color);    }    //then draw vertical    $y1 = $y0;    $y2 = $y0 + $rows*$height;    for ($n=0; $n<ceil($cols/2); $n++) {        $x1 = $x0 + 2*$n*$width;        $x2 = $x0 + (2*$n+1)*$width;        imagerectangle($img, $x1,$y1,$x2,$y2, $color);    }}$imgpath = "foto/306/306.jpg";$img = imagecreatefromjpeg($imgpath);$size = getimagesize($imgpath);$width = $size[0];$height = $size[1];$red   = imagecolorallocate($img, 255,   0,   0);draw_grid($img, 0,0, $width /10 , $height /10 ,20,10,$red);header("Content-type: image/jpg");imagejpeg($img);imagedestroy($img);

Answer 1

正如我的评论中所述，您当前的代码只是在勾勒轮廓。这适用于绘制网格，但如果您希望向单元格添加一些文本，则必须手动绘制每个矩形，并使用这些坐标来放置文本。

使用imagettfbbox，您可以计算文本的宽度/高度，您需要该信息才能将文本“居中”到单元格中。

关于你的第二个问题，将总图片宽度除以你想要的单元格数，这样你就会知道每个单元格的大小。

我已经更新了您的代码以显示计算 x/y 坐标的一般思路

<?php

$imgpath = "duck.jpg";

$img = imagecreatefromjpeg($imgpath);

$size = getimagesize($imgpath);

$width = $size[0];

$height = $size[1];

$red   = imagecolorallocate($img, 255,   0,   0);

// Number of cells

$xgrid = 5;

$ygrid = 5;

// Calulate each cell width/height

$xgridsize = $width / $xgrid;

$hgridsize = $height / $ygrid;

// Remember col

$c = 'A';

// Y

for ($j=0; $j < $ygrid; $j++) {

    // X

    for ($i=0; $i < $xgrid; $i++) {

        // Dynamic x/y coords

        $sy = $hgridsize * $j;

        $sx = $xgridsize * $i;

        // Draw rectangle

        imagerectangle($img, $sx, $sy, $sx + $xgridsize, $sy + $hgridsize, $red);

        // Draw text

        addTextToCell($img, $sx, $xgridsize, $sy + $hgridsize, $hgridsize, $c . ($i + 1));

    }

    // Bumb cols

    $c++;

}

function addTextToCell($img, $cellX, $cellWidth, $cellY, $cellHeight, $text) {

    // Calculate text size

    $text_box = imagettfbbox(20, 0, 'OpenSans', $text);

    $text_width = $text_box[2]-$text_box[0];

    $text_height = $text_box[7]-$text_box[1];

    // Calculate x/y position

    $textx = $cellX + ($cellWidth / 2) - $text_width;

    $texty = $cellY - ($cellHeight / 2) - $text_height;

    // Set color and draw

    $color = imagecolorallocate($img, 0, 0, 255);

    imagettftext($img, 20, 0, $textx, $texty, $color, 'OpenSans', $text);

}

// Save output as file

imagejpeg($img, 'output.jpg');

imagedestroy($img);

shell_exec('open -a Preview output.jpg');

Answer 2

1）检查imagettftext()和imagefttext()功能。其中之一应该做你想做的。

2) 将输入图像的宽和高分别除以要划分的列数和行数，得到每个单元格的宽和高。