Pdf-lib.js не может правильно измерить и заполнить текст в многослойном текстовом поле ⇐ Javascript

[Anonymous]

Я работаю над формой PDF, где мне нужно ограничить переполнение многослойного текстового поля. Идея состоит в том, чтобы не допустить, чтобы пользователи не вводят больше текста, чем поле визуально. Тем не менее, я сталкиваюсь с проблемой с измерением текста. Однако в фактическом отображении PDF точка, по -видимому, начинается после горизонтальной линии «T». Это несоответствие означает, что моя логика измерения, которая опирается на расчет общей ширины текста, вызывает ошибку, когда текст достиг максимально допустимой ширины. где части глифов перекрываются или имеют необычный кернинг. Я пробовал измерения в отношении характера и другие изменения, но я все еще сталкиваюсь с проблемами, потому что некоторые буквы, кажется, перекрываются или «дергают» вместе в измерении, в то время как в последнем рендеринге PDF у них есть естественное расстояние. < /P>
. Существует ли библиотека или более надежный подход для измерения и ограничения текста, который учитывает нюансы позиционирования глифа и кернинга, как указано в PDF? индивидуально и суммируйте их ширину.const textField = document.getElementById('text');
const statusMessage = document.getElementById('statusMessage');
const maxTextWidth = 600; // Maximum width per line in pixels
const allowedLines = 12;

// Create an offscreen canvas for text measurement
const measurementCanvas = document.createElement('canvas');
const measurementContext = measurementCanvas.getContext('2d');
measurementContext.font = '10pt Arial';

// Function to count how many wrapped lines the text occupies
function getWrappedLineCount(text, maxWidth, context) {
let lines = 0;
const paragraphs = text.split('\n');
paragraphs.forEach(para => {
if (para === "") {
lines++;
} else {
const words = para.split(' ');
let line = '';
words.forEach(word => {
const testLine = line ? line + ' ' + word : word;
if (context.measureText(testLine).width > maxWidth && line !== '') {
lines++;
line = word;
} else {
line = testLine;
}
});
if (line !== '') {
lines++;
}
}
});
return lines;
}

// Listen for input on the multiline text field and restrict further input if needed
textField.addEventListener('input', function() {
let text = textField.value;
let lines = getWrappedLineCount(text, maxTextWidth, measurementContext);
if (lines allowedLines && text.length > 0) {
text = text.slice(0, -1);
}
textField.value = text;
statusMessage.textContent = "Keine Zeicheneingabe mehr möglich";
statusMessage.style.color = "red";
}
});


Подробнее здесь: https://stackoverflow.com/questions/795 ... -correctly