相对参考图标定位网格图标 每行3个换行的布局算法bug排查

需求与异常说明 #

已在网格中放置1个参考图标，其余图标需相对该参考图标按规则排布：

• 单行相邻摆放图标最多3个，超出3个自动新起一行排布
• 复现异常参数：xref=500、yref=550、imgWidthAndHeight=20，摆放4个图标时位置计算错误
• 预期排布（以6个图标含参考图标为例）：

xxx
xxx
x
其中第一个x为参考图标，xref、yref为参考图标原始坐标，imgWidthAndHeight为图标统一宽高尺寸。

原有错误实现 #

void placeImages(int xref, int yref, int imgWidthAndHeight)
{
    int xCopy = xref;
    int yCopy = yref;
    int numberOfImgs = 1;

    for (int i = 0; i < 10; i++) 
    {
        Icon newImg = new Icon("test.jpg", new Size(imgWidthAndHeight, imgWidthAndHeight));

        //if we have more than 3 images lined next to each other...
        if (numberOfImgs++ == 3)
        {
            numberOfImgs = 0;
            //...we reset the x position
            xCopy = xref;
            //and move the y position down using the size of the image
            yCopy = yref + imgWidthAndHeight;
        }
        else
            //otherwise we place the image next to the previous one
            xCopy += imgWidthAndHeight;              

        //and create the location using these calculated coordinates
        Point? location = new Point(xCopy, yCopy);
        
        //add the image to the diagram
        page.diagram.AddImage(newImg, location);
    }
}

代码问题点 #

• 计数逻辑错位：触发换行后将numberOfImgs重置为0，结合后置自增的判断逻辑，会导致每行实际放置4个图标才触发下一次换行，不符合单行3个的规则
• Y轴计算错误：换行时固定使用yCopy = yref + imgWidthAndHeight赋值，没有累计行偏移量，第三行及之后的所有图标都会覆盖在第二行位置，不会持续向下排布
• 坐标更新顺序错误：先计算更新坐标再放置图标，换行分支中没有正确匹配新行的X坐标偏移规则，导致新行第一个图标的计数和坐标不匹配，4个图标场景下就会出现位置重叠、越界问题

修正后代码 #

void placeImages(int xref, int yref, int imgWidthAndHeight)
{
    // 参考图标已占第一行第一个位置，初始坐标从参考图标右侧相邻位开始
    int currentX = xref + imgWidthAndHeight;
    int currentY = yref;
    // 当前行已放置图标数，初始为1（参考图标）
    int currentRowCount = 1;

    // 循环放置剩余图标，和原逻辑保持10个总图标（含参考）的数量
    for (int i = 0; i < 9; i++) 
    {
        Icon newImg = new Icon("test.jpg", new Size(imgWidthAndHeight, imgWidthAndHeight));
        // 先按当前计算坐标放置图标
        Point? location = new Point(currentX, currentY);
        page.diagram.AddImage(newImg, location);

        currentRowCount++;
        if (currentRowCount == 3)
        {
            // 满3个换行：X重置为参考图标X坐标，Y累加一个图标高度
            currentX = xref;
            currentY += imgWidthAndHeight;
            // 重置行计数
            currentRowCount = 0;
        }
        else
        {
            // 未满3个则向右偏移一个图标宽度
            currentX += imgWidthAndHeight;
        }
    }
}

内容的提问来源于stack exchange，提问作者jcampos12