Блог

Задача: у нас есть width и height часть canvas. У нас есть font family и line-height .

Вопрос: Каков максимально возможный размер шрифта для некоторого случайного текста любой длины?

Вот несколько вспомогательных функций, которые помогают измерить высоту обернутого текста на холсте:

 function calculateTextLines(context, maxWidth, lineHeight) {
    minimum_text_width = 0
    let words = text.split(' ')
    let line = ''
    let lines = []

    // # Generates an array of wrapped line and
    // # calculates the height of future text to center it later
    for (let n = 0; n < words.length; n  ) {
        // # The next 3 lines calculates minimum possible width of the text box
        let minimum_text_width_metrics = context.measureText(words[n])
        if (minimum_text_width_metrics.width > minimum_text_width)
            minimum_text_width = minimum_text_width_metrics.width

        let testLine = line   words[n]   ' '
        let metrics = context.measureText(testLine)
        let testWidth = metrics.width
        if (testWidth > maxWidth amp;amp; n > 0) {
            lines.push(line)
            line = words[n]   ' '
        } else {
            line = testLine
        }
    }
    lines.push(line)

    if (minimum_text_width > canvas.width)
        minimum_text_width = canvas.width

    return lines
}


function calculateNewHeight(new_width, fontsize) {
    let ctx = canvas.getContext('2d')
    ctx.save()

    ctx.font = fontsize   'px '   font.family
    ctx.textAlign = font.align
    const lines = calculateTextLines(ctx, new_width, font.line - height * fontsize)

    ctx.restore()
    return lines.length * (font.line - height * fontsize)
}