1
У меня есть код, который создает PNG-файл с развернутым по углу текстом и отображает его в таблице HTML. Тест выглядит так, как ожидалось, когда файл отображается сам по себе средством просмотра изображений. Я наблюдал это как в Chrome, так и в MS Paint.Непреднамеренное вертикальное масштабирование при отображении повернутого изображения в таблице HTML
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);
Каково значение 'IMAGE_HEIGHT' в вашем коде? Это то же самое, что и значение, которое ваш HTML указывает в атрибуте 'height' каждого элемента'![]()
'? Если два значения высоты отличаются друг от друга, было бы разумно, что HTML будет масштабировать ваше изображение по запросу. –
VGR