Java 竖排长图文生成

作者: 一灰灰blog | 来源:发表于2017-09-07 20:07 被阅读10次

背景

前面Java 实现长图文生成中实现了一个基本的长图文生成工具，但遗留了一些问题

文字中包含英文字符时，分行计算问题
暂不支持竖排文字展示

其中英文字符的计算已经修复，主要是通过FontMetric来计算字符串实际占用绘制的长度，这一块不做多讲，本篇主要集中在竖排文字的支持

设计

有前面的基础，在做竖排文字支持上，本以为是比较简单就能接入的，而实际的实现过程中，颇为坎坷

1. 竖排文字绘制

首先需要支持竖排文字的绘制，使用Graphics2d进行绘制时，暂不支持竖排绘制方式，因此我们需要自己来实现

而设计思路也比较简单，一个字一个字的绘制，x坐标不变，y坐标依次增加

private void draw(Graphics2D g2d, String content, int x, int y, FontMetrics fontMetrics) {
    int lastY = y;
    for (int i = 0; i < content.length(); i ++) {
        g2d.drawString(content.charAt(i) + "", x, lastY);
        lastY += fontMetrics.charWidth(content.charAt(i)) + fontMetrics.getDescent();
    }
}

2. 自动换行

竖排的自动换行相比较与水平有点麻烦的是间隔问题，首先看下FontMertric的几个参数 ascent, descent, height

https://static.oschina.net/uploads/img/201709/05181941_gJBV.jpg

举一个例子来看如何进行自动换行

// 列容量 
contain = 100

// FontMetric 相关信息:
fontMetric.ascent = 18;
fontMetric.descent = 4;
fontMetric.height = 22;

// 待绘制的内容为
content = "这是一个待绘制的文本长度，期待自动换行";

首先我们是需要获取内容的总长度，中文还比较好说，都是方块的，可以直接用 fontMetrics.stringWidth(content) 获取内容长度（实际为宽度），然后需要加空格(即descent)

所以计算最终的行数可以如下

// 72
int l = fontMetrics.getDescent() * (content.length() - 1); 
 // 5
int lineNum = (int) Math.ceil((fontMetrics.stringWidth(str) + l) / (float) lineLen);

根据上面的计算， l=72, lineNum=5;

然后就是一个字符一个字符的进行绘制，每次需要重新计算y坐标

tmpLen = fontMetrics.charWidth(str.charAt(i)) + fontMetrics.getDescent();

其次就是需要判断是否要换行

lastTotal += tmpLen;
if(lastTotal > contain) {
  // 换行
}

3. 从右到左支持

从左到右还比较好说，y坐标一直增加，当绘制的内容超过当前的图片时，直接在扩展后的图片上(0,0)位置进行绘制即可；

而从右到左则需要计算偏移量，如下图

offset

实现

1. 文本自动换行

实现一个公共方法，根据上面的思路用于文本的自动换行

public static String[] splitVerticalStr(String str, int lineLen, FontMetrics fontMetrics) {
    // 字体间距所占用的高度
    int l = fontMetrics.getDescent() * (str.length() - 1);
    // 分的行数
    int lineNum = (int) Math.ceil((fontMetrics.stringWidth(str) + l) / (float) lineLen);

    if (lineNum == 1) {
        return new String[]{str};
    }


    String[] ans = new String[lineNum];
    int strLen = str.length();
    int lastTotal = 0;
    int lastIndex = 0;
    int ansIndex = 0;
    int tmpLen;
    for (int i = 0; i < strLen; i++) {
        tmpLen = fontMetrics.charWidth(str.charAt(i)) + fontMetrics.getDescent();
        lastTotal += tmpLen;
        if (lastTotal > lineLen) {
            ans[ansIndex++] = str.substring(lastIndex, i);
            lastIndex = i;
            lastTotal = tmpLen;
        }
    }

    if (lastIndex < strLen) {
        ans[ansIndex] = str.substring(lastIndex);
    }

    return ans;
}

上面的实现，唯一需要注意的是，换行时，y坐标自增的场景下，需要计算 fontMetric.descent 的值，否则换行偏移会有问题

2. 垂直文本的绘制

1. 起始y坐标计算

因为我们支持集中不同的对齐方式，所以在计算起始的y坐标时，会有出入, 实现如下

上对齐，则 y = 上边距
下对其，则 y = 总高度 - 内容高度 - 下边距
居中，则 y = (总高度 - 内容高度) / 2

/**
 * 垂直绘制时，根据不同的对其方式，计算起始的y坐标
 *
 * @param topPadding    上边距
 * @param bottomPadding 下边距
 * @param height        总高度
 * @param strSize       文本内容对应绘制的高度
 * @param style         对其样式
 * @return
 */
private static int calOffsetY(int topPadding, int bottomPadding, int height, int strSize, ImgCreateOptions.AlignStyle style) {
    if (style == ImgCreateOptions.AlignStyle.TOP) {
        return topPadding;
    } else if (style == ImgCreateOptions.AlignStyle.BOTTOM) {
        return height - bottomPadding - strSize;
    } else {
        return (height - strSize) >> 1;
    }
}

2. 实际绘制y坐标计算

实际绘制中，y坐标还不能直接使用上面返回值，因为这个返回是字体的最上边对应的坐标，因此需要将实际绘制y坐标，向下偏移一个字

realY = calOffsetY(xxx) + fontMetrics.getAscent();

//...

// 每当绘制完一个文本后，下个文本的Y坐标，需要加上这个文本所占用的高度+间距
realY += fontMetrics.charWidth(tmp.charAt(i)) + g2d.getFontMetrics().getDescent();

3. 换行时，x坐标计算

绘制方式的不同，从左到右与从右到左两种场景下，自动换行后，新行的x坐标的增量计算方式也是不同的

从左到右：int fontWidth = 字体宽度 + 行间距
从右到左：int fontWidth = - (字体宽度 + 行间距）

完整的实现逻辑如下

 /**
 * 垂直文字绘制
 *
 * @param g2d
 * @param content 待绘制的内容
 * @param x       绘制的起始x坐标
 * @param options 配置项
 */
public static void drawVerticalContent(Graphics2D g2d,
                                       String content,
                                       int x,
                                       ImgCreateOptions options) {
    int topPadding = options.getTopPadding();
    int bottomPadding = options.getBottomPadding();

    g2d.setFont(options.getFont());
    FontMetrics fontMetrics = g2d.getFontMetrics();

    // 实际填充内容的高度， 需要排除上下间距
    int contentH = options.getImgH() - options.getTopPadding() - options.getBottomPadding();
    String[] strs = splitVerticalStr(content, contentH, g2d.getFontMetrics());

    int fontWidth = options.getFont().getSize() + options.getLinePadding();
    if (options.getDrawStyle() == ImgCreateOptions.DrawStyle.VERTICAL_RIGHT) { // 从右往左绘制时，偏移量为负
        fontWidth = -fontWidth;
    }


    g2d.setColor(options.getFontColor());

    int lastX = x, lastY, startY;
    for (String tmp : strs) {
        lastY = 0;
        startY = calOffsetY(topPadding, bottomPadding, options.getImgH(),
                fontMetrics.stringWidth(tmp) + fontMetrics.getDescent() * (tmp.length() - 1), options.getAlignStyle())
                + fontMetrics.getAscent();

        for (int i = 0; i < tmp.length(); i++) {
            g2d.drawString(tmp.charAt(i) + "",
                    lastX,
                    startY + lastY);

            lastY += g2d.getFontMetrics().charWidth(tmp.charAt(i)) + g2d.getFontMetrics().getDescent();
        }
        lastX += fontWidth;
    }
}

3. 垂直图片绘制

文本绘制实现之后，再来看图片，就简单很多了，因为没有换行的问题，所以只需要计算y坐标的值即可

此外当图片大于参数指定的高度时，对图片进行按照高度进行缩放处理；当小于高度时，就原图绘制即可

实现逻辑如下

public static int drawVerticalImage(BufferedImage source,
                                        BufferedImage dest,
                                        int x,
                                        ImgCreateOptions options) {
    Graphics2D g2d = getG2d(source);
    int h = Math.min(dest.getHeight(), options.getImgH() - options.getTopPadding() - options.getBottomPadding());
    int w = h * dest.getWidth() / dest.getHeight();

    int y = calOffsetY(options.getTopPadding(),
            options.getBottomPadding(),
            options.getImgH(),
            h,
            options.getAlignStyle());


    // xxx 传入的x坐标，即 contentW 实际上已经包含了行间隔，因此不需额外添加
    int drawX = x;
    if (options.getDrawStyle() == ImgCreateOptions.DrawStyle.VERTICAL_RIGHT) {
        drawX = source.getWidth() - w - drawX;
    }
    g2d.drawImage(dest, drawX, y, w, h, null);
    g2d.dispose();
    return w;
}

4. 封装类的实现

正如前面一篇博文中实现的水平图文生成的逻辑一样，垂直图文生成也采用之前的思路：

每次在文本绘制时，直接进行渲染；
记录实际内容绘制的宽度（这个宽度包括左or右边距）
每次绘制时，判断当前的画布是否容纳得下所有的内容
- 容的下，直接绘制即可
- 容不下，则需要扩充画布，生成一个更宽的画布，将原来的内容重新渲染在新画布上，然后在新画布上进行内容的填充

因为从左到右和从右到左的绘制在计算x坐标的增量时，扩充画布的重新绘制时，有些明显的区别，所以为了逻辑清晰，将两种场景分开，提供了两个方法

实现步骤:

计算实际绘制内容占用的宽度
判断是否需要扩充画布（需要则扩充）
绘制文本
更新内容的宽度

private Builder drawVerticalLeftContent(String content) {
    if (contentW == 0) { // 初始化边距
        contentW = options.getLeftPadding();
    }

    Graphics2D g2d = GraphicUtil.getG2d(result);
    g2d.setFont(options.getFont());
    FontMetrics fontMetrics = g2d.getFontMetrics();


    String[] strs = StringUtils.split(content, "\n");
    if (strs.length == 0) { // empty line
        strs = new String[1];
        strs[0] = " ";
    }

    int fontSize = fontMetrics.getFont().getSize();
    int lineNum = GraphicUtil.calVerticalLineNum(strs, options.getImgH() - options.getBottomPadding() - options.getTopPadding(), fontMetrics);

    // 计算填写内容需要占用的宽度
    int width = lineNum * (fontSize + options.getLinePadding());


    if (result == null) {
        result = GraphicUtil.createImg(
                Math.max(width + options.getRightPadding() + options.getLeftPadding(), BASE_ADD_H),
                options.getImgH(),
                null);
        g2d = GraphicUtil.getG2d(result);
    } else if (result.getWidth() < contentW + width + options.getRightPadding()) {
        // 超过原来图片宽度的上限, 则需要扩充图片长度
        result = GraphicUtil.createImg(
                result.getWidth() + Math.max(width + options.getRightPadding(), BASE_ADD_H),
                options.getImgH(),
                result);
        g2d = GraphicUtil.getG2d(result);
    }


    // 绘制文字
    int index = 0;
    for (String str : strs) {
        GraphicUtil.drawVerticalContent(g2d, str,
                contentW + (fontSize + options.getLinePadding()) * (index ++)
                , options);
    }
    g2d.dispose();

    contentW += width;
    return this;
}


private Builder drawVerticalRightContent(String content) {
    if(contentW == 0) {
        contentW = options.getRightPadding();
    }

    Graphics2D g2d = GraphicUtil.getG2d(result);
    g2d.setFont(options.getFont());
    FontMetrics fontMetrics = g2d.getFontMetrics();


    String[] strs = StringUtils.split(content, "\n");
    if (strs.length == 0) { // empty line
        strs = new String[1];
        strs[0] = " ";
    }

    int fontSize = fontMetrics.getFont().getSize();
    int lineNum = GraphicUtil.calVerticalLineNum(strs, options.getImgH() - options.getBottomPadding() - options.getTopPadding(), fontMetrics);

    // 计算填写内容需要占用的宽度
    int width = lineNum * (fontSize + options.getLinePadding());


    if (result == null) {
        result = GraphicUtil.createImg(
                Math.max(width + options.getRightPadding() + options.getLeftPadding(), BASE_ADD_H),
                options.getImgH(),
                null);
        g2d = GraphicUtil.getG2d(result);
    } else if (result.getWidth() < contentW + width + options.getLeftPadding()) {
        // 超过原来图片宽度的上限, 则需要扩充图片长度
        int newW = result.getWidth() + Math.max(width + options.getLeftPadding(), BASE_ADD_H);
        result = GraphicUtil.createImg(
                newW,
                options.getImgH(),
                newW - result.getWidth(),
                0,
                result);
        g2d = GraphicUtil.getG2d(result);
    }


    // 绘制文字
    int index = 0;
    int offsetX = result.getWidth() - contentW;
    for (String str : strs) {
        GraphicUtil.drawVerticalContent(g2d, str,
                offsetX - (fontSize + options.getLinePadding()) * (++index)
                , options);
    }
    g2d.dispose();

    contentW += width;
    return this;
}

对比从左到右与从右到左，区别主要是两点

扩充时，在新画布上绘制原画布内容的x坐标计算，一个为0，一个为 新宽度-旧宽度
offsetX 的计算

上面是文本绘制，图片绘制比较简单，基本上和水平绘制时，没什么区别，只不过是扩充时的w，h计算不同罢了

private Builder drawVerticalImage(BufferedImage bufferedImage) {
    int padding = options.getDrawStyle() == ImgCreateOptions.DrawStyle.VERTICAL_RIGHT ? options.getLeftPadding() : options.getRightPadding();

    // 实际绘制图片的宽度
    int bfImgW = bufferedImage.getHeight() > options.getImgH() ? bufferedImage.getWidth() * options.getImgH() / bufferedImage.getHeight() : bufferedImage.getWidth();
    if(result == null) {
        result = GraphicUtil.createImg(
                Math.max(bfImgW + options.getLeftPadding() + options.getRightPadding(), BASE_ADD_H),
                options.getImgH(),
                null);
    } else if (result.getWidth() < contentW + bfImgW + padding) {
        int realW = result.getWidth() + Math.max(bfImgW + options.getLeftPadding() + options.getRightPadding(), BASE_ADD_H);
        int offsetX = options.getDrawStyle() == ImgCreateOptions.DrawStyle.VERTICAL_RIGHT ? realW - result.getWidth() : 0;
        result = GraphicUtil.createImg(
                realW,
                options.getImgH(),
                offsetX,
                0,
                null);
    }

    int w = GraphicUtil.drawVerticalImage(result, bufferedImage, contentW, options);
    contentW += w + options.getLinePadding();
    return this;
}

5. 输出

上面是绘制的过程，绘制完毕之后，需要输出为图片的，因此对于这个输出需要再适配一把

再前一篇的基础上，输出新增了签名+背景的支持，这里一并说了

计算生成图片的宽高
有签名时，绘制签名背景，在最下方绘制签名文本
背景图片
绘制填充内容

public BufferedImage asImage() {
    int leftPadding = 0;
    int topPadding = 0;
    int bottomPadding = 0;
    if (border) {
        leftPadding = this.borderLeftPadding;
        topPadding = this.borderTopPadding;
        bottomPadding = this.borderBottomPadding;
    }


    int x = leftPadding;
    int y = topPadding;


    // 实际生成图片的宽， 高
    int realW, realH;
    if (options.getImgW() == null) { // 垂直文本输出
        realW = contentW + options.getLeftPadding() + options.getRightPadding();
        realH = options.getImgH();
    } else { // 水平文本输出
        realW = options.getImgW();
        realH = contentH + options.getBottomPadding();
    }

    BufferedImage bf = new BufferedImage((leftPadding << 1) + realW, realH + topPadding + bottomPadding, BufferedImage.TYPE_INT_ARGB);
    Graphics2D g2d = GraphicUtil.getG2d(bf);


    // 绘制边框
    if (border) {
        g2d.setColor(borderColor == null ? ColorUtil.OFF_WHITE : borderColor);
        g2d.fillRect(0, 0, realW + (leftPadding << 1), realH + topPadding + bottomPadding);


        // 绘制签名
        g2d.setColor(Color.GRAY);

        // 图片生成时间
        String date = DateFormatUtils.format(new Date(), "yyyy-MM-dd HH:mm:ss");
        borderSignText = borderSignText + "  " + date;

        int fSize = Math.min(15, realW / (borderSignText.length()));
        int addY = (borderBottomPadding - fSize) >> 1;
        g2d.setFont(new Font(ImgCreateOptions.DEFAULT_FONT.getName(), ImgCreateOptions.DEFAULT_FONT.getStyle(), fSize));
        g2d.drawString(borderSignText, x, y + addY + realH + g2d.getFontMetrics().getAscent());
    }


    // 绘制背景
    if (options.getBgImg() == null) {
        g2d.setColor(bgColor == null ? Color.WHITE : bgColor);
        g2d.fillRect(x, y, realW, realH);
    } else {
        g2d.drawImage(options.getBgImg(), x, y, realW, realH, null);
    }


    // 绘制内容
    if (options.getDrawStyle() == ImgCreateOptions.DrawStyle.VERTICAL_RIGHT) {
        x = bf.getWidth() - result.getWidth() - x;
    }
    g2d.drawImage(result, x, y, null);
    g2d.dispose();
    return bf;
}

测试

测试case

@Test
public void testLocalGenVerticalImg() throws IOException {
    int h = 300;
    int leftPadding = 10;
    int topPadding = 10;
    int bottomPadding = 10;
    int linePadding = 10;
    Font font = new Font("手札体", Font.PLAIN, 18);

    ImgCreateWrapper.Builder build = ImgCreateWrapper.build()
            .setImgH(h)
            .setDrawStyle(ImgCreateOptions.DrawStyle.VERTICAL_LEFT)
            .setLeftPadding(leftPadding)
            .setTopPadding(topPadding)
            .setBottomPadding(bottomPadding)
            .setLinePadding(linePadding)
            .setFont(font)
            .setAlignStyle(ImgCreateOptions.AlignStyle.TOP)
            .setBgColor(Color.WHITE)
            .setBorder(true)
            .setBorderColor(0xFFF7EED6)
            ;


    BufferedReader reader = FileReadUtil.createLineRead("text/poem.txt");
    String line;
    while ((line = reader.readLine()) != null) {
        build.drawContent(line);
    }

    build.setAlignStyle(ImgCreateOptions.AlignStyle.BOTTOM)
            .drawImage("/Users/yihui/Desktop/sina_out.jpg");
    build.setFontColor(Color.BLUE).drawContent("后缀签名").drawContent("灰灰自动生成");

    BufferedImage img = build.asImage();
    ImageIO.write(img, "png", new File("/Users/yihui/Desktop/2out.png"));
}

输出图片

https://static.oschina.net/uploads/img/201709/05182105_2smp.jpg

再输出一个从右到左的，居中显示样式

https://static.oschina.net/uploads/img/201709/05182138_My1E.png

补充一张，竖排文字时，标点符号应该居右（之前完全没意识到），修正的图片样式如下

imgShow

其他

相关博文：《Java 实现长图文生成》

项目地址：https://github.com/liuyueyi/quick-media

个人博客：一灰的个人博客

公众号获取更多:

个人信息

Java 竖排长图文生成

背景

设计

1. 竖排文字绘制

2. 自动换行

3. 从右到左支持

实现

1. 文本自动换行

2. 垂直文本的绘制

1. 起始y坐标计算

2. 实际绘制y坐标计算

3. 换行时，x坐标计算

完整的实现逻辑如下

3. 垂直图片绘制

4. 封装类的实现

5. 输出

测试

其他

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JAVA随笔