个人中心
gpt4 book ai didi

java - 在 HTML 表格中显示旋转图像时出现意外的垂直缩放

转载 作者：行者123 更新时间：2023-11-30 07:15:40 26 4
gpt4 key购买 nike

我有代码创建一个 -90 度旋转文本的 PNG 文件并将其显示在 HTML 表格中。当文件本身在图像查看器中显示时，测试看起来与预期一致。我在 Chrome 和 MS Paint 中都观察到了这一点。

Snippet of rotated text in image viewer, no scaling

但是在HTML表格中显示时存在非比例缩放。我在 Chrome 和 IE 中都观察到了这一点。

Snippet of rotated text in HTML table showing disproportional scaling

这是 HTML:

<html>
<head>
<style> td {border-width: 1; border-style: solid; margin-bottom:-1;margin-right:-1; padding: 0px 3px;
    font-family:CorpOs; font-size:20;} img {margin: 0px;}
</style>
</head>
<body>
<table cellspacing=0>
    <tr>
        <td align=center>-</td>
        <td align=center>-</td>
        <td align=right>2.0</td>
        <td align=right>1.0</td>
        <td align=right>2.0</td>
        <td align=right>1.0</td>
        <td align=center>-</td>
        <td align=center>-</td>
        <td align=right>2.0</td>
        <td align=right>1.0</td>
        <td>EA</td>
        <td>23-13141-207</td>
        <td>PLUG-2CAV,MP150,PAC12047662,BK</td>
        <td align=right>1</td>
    </tr>
    <tr>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td align=right>QTY</td>
        <td width=105>UOM</td>
        <td width=144>ITEM NUMBER</td>
        <td width=240>PART DESCRIPTION</td>
        <td>REF</td>
    </tr>
    <tr>
        <td align=right>-009</td>
        <td align=right>-008</td>
        <td align=right>-007</td>
        <td align=right>-006</td>
        <td align=right>-005</td>
        <td align=right>-004</td>
        <td align=right>-003</td>
        <td align=right>-002</td>
        <td align=right>-001</td>
        <td align=right>-000</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_009_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_008_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_007_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_006_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_005_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_004_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_003_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_002_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_001_A.png" height=314 width=49>
        </td>
        <td><img src="file://///ttnacvd003a/CHS/style/table/bom/P3/Harness/A06_94919_000_A.png" height=314 width=49>
        </td>
        <td colspan=4></td>
    </tr>
</table>
</body>
</html>

这是用于生成图像的代码:

    Font smallFont = new Font("Corpos", Font.PLAIN, 16);
    Font contentFont = new Font("Corpos", Font.PLAIN, 36);

    BufferedImage image = new BufferedImage(IMAGE_WIDTH, IMAGE_HEIGHT, BufferedImage.TYPE_INT_ARGB);
    Graphics2D g2 = image.createGraphics();
    g2.setColor(Color.black);
    g2.setRenderingHints(new RenderingHints(ImmutableMap.of(
        RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR,
        RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON
    )));
    g2.drawLine(IMAGE_WIDTH/2, 0, IMAGE_WIDTH/2, IMAGE_HEIGHT);

    AffineTransform labelTransform = new AffineTransform();
    labelTransform.quadrantRotate(-1);
    labelTransform.translate(80, 0);

    AffineTransform partNumberTransform = new AffineTransform();
    partNumberTransform.quadrantRotate(-1);
    partNumberTransform.translate(350, 0);

    AffineTransform descriptionTransform = new AffineTransform();
    descriptionTransform.quadrantRotate(-1);
    descriptionTransform.translate(200, 0);

    g2.setTransform(labelTransform);
    g2.setFont(smallFont);
    g2.drawString("ITEM NUMBER:", -IMAGE_HEIGHT, 12);

    g2.setTransform(partNumberTransform);
    g2.setFont(contentFont);
    g2.drawString(partNumber, -IMAGE_HEIGHT, 38);

    g2.setTransform(labelTransform);
    g2.setFont(smallFont);
    g2.drawString("DESCRIPTION:", -IMAGE_HEIGHT, 64);

    g2.setTransform(descriptionTransform);
    g2.setFont(contentFont);
    g2.drawString(format("%s%s", StringUtils.repeat(" ", (30 - itemDesc.length()) / 2), itemDesc), -IMAGE_HEIGHT, 90);

最佳答案

没关系。我想到了。我有一个比图像宽度更宽的 img 宽度属性。所以我猜 HTML 对其进行了缩放以适应。删除该属性，缩放就会消失。但感谢 Stackoverflow!如果我没有按照指导方针仔细地提出问题，我就不会得到答案。

关于java - 在 HTML 表格中显示旋转图像时出现意外的垂直缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38443840/

26 4 0
文章推荐： java - 如何在maven项目中添加jnetpcap作为依赖项？
文章推荐： java - Play 自定义对象值的框架表单绑定(bind)映射
文章推荐： java - Intellij IDEA 2016.1.3 JAVA语句被删除
文章推荐： java - JAI 关闭文件句柄是否为时过早？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com