先看下效果图

实现思路

• PS 扣一个底层的模板图片
• 读取底层模板图片
• 绘制产品主图, 图片加圆角处理, 图片抗锯齿处理
• 绘制产品标题, 计算内容宽度并换行, 文字坐标计算, 字体抗锯齿处理
• 绘制产品价格
• 生成二维码图片, 二维码白边处理

PS 扣一个底层的模板图片

这个环节我们主要用PS抠图并记录下每个元素的坐标和大小

<code>/**
 * 产品图片区域
 */
private Rectangle imageArea = new Rectangle(64, 64, 620, 620);
/**
 * 标题区域
 */
private Rectangle titleArea = new Rectangle(86, 712, 300, 64);
/**
 * 价格区域
 */
private Rectangle priceArea = new Rectangle(552, 720, 118, 43);
/**
 * 二维码区域
 */
private Rectangle qrcodeArea = new Rectangle(87, 830, 100, 100);/<code>

读取底层模板图片

<code>// 读取模版图片
final BufferedImage cardImg = ImageIO.read(ClassLoader.getSystemResource(templatePath));
final Graphics2D g = cardImg.createGraphics();/<code>

绘制产品主图,加圆角,抗锯齿

<code>// 绘制封面
BufferedImage productImg = ImageIO.read(product.getProductImageUrl());
// 切圆角
productImg = setRadius(productImg, 60);
// 绘制
g.drawImage(productImg, imageArea.x, imageArea.y, imageArea.width, imageArea.height, null);/<code>

<code>public static BufferedImage setRadius(BufferedImage srcImage, int radius) {
    int w = srcImage.getWidth();
    int h = srcImage.getHeight();
    BufferedImage output = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
    Graphics2D g2 = output.createGraphics();
    g2.setComposite(AlphaComposite.SrcOut);
    // 抗锯齿
    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    g2.setColor(new Color(0, 0, 0));
    g2.setBackground(Color.black);
    g2.setPaint(new Color(0, 0, 0)); 

    g2.fill(new RoundRectangle2D.Float(0, 0, w, h, radius, radius));
    g2.setComposite(AlphaComposite.SrcAtop);
    g2.drawImage(srcImage, 0, 0, null);
    g2.dispose();
    return output;
}/<code>

绘制产品标题,换行,坐标计算,抗锯齿

在使用drawString 绘制文本内容的时候如果, 你需要填写坐标 x, y 如果你直接把ps上面的坐标用在代码里面的话你会发现位置根本就不对, 那是为什么呢？

字体的高由个元素组成： ascent , descent

drawString中用的y坐标是指baseline的y坐标，即字体所在矩形的左上角y坐标+ascent

<code>// 开启文本抗锯齿
g.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);/<code>

<code>private void drawTitle(ProductCard product, Graphics2D g) {
    g.setColor(Color.decode("#666666"));
    g.setFont(new Font("宋体", Font.BOLD, 28));
    int ascent = g.getFontMetrics(g.getFont()).getAscent();
    final Rectangle2D titleBounds = g.getFontMetrics().getStringBounds(product.getTitle(), g);
    // 一行最多 10 个字符
    final String title = product.getTitle();
    final int rowMaxWidth = titleArea.width;
    if (titleBounds.getWidth() > rowMaxWidth) {
        final char[] chars = product.getTitle().toCharArray();
        for (int i = 0, w = 0, start = 0; i < chars.length; i++) {
            w += g.getFontMetrics().charWidth(chars[i]);
            if (w >= rowMaxWidth) {
                if (start == 0) {
                    // 写第一行
                    int y = titleArea.y + ascent;
                    g.drawString(title.substring(0, i), titleArea.x, y);
                    start = i;
                    w = 0;
                } else if (start > 0) {
                    // 写第二行
                    String part2 = title.substring(start, i);
                    // 判断是否需要追加点点点
                    if (titleBounds.getWidth() > rowMaxWidth * 2) part2 += "...";
                    // 绘制
                    int padding = 5;
                    int y = titleArea.y + ascent + titleArea.height / 2 + padding;
                    g.drawString(part2, titleArea.x, y);
                    break;
                }
            }
        }
    } else {
        g.drawString(title, titleArea.x, titleArea.y + ascent); 

    }
}/<code>

绘制产品价格

标题会了价格就很简单了, 这里有个遗留问题就是： 如果价格超过4位数会出现超出图片的问题, 大家可以修改模板或者调整字号来解决

<code>g.setFont(new Font("Arial", Font.BOLD, 48));
final FontMetrics fontMetrics = g.getFontMetrics(g.getFont());
g.setColor(Color.decode("#ff4f13"));
g.drawString(product.getPrice(), priceArea.x, priceArea.y + fontMetrics.getAscent());/<code>

生成二维码图片, 删除白边

生成二维码我们需要依赖一个第三方依赖

<code>
<dependency>
    <groupid>com.google.zxing/<groupid>
    <artifactid>core/<artifactid>
    <version>3.3.0/<version>
/<dependency>
<dependency>
    <groupid>com.google.zxing/<groupid>
    <artifactid>javase/<artifactid>
    <version>3.3.0/<version>
/<dependency>/<code>

生成二维码

<code>// 生成二维码图片
QRCodeWriter qrCodeWriter = new QRCodeWriter();
BitMatrix bitMatrix = qrCodeWriter.encode(product.getProductUrl(), BarcodeFormat.QR_CODE, qrcodeArea.width, qrcodeArea.height);/<code>

删除白边

<code>public static BitMatrix deleteWhite(BitMatrix matrix) {
    int[] rec = matrix.getEnclosingRectangle();
    int resWidth = rec[2] + 1; 

    int resHeight = rec[3] + 1;
    BitMatrix resMatrix = new BitMatrix(resWidth, resHeight);
    resMatrix.clear();
    for (int i = 0; i < resWidth; i++) {
        for (int j = 0; j < resHeight; j++) {
            if (matrix.get(i + rec[0], j + rec[1]))
                resMatrix.set(i, j);
        }
    }
    return resMatrix;
}/<code>

源码地址：https://gitee.com/qiaohhgz/product-tools.git

閱讀更多 IT實戰聯盟 的文章

關鍵字: 文末 绘制 牛刀小试