Как добавить / n (новая строка) к строке на основе ширины пикселя и ограничить количество символов на основе высоты пикселя - PullRequest
Новая
       15

Как добавить / n (новая строка) к строке на основе ширины пикселя и ограничить количество символов на основе высоты пикселя

0 голосов
/ 01 апреля 2020

Что я хочу сделать, это добавить новую строку (/ n) в строку, когда она превышает заданную ширину пикселя в Javascript.

Текст извлекается из текстовой области в HTML и будет отличаться в зависимости от выбранного шрифта и размера шрифта. Последняя строка будет использоваться с PIL.

Я также хочу ограничить длину ввода и иметь возможность дать обратную связь пользователю, сколько места осталось для символов на основе ширины и высоты пикселя.

Кто-нибудь знает какие-либо пакеты или что-то еще, что могло бы обеспечить эти функции?

1 Ответ

0 голосов
/ 21 апреля 2020

Я создал свое собственное решение. Просто чтобы обновить этот пост на тот случай, если кто-то еще может его использовать. Очень и очень c на данный момент. В ближайшее время продолжим работу и будем надеяться на обновление.

Используется pixi. js для получения метрик шрифта. Оттуда он вычисляет текст, записанный в текстовую область, и вычисляет процент того, сколько места используется, на основе доступной области пикселей. Просто быстрый набросок на данный момент. Но может помочь кому-то еще!

HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<p id="used-percentage"></p>
<div>
    <textarea id="editor"></textarea>
    <button id="button">Click me</button>

    <p id="string"></p>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<script src="main.js"></script>

</body>
</html>

JS: 

document.getElementById("editor").addEventListener("keypress", readText)

function readText(){
    let string = document.getElementById("editor").value;
    textMetrics(string)
}

function textMetrics(text){
    let style = new PIXI.TextStyle({fontFamily : 'Comic Sans MS', fontSize: 24, wordWrap: true, wordWrapWidth: 640})
    let textMetrics = PIXI.TextMetrics.measureText(text, style)
    console.log(textMetrics)

    // calculatePercentageUsed(textMetrics.maxLineWidth, textMetrics.height)

    calculatePixelUsed(textMetrics.lineWidths, textMetrics.lineHeight)
}

function calculatePixelUsed(lineWidths, lineHeight){
    let squaredLines = [];
    let squarepxUsed = 0;
    for (let i = 0; i < lineWidths.length; i++) {
        squaredLines[i] = lineWidths[i] * lineHeight;
        // console.log(squaredLines)
    }

    for (let j = 0; j < squaredLines.length; j++) {
        squarepxUsed += squaredLines[j];
        // console.log(squaredLines)
    }


    calculatePercentage(squarepxUsed)
}

function calculatePercentage(squarepxUsed) {
    let squarepxAvailable = 640 * 384
    let percentage = squarepxUsed / squarepxAvailable * 100
    document.getElementById("used-percentage").innerHTML = percentage
    // console.log(percentage)
}

CSS: 

#editor {
width: 640px;
height: 384px;
font-family: "Comic Sans MS", sans-serif;
font-size: 24px;
}

Демо: https://codepen.io/noodlesnort/pen/KKdgBQV

...