Как оправдать выравнивание текста в html5 canvas? - PullRequest
Новая
       4

Как оправдать выравнивание текста в html5 canvas?

6 голосов
/ 29 июня 2011

Как я могу выровнять текст на холсте html5 для выравнивания?? В приведенном ниже коде текст может быть выровнен влево / вправо / по центру. Мне нужно установить align="justify". Пожалуйста, предложите, как это можно сделать?

HTML: 

<body onload="callMe()">
    <canvas id="MyCanvas"></canvas>
</body>

JS: 

function callMe() {
    var canvas = document.getElementById("MyCanvas");
    var ctx = canvas.getContext("2d");
    var txt = "Welcome to the new hello world example";
    cxt.font = "10pt Arial";
    cxt.textAlign = "left";

    /* code to text wrap*/
    cxt.fillText(txt, 10, 20);
}

1 Ответ

2 голосов
/ 29 июня 2011

HTML5-холст не поддерживает многострочное рисование текста, поэтому нет никакого реального влияния на тип выравнивания.

Если вы хотите поддерживать перевод строки, вы должны сами это сделать, вы можете увидеть предыдущийобсуждение этого здесь: HTML5 Canvas - могу ли я каким-либо образом использовать перевод строки в fillText ()?

Это моя реализация для переноса слов / перевода строки: 

    function printAtWordWrap(context, text, x, y, lineHeight, fitWidth) {
        fitWidth = fitWidth || 0;
        lineHeight = lineHeight || 20;

        var currentLine = 0;

        var lines = text.split(/\r\n|\r|\n/);
        for (var line = 0; line < lines.length; line++) {


            if (fitWidth <= 0) {
                context.fillText(lines[line], x, y + (lineHeight * currentLine));
            } else {
                var words = lines[line].split(' ');
                var idx = 1;
                while (words.length > 0 && idx <= words.length) {
                    var str = words.slice(0, idx).join(' ');
                    var w = context.measureText(str).width;
                    if (w > fitWidth) {
                        if (idx == 1) {
                            idx = 2;
                        }
                        context.fillText(words.slice(0, idx - 1).join(' '), x, y + (lineHeight * currentLine));
                        currentLine++;
                        words = words.splice(idx - 1);
                        idx = 1;
                    }
                    else
                    { idx++; }
                }
                if (idx > 0)
                    context.fillText(words.join(' '), x, y + (lineHeight * currentLine));
            }
            currentLine++;
        }
    }

здесь нет поддержки выравнивания или обоснования, вам придется добавить ее в

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...