Разница в тексте между Linux и OSX в том, что при использовании Batik в SVG конвертируйте SVG в PNG - PullRequest
Новая
       10

Разница в тексте между Linux и OSX в том, что при использовании Batik в SVG конвертируйте SVG в PNG

0 голосов
/ 27 апреля 2018

Когда я запускаю тот же код в среде Linux и пытаюсь преобразовать svg в png, используя батик, позиция текста смещается.

Тот же код в OSX дает правильный png. Похоже, что в Linux положение всех текстовых элементов смещается вправо.

Linux

Resulting image in Linux

OS X :

Resulting image in OSX

Почему образ неправильный в Linux?

Вот код: 

TranscoderInput input = new TranscoderInput(svgPath);
// define OutputStream to PNG Image and attach to TranscoderOutput
OutputStream ostream = null;
File tempOutputFile = File.createTempFile(svgPath, ".png");
tempOutputFile.deleteOnExit();
try {
    ostream = new FileOutputStream(tempOutputFile);
} catch (FileNotFoundException e) {
    e.printStackTrace();
}
TranscoderOutput output = new TranscoderOutput(ostream);
// create a JPEG transcoder
PNGTranscoder t = new PNGTranscoder();
// set the transcoding hints
// convert and write output
t.transcode(input, output);
// flush and close the stream then exit
ostream.flush();
ostream.close();
return tempOutputFile;

SVG-файл : 

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->

  <title>Layer 1</title>
  <rect display-height="NaN" display-width="NaN" display-y="125.5" display-x="65.25" rect-id="0" id="svg_1" height="194" width="316" y="115" x="129" stroke-width="0.5" stroke="#000000" fill="none"/>
  <text alignment-baseline="text-before-edge" xml:space="preserve" text-anchor="start" font-family="serif" font-size="24" id="svg_2" y="125.5" x="65.25" stroke-width="0" stroke="#000000" fill="#000000">sssssss</text>

</svg>

1 Ответ

0 голосов
/ 28 апреля 2018

Во-первых, я не уверен, какой именно результат вы пытаетесь достичь. Два скриншота и фрагмент, включенный в вопрос, отображают что-то другое. Пытаетесь ли вы, чтобы конец текста совпадал с левой стороной прямоугольника?

Здесь происходит несколько потенциальных проблем:

  1. Вы не используете один и тот же шрифт во всех средах. Вы можете сказать это по скриншотам. «sans-serif» не обязательно будет одним и тем же шрифтом в разных операционных системах. Особенно, если один и тот же шрифт не установлен на обоих.

  2. Даже при одинаковом шрифте, с разными механизмами рендеринга шрифта, текст отображается немного по-разному Вы не обязательно получите идеальное по пикселям позиционирование.

  3. Я могу ошибаться, но я подозреваю, что Батик, вероятно, не поддерживает alignment-baseline. Так что это повлияет на ваше позиционирование текста.

  4. Если вы хотите, чтобы конец фрагмента текста точно совпадал с какой-либо точкой, используйте text-anchor="end", чтобы сделать текст по правому краю. См. Ниже. 

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <rect id="svg_1" height="194" width="316" y="115" x="129" stroke-width="0.5" stroke="#000000" fill="none"/>
  <text text-anchor="end" font-family="serif" font-size="24" id="svg_2" y="115" x="129" stroke-width="0" stroke="#000000" fill="#000000">Exact corner</text>
</svg>
...