Java - 在圆的边缘、顶部和底部绘制文本

Question

Java - 在圆的边缘、顶部和底部绘制文本

Sco*_*son 2 java graphics image image-processing

我希望在顶部和底部围绕圆的半径绘制轮廓文本，文本的两个部分都面向正确的方向。

如何在AWT中绘制文本周围的轮廓？和用 Java 沿着曲线编写文本帮助我创建了代码（如下），该代码将逐个字符地绘制文本，其中每个字符独立旋转（有一些小的图形故障，这将是另一个问题的主题）。

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.Shape;
import java.awt.font.FontRenderContext;
import java.awt.font.GlyphVector;
import java.awt.geom.AffineTransform;
import java.awt.geom.Rectangle2D;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;

public class CreateTextStackOverflow {
    private static final int EDGE_GAP = 10;

    public static void main(String[] args) throws IOException {
        BufferedImage bi = new BufferedImage(364,364,BufferedImage.TYPE_INT_ARGB);
        Graphics2D g = (Graphics2D)bi.getGraphics();

        Font font = new Font("Arial",Font.BOLD,48);

        FontMetrics fm = g.getFontMetrics(font);
        int imageWidth = bi.getWidth();
        int imageHeight = bi.getHeight();
        int centerX = imageWidth/2;
        int centerY = imageHeight/2;
        int radius = Math.min(centerX,centerY)-EDGE_GAP-((int)Math.ceil(fm.getMaxCharBounds(g).getHeight()/2.0));

        drawOutlinedTextAroundCircle(g,"TOP TEXT",0,false,imageWidth,imageHeight,radius,centerX,centerY,font,Color.BLACK,Color.WHITE);
        drawOutlinedTextAroundCircle(g,"BOTTOM TEXT",0,true,imageWidth,imageHeight,radius,centerX,centerY,font,Color.RED,Color.WHITE);

        ImageIO.write(bi, "png", new File("test.png"));
    }

    private static void drawOutlinedTextAroundCircle(Graphics2D g, String text, int textCenterAngleDegrees, boolean atBottom, int imageWidth, int imageHeight, int radius, int centerX, int centerY, Font font, Color outlineColour, Color innerColour) {
        FontMetrics fm = g.getFontMetrics(font);
        char[] characters = text.toCharArray();
        int characterCount = characters.length;
        int spaceCharacterWidth = fm.charWidth('n');
        boolean[] spaces = new boolean[characterCount];
        int[] characterWidths = new int[characterCount+1];
        characterWidths[characterCount] = 0;
        for (int index=0; index<characterCount; index++) {
            char character = characters[index];
            spaces[index] = character == ' ' || Character.isSpaceChar(character);
            characterWidths[index] = spaces[index]?spaceCharacterWidth:fm.charWidth(character);
        }
        double currentAngle = 0;
        double[] characterAngles = new double[characterCount];
        int leading = fm.getLeading();
        for (int index=0; index<characterCount; index++) {
            characterAngles[index] = currentAngle;
            currentAngle += Math.sin(((characterWidths[index]/2.0) + leading + (characterWidths[index+1]/2.0)) / (double)radius);
        }
        double adjustment = (textCenterAngleDegrees * Math.PI / 180) - ((characterAngles[characterCount-1] - characterAngles[0]) / 2.0);
        for (int index=0; index<characterCount; index++) {
            characterAngles[index] += adjustment;
        }
        AffineTransform flipTransform = new AffineTransform();
        if (atBottom) {
            flipTransform.scale(1,-1);
            flipTransform.translate(0,-imageHeight);
        }
        AffineTransform translateTransform = new AffineTransform(flipTransform);
        translateTransform.translate(centerX, centerY);
        for (int index=0; index<characterCount; index++) {
            if (!spaces[index]) {
                AffineTransform rotateTransform = new AffineTransform(translateTransform);
                rotateTransform.rotate(characterAngles[index], 0.0, 0.0);
                float x = (float)(-(characterWidths[index]/2.0));
                float y = (float)(-radius);
                FontRenderContext frc = g.getFontRenderContext();
                String str = new String(characters,index,1);
                GlyphVector glyphVector = font.createGlyphVector(frc, str);
                Rectangle2D box = glyphVector.getVisualBounds();
                g.setTransform(rotateTransform);
                g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
                Shape shape = glyphVector.getOutline((float)(x - box.getX()), (float)(y - box.getY()));
                g.setColor(innerColour);
                g.fill(shape);
                g.setColor(outlineColour);
                g.setStroke(new BasicStroke(1f));
                g.draw(shape);
            }
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

（产生）

这存在底部文本不正确的问题。

我曾多次尝试使用不同的仿射变换来更改绘制的每个字符，但无济于事。

我的目标是找到一个解决方案，其中 0 度会导致文本位于圆的顶部/底部中心，而增加度数会将文本进一步移至右侧，如 GIMP 中模拟的图表所示：

以这种方式绘制文本的正确方法是什么？

Answer 1

Sco*_*son 6

从头开始，使用我编写并发布到原始问题的代码作为基础，以及无数张纸，我计算出了这个工作原理：

如果文本位于底部，并且增加角度会将文本移动到左侧（与最初要求的不同）

按顺序执行：

将字符按相反顺序排列
将图像旋转 180 度
水平和垂直翻转每个字形

如果文本位于底部，并且增加角度会将文本移至右侧

任何一个：

执行上述操作，但首先取消角度
按顺序执行：
- 水平翻转整个图像
- 将图像旋转 180 度
- 垂直翻转每个字形

下面的解决方案实现了这一点（使用左侧选项）。它还将文本样式的逻辑与文本定位分开：

package uk.co.scottdennison.java.testbed;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.Shape;
import java.awt.Stroke;
import java.awt.font.FontRenderContext;
import java.awt.font.GlyphVector;
import java.awt.geom.AffineTransform;
import java.awt.geom.Rectangle2D;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import uk.co.scottdennison.java.testbed.TextUtilities.CircularTextPosition;
import uk.co.scottdennison.java.testbed.TextUtilities.GlyphDrawer;

import static uk.co.scottdennison.java.testbed.TextUtilities.CircularTextPosition.BASELINE_ON_CIRCLE;
import static uk.co.scottdennison.java.testbed.TextUtilities.CircularTextPosition.INSIDE_CIRCLE;
import static uk.co.scottdennison.java.testbed.TextUtilities.CircularTextPosition.OUTSIDE_CIRCLE;

public class CreateText4 {
    private static final int IMAGE_SIZE = 364;
    private static final Color BACKGROUND_COLOUR = new Color(242,247,254);
    private static final Font FONT = new Font("Arial",Font.BOLD,48);
    private static final Stroke STROKE = new BasicStroke(1f);
    private static final Color UPPER_TEXT_FILL_COLOUR = Color.WHITE;
    private static final Color UPPER_TEXT_OUTLINE_COLOUR = Color.RED;
    private static final Color LOWER_TEXT_FILL_COLOUR = Color.WHITE;
    private static final Color LOWER_TEXT_OUTLINE_COLOUR = Color.BLUE;

    public static void main(String[] args) throws IOException {
        for (CircularTextPosition textPosition : CircularTextPosition.values()) {
            for (int squash=0; squash<=1; squash++) {
                for (int angle=0; angle<360; angle+=15) {
                    int edgeGap = 0;
                    switch (textPosition) { // For the demo, the edge gaps need to be different, but the enum in TextUtilities could be in a completely separate library so should have no knowledge of this.
                        case INSIDE_CIRCLE:
                            edgeGap = 10;
                            break;
                        case BASELINE_ON_CIRCLE:
                            edgeGap = 40;
                            break;
                        case OUTSIDE_CIRCLE:
                            edgeGap = 70;
                            break;
                    }
                    draw(angle,edgeGap,squash==1,textPosition);
                }
            }
        }
    }

    public static void draw(int angle, int edgeGap, boolean squash, CircularTextPosition circularTextPosition) throws IOException {
        System.out.println("angle=" + angle + " / squash=" + squash + " / circularTextPosition=" + circularTextPosition);
        BufferedImage bi = new BufferedImage(IMAGE_SIZE,IMAGE_SIZE,BufferedImage.TYPE_INT_ARGB);
        Graphics2D g = (Graphics2D)bi.getGraphics();

        double center = IMAGE_SIZE/2.0;
        double radius = center-edgeGap;
        int flooredCenter = (int)Math.floor(center);
        int ceiledCenter = (int)Math.ceil(center);

        g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

        g.setColor(BACKGROUND_COLOUR);
        g.fillRect(-1,-1,IMAGE_SIZE+2,IMAGE_SIZE+2);

        g.setStroke(new BasicStroke(1f));

        g.setColor(Color.GREEN);
        g.drawLine(0, 0, IMAGE_SIZE, IMAGE_SIZE);
        g.drawLine(flooredCenter, 0, flooredCenter, IMAGE_SIZE);
        if (flooredCenter != ceiledCenter) {
            g.drawLine(flooredCenter-1, 0, flooredCenter-1, IMAGE_SIZE);
        }
        g.drawLine(IMAGE_SIZE, 0, 0, IMAGE_SIZE);
        g.drawLine(0, flooredCenter, IMAGE_SIZE, flooredCenter);
        if (flooredCenter != ceiledCenter) {
            g.drawLine(0, flooredCenter-1, IMAGE_SIZE, flooredCenter-1);
        }

        g.setColor(Color.RED);
        g.drawOval((int)(center-radius),(int)(center-radius),(int)(radius+radius-1),(int)(radius+radius-1));

        TextUtilities.drawTextAroundCircle(g,"Top y Text"   ,angle,squash,circularTextPosition,false,radius,center,center,FONT,new OutlinedFilledGlyphDrawer(UPPER_TEXT_FILL_COLOUR,UPPER_TEXT_OUTLINE_COLOUR,STROKE));
        TextUtilities.drawTextAroundCircle(g,"Bottom y Text",angle,squash,circularTextPosition,true ,radius,center,center,FONT,new OutlinedFilledGlyphDrawer(LOWER_TEXT_FILL_COLOUR,LOWER_TEXT_OUTLINE_COLOUR,STROKE));

        ImageIO.write(bi, "png", new File(String.format("test_%s_%s_%03d.png", circularTextPosition.name().toLowerCase().replace("_","-"),squash?"squashed":"normal",angle)));
    }

    public static class OutlinedFilledGlyphDrawer implements GlyphDrawer {
        private Color oldGraphicsStateColor;
        private Stroke oldGraphicsStateStroke;
        private final Color fillColour;
        private final Color outlineColour;
        private final Stroke stroke;

        public OutlinedFilledGlyphDrawer(Color fillColour, Color outlineColour, Stroke stroke) {
            this.fillColour = fillColour;
            this.outlineColour = outlineColour;
            this.stroke = stroke;
        }

        @Override
        public void saveGraphicsStateBeforeDraw(Graphics2D g) {
            this.oldGraphicsStateColor = g.getColor();
            this.oldGraphicsStateStroke = g.getStroke();
        }

        @Override
        public void drawGlyph(Graphics2D preTransformedG, Shape glyph) {
            preTransformedG.setColor(this.fillColour);
            preTransformedG.fill(glyph);
            preTransformedG.setColor(this.outlineColour);
            preTransformedG.setStroke(this.stroke);
            preTransformedG.draw(glyph);
        }

        @Override
        public void restoreGraphicsStateAfterDraw(Graphics2D g) {
            g.setColor(this.oldGraphicsStateColor);
            g.setStroke(this.oldGraphicsStateStroke);
        }
    }
}

class TextUtilities { // Ideally separate into it's own package rather and then don't use static inner classes, but for this single-file demo, it works.
    public static enum CircularTextPosition {
        OUTSIDE_CIRCLE {
            @Override
            double calculateActualRadius(double radius, double maxAscent, double maxDescent, boolean flip) {
                return radius;
            }
        },
        BASELINE_ON_CIRCLE {
            @Override
            double calculateActualRadius(double radius, double maxAscent, double maxDescent, boolean flip) {
                return radius-(flip?maxAscent:maxDescent);
            }
        },
        INSIDE_CIRCLE {
            @Override
            double calculateActualRadius(double radius, double maxAscent, double maxDescent, boolean flip) {
                return radius-maxAscent-maxDescent;
            }
        };

        abstract double calculateActualRadius(double radius, double maxAscent, double maxDescent, boolean flip);
    }

    public static interface GlyphDrawer {
        void saveGraphicsStateBeforeDraw(Graphics2D g);
        void drawGlyph(Graphics2D preTransformedG, Shape glyph);
        void restoreGraphicsStateAfterDraw(Graphics2D g);
    }

    public static void drawTextAroundCircle(Graphics2D g, String text, int centerAngleInDegrees, boolean squash, CircularTextPosition circularTextPosition, boolean flip, double radius, double centerX, double centerY, Font font, GlyphDrawer glyphDrawer) {
        AffineTransform oldTransform = g.getTransform();
        glyphDrawer.saveGraphicsStateBeforeDraw(g);

        FontMetrics fm = g.getFontMetrics(font);
        FontRenderContext frc = g.getFontRenderContext();

        char[] characters = text.toCharArray();
        int characterCount = characters.length;
        if (flip) {
            char[] reversedCharacters = new char[characterCount];
            for (int index=0; index<characterCount; index++) {
                reversedCharacters[index] = characters[characterCount-index-1];
            }
            characters = reversedCharacters;
        }

        double maxAscent;
        double maxDescent;
        if (squash) {
            maxAscent = 0;
            maxDescent = 0;
        } else {
            maxAscent = fm.getMaxAscent();
            maxDescent = fm.getMaxDescent();
        }

        double spaceCharacterWidth = fm.charWidth('n');
        double leading = fm.getLeading();
        boolean[] charactersAreSpaces = new boolean[characterCount];
        GlyphVector[] characterGlyphVectors = new GlyphVector[characterCount];
        Rectangle2D[] characterGlyphBounds = new Rectangle2D[characterCount];
        double[] characterWidths = new double[characterCount+1];
        double[] characterAscents = new double[characterCount];
        double[] characterDescents = new double[characterCount];
        for (int index=0; index<characterCount; index++) {
            char character = characters[index];

            boolean isSpace = character == ' ' || Character.isSpaceChar(character);
            GlyphVector glyphVector = font.createGlyphVector(frc, Character.toString(character));
            Rectangle2D glyphBounds = glyphVector.getVisualBounds();
            double width = isSpace?spaceCharacterWidth:glyphBounds.getWidth();
            double ascent = -glyphBounds.getY();
            double descent = glyphBounds.getHeight()-ascent;

            charactersAreSpaces[index] = isSpace;
            characterGlyphVectors[index] = glyphVector;
            characterGlyphBounds[index] = glyphBounds;
            characterWidths[index] = width;
            characterAscents[index] = ascent;
            characterDescents[index] = descent;

            if (squash) {
                maxAscent = Math.max(maxAscent,ascent);
                maxDescent = Math.max(maxDescent,descent);
            }
        }

        double actualRadius = circularTextPosition.calculateActualRadius(radius, maxAscent, maxDescent, flip);

        double currentAngleInRadians = 0;
        double[] characterAnglesInRadians = new double[characterCount];
        for (int index=0; index<characterCount; index++) {
            characterAnglesInRadians[index] = currentAngleInRadians;
            currentAngleInRadians += Math.sin(((characterWidths[index]/2.0) + leading + (characterWidths[index+1]/2.0)) / actualRadius);
        }
        double angleAdjustment = (centerAngleInDegrees * Math.PI / 180) - ((characterAnglesInRadians[characterCount-1] - characterAnglesInRadians[0]) / 2.0);
        for (int index=0; index<characterCount; index++) {
            characterAnglesInRadians[index] += angleAdjustment;
        }

        AffineTransform stringTransform = oldTransform;
        if (stringTransform == null) {
            stringTransform = new AffineTransform();
        }
        if (flip) {
            stringTransform.rotate(Math.PI, centerX, centerY);
        }

        for (int index=0; index<characterCount; index++) {
            if (!charactersAreSpaces[index]) {
                GlyphVector glyphVector = characterGlyphVectors[index];
                Rectangle2D glyphBounds = characterGlyphBounds[index];
                if (flip) {
                    AffineTransform oldGlyphVectorTransform = glyphVector.getGlyphTransform(0);
                    if (oldGlyphVectorTransform == null) {
                        oldGlyphVectorTransform = new AffineTransform();
                    }
                    AffineTransform newGlyphVectorTransform = new AffineTransform(oldGlyphVectorTransform);
                    newGlyphVectorTransform.scale(-1, -1);
                    newGlyphVectorTransform.translate(-(glyphBounds.getWidth()+glyphBounds.getX()+glyphBounds.getX()),glyphBounds.getHeight()+(maxAscent-characterAscents[index])-characterDescents[index]-maxDescent);
                    glyphVector.setGlyphTransform(0, newGlyphVectorTransform);
                }
                AffineTransform characterTransform = new AffineTransform(stringTransform);
                characterTransform.translate(centerX, centerY);
                characterTransform.rotate(characterAnglesInRadians[index]);
                characterTransform.translate(-((glyphBounds.getX()+(glyphBounds.getWidth()/2))),-(actualRadius+maxDescent));
                g.setTransform(characterTransform);
                glyphDrawer.drawGlyph(g, glyphVector.getOutline(0, 0));
            }
        }

        glyphDrawer.restoreGraphicsStateAfterDraw(g);
        g.setTransform(oldTransform);
    }
}

Run Code Online (Sandbox Code Playgroud)

然后可以生成（请注意，由于该字母的下降幅度较大，文本包含“y”）：

BASELINE_ON_CIRCLE（未挤压）：

INSIDE_CIRCLE（未压扁）：

OUTSIDE_CIRCLE（未压扁）：

我希望这段代码对将来查看这个问题的其他人有所帮助。

归档时间：	7 年，4 月前
查看次数：	1340 次
最近记录：	7 年，4 月前