webdevqa.jp.net

HTML5キャンバスctx.fillTextは改行をしませんか?

テキストに「\ n」が含まれている場合、キャンバスにテキストを追加できないようです。つまり、改行は表示/動作しません。

ctxPaint.fillText("s  ome \n \\n <br/> thing", x, y);

上記のコードは"s ome \n <br/> thing"、1行。

これはfillTextの制限ですか、それとも間違っていますか? 「\ n」はそこにあり、印刷されませんが、機能しません。

94
Spectraljump

CanvasのfillTextの制限だと思います。複数行のサポートはありません。さらに悪いことに、行の高さを測定する組み込みの方法はなく、幅だけを測定するため、自分でそれを行うのがさらに難しくなります!

多くの人が独自の複数行サポートを書いています。おそらく最も有名なプロジェクトは Mozilla Skywriter です。

あなたがする必要があることの要点は、毎回y値にテキストの高さを追加しながら、複数のfillText呼び出しです。 (Mの幅を測定することは、スカイライターの人々がテキストに近づけるために行うことだと思います。)

55
Simon Sarris

テキスト内の改行文字だけを処理したい場合は、改行でテキストを分割し、fillText()を複数回呼び出すことでシミュレートできます。

http://jsfiddle.net/BaG4J/1/ のようなもの

_var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';
    console.log(c);
var txt = 'line 1\nline 2\nthird line..';
var x = 30;
var y = 30;
var lineheight = 15;
var lines = txt.split('\n');

for (var i = 0; i<lines.length; i++)
    c.fillText(lines[i], x, y + (i*lineheight) );_
_canvas{background-color:#ccc;}_
_<canvas id="c" width="150" height="150"></canvas>_

概念実証のラッピングを作成しました(指定した幅で絶対にラップします。まだ単語の区切りはありません
http://jsfiddle.net/BaG4J/2/ の例

_var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';

var txt = 'this is a very long text to print';

printAt(c, txt, 10, 20, 15, 90 );


function printAt( context , text, x, y, lineHeight, fitWidth)
{
    fitWidth = fitWidth || 0;
    
    if (fitWidth <= 0)
    {
         context.fillText( text, x, y );
        return;
    }
    
    for (var idx = 1; idx <= text.length; idx++)
    {
        var str = text.substr(0, idx);
        console.log(str, context.measureText(str).width, fitWidth);
        if (context.measureText(str).width > fitWidth)
        {
            context.fillText( text.substr(0, idx-1), x, y );
            printAt(context, text.substr(idx-1), x, y + lineHeight, lineHeight,  fitWidth);
            return;
        }
    }
    context.fillText( text, x, y );
}_
_canvas{background-color:#ccc;}_
_<canvas id="c" width="150" height="150"></canvas>_

そして、単語の折り返し(のスペースで分割する)概念実証。
http://jsfiddle.net/BaG4J/5/ の例

_var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';

var txt = 'this is a very long text. Some more to print!';

printAtWordWrap(c, txt, 10, 20, 15, 90 );


function printAtWordWrap( context , text, x, y, lineHeight, fitWidth)
{
    fitWidth = fitWidth || 0;
    
    if (fitWidth <= 0)
    {
        context.fillText( text, x, y );
        return;
    }
    var words = text.split(' ');
    var currentLine = 0;
    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) );
}_
_canvas{background-color:#ccc;}_
_<canvas id="c" width="150" height="150"></canvas>_

2番目と3番目の例では、 measureText() メソッドを使用しています。これは、ピクセル単位の長さ()を示しています )文字列が印刷されます。

56

たぶんこのパーティーに少し遅れて来たのかもしれませんが、キャンバスにテキストを完璧にラップするための次のチュートリアルを見つけました。

http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/

それから、複数の回線を機能させることができたと思いました(ラミレス、申し訳ありませんが、私にとってはうまくいきませんでした!)。テキストをキャンバスにラップする完全なコードは次のとおりです。

<script type="text/javascript">

     // http: //www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
     function wrapText(context, text, x, y, maxWidth, lineHeight) {
        var cars = text.split("\n");

        for (var ii = 0; ii < cars.length; ii++) {

            var line = "";
            var words = cars[ii].split(" ");

            for (var n = 0; n < words.length; n++) {
                var testLine = line + words[n] + " ";
                var metrics = context.measureText(testLine);
                var testWidth = metrics.width;

                if (testWidth > maxWidth) {
                    context.fillText(line, x, y);
                    line = words[n] + " ";
                    y += lineHeight;
                }
                else {
                    line = testLine;
                }
            }

            context.fillText(line, x, y);
            y += lineHeight;
        }
     }

     function DrawText() {

         var canvas = document.getElementById("c");
         var context = canvas.getContext("2d");

         context.clearRect(0, 0, 500, 600);

         var maxWidth = 400;
         var lineHeight = 60;
         var x = 20; // (canvas.width - maxWidth) / 2;
         var y = 58;


         var text = document.getElementById("text").value.toUpperCase();                

         context.fillStyle = "rgba(255, 0, 0, 1)";
         context.fillRect(0, 0, 600, 500);

         context.font = "51px 'LeagueGothicRegular'";
         context.fillStyle = "#333";

         wrapText(context, text, x, y, maxWidth, lineHeight);
     }

     $(document).ready(function () {

         $("#text").keyup(function () {
             DrawText();
         });

     });

    </script>

cはキャンバスのID、textはテキストボックスのIDです。

おわかりのように、標準ではないフォントを使用しています。キャンバスを操作する前にテキストでフォントを使用している限り、@ font-faceを使用できます。そうしないと、キャンバスはフォントを取得しません。

これが誰かを助けることを願っています。

38
Colin Wiseman

テキストを行に分割し、それぞれを個別に描画します。

function fillTextMultiLine(ctx, text, x, y) {
  var lineHeight = ctx.measureText("M").width * 1.2;
  var lines = text.split("\n");
  for (var i = 0; i < lines.length; ++i) {
    ctx.fillText(lines[i], x, y);
    y += lineHeight;
  }
}
25
Rok Strniša

ここで紹介した人気のwrapText()関数を変更する私のソリューションです。 JavaScriptのプロトタイピング機能を使用しているため、キャンバスコンテキストから関数を呼び出すことができます。

CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {

    var lines = text.split("\n");

    for (var i = 0; i < lines.length; i++) {

        var words = lines[i].split(' ');
        var line = '';

        for (var n = 0; n < words.length; n++) {
            var testLine = line + words[n] + ' ';
            var metrics = this.measureText(testLine);
            var testWidth = metrics.width;
            if (testWidth > maxWidth && n > 0) {
                this.fillText(line, x, y);
                line = words[n] + ' ';
                y += lineHeight;
            }
            else {
                line = testLine;
            }
        }

        this.fillText(line, x, y);
        y += lineHeight;
    }
}

基本的な使用法:

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "black";
ctx.font = "12px sans-serif";
ctx.textBaseline = "top";
ctx.wrapText("Hello\nWorld!",20,20,160,16);

ここに私がまとめたデモンストレーションがあります: http://jsfiddle.net/7RdbL/

17
Jake

CanvasRenderingContext2Dを拡張して、mlFillTextとmlStrokeTextの2つの関数を追加しました。

最後のバージョンは GitHub で見つけることができます:

この機能を使用すると、ボックス内にミルティリンテキストを入力/ストロークできます。テキストを垂直方向と水平方向に揃えることができます。 (アカウントの\ nを考慮し、テキストを正当化することもできます)。

プロトタイプは次のとおりです。

関数mlFillText(text、x、y、w、h、vAlign、hAlign、lineheight);関数mlStrokeText(text、x、y、w、h、vAlign、hAlign、lineheight);

VAlignは、「top」、「center」、または「button」です。hAlignは、「left」、「center」、「right」、または「justify」です。

ここでライブラリをテストできます: http://jsfiddle.net/4WRZj/1/

enter image description here

ライブラリのコードは次のとおりです。

// Library: mltext.js
// Desciption: Extends the CanvasRenderingContext2D that adds two functions: mlFillText and mlStrokeText.
//
// The prototypes are: 
//
// function mlFillText(text,x,y,w,h,vAlign,hAlign,lineheight);
// function mlStrokeText(text,x,y,w,h,vAlign,hAlign,lineheight);
// 
// Where vAlign can be: "top", "center" or "button"
// And hAlign can be: "left", "center", "right" or "justify"
// Author: Jordi Baylina. (baylina at uniclau.com)
// License: GPL
// Date: 2013-02-21

function mlFunction(text, x, y, w, h, hAlign, vAlign, lineheight, fn) {
    text = text.replace(/[\n]/g, " \n ");
    text = text.replace(/\r/g, "");
    var words = text.split(/[ ]+/);
    var sp = this.measureText(' ').width;
    var lines = [];
    var actualline = 0;
    var actualsize = 0;
    var wo;
    lines[actualline] = {};
    lines[actualline].Words = [];
    i = 0;
    while (i < words.length) {
        var Word = words[i];
        if (Word == "\n") {
            lines[actualline].EndParagraph = true;
            actualline++;
            actualsize = 0;
            lines[actualline] = {};
            lines[actualline].Words = [];
            i++;
        } else {
            wo = {};
            wo.l = this.measureText(Word).width;
            if (actualsize === 0) {
                while (wo.l > w) {
                    Word = Word.slice(0, Word.length - 1);
                    wo.l = this.measureText(Word).width;
                }
                if (Word === "") return; // I can't fill a single character
                wo.Word = Word;
                lines[actualline].Words.Push(wo);
                actualsize = wo.l;
                if (Word != words[i]) {
                    words[i] = words[i].slice(Word.length, words[i].length);
                } else {
                    i++;
                }
            } else {
                if (actualsize + sp + wo.l > w) {
                    lines[actualline].EndParagraph = false;
                    actualline++;
                    actualsize = 0;
                    lines[actualline] = {};
                    lines[actualline].Words = [];
                } else {
                    wo.Word = Word;
                    lines[actualline].Words.Push(wo);
                    actualsize += sp + wo.l;
                    i++;
                }
            }
        }
    }
    if (actualsize === 0) lines[actualline].pop();
    lines[actualline].EndParagraph = true;

    var totalH = lineheight * lines.length;
    while (totalH > h) {
        lines.pop();
        totalH = lineheight * lines.length;
    }

    var yy;
    if (vAlign == "bottom") {
        yy = y + h - totalH + lineheight;
    } else if (vAlign == "center") {
        yy = y + h / 2 - totalH / 2 + lineheight;
    } else {
        yy = y + lineheight;
    }

    var oldTextAlign = this.textAlign;
    this.textAlign = "left";

    for (var li in lines) {
        var totallen = 0;
        var xx, usp;
        for (wo in lines[li].Words) totallen += lines[li].Words[wo].l;
        if (hAlign == "center") {
            usp = sp;
            xx = x + w / 2 - (totallen + sp * (lines[li].Words.length - 1)) / 2;
        } else if ((hAlign == "justify") && (!lines[li].EndParagraph)) {
            xx = x;
            usp = (w - totallen) / (lines[li].Words.length - 1);
        } else if (hAlign == "right") {
            xx = x + w - (totallen + sp * (lines[li].Words.length - 1));
            usp = sp;
        } else { // left
            xx = x;
            usp = sp;
        }
        for (wo in lines[li].Words) {
            if (fn == "fillText") {
                this.fillText(lines[li].Words[wo].Word, xx, yy);
            } else if (fn == "strokeText") {
                this.strokeText(lines[li].Words[wo].Word, xx, yy);
            }
            xx += lines[li].Words[wo].l + usp;
        }
        yy += lineheight;
    }
    this.textAlign = oldTextAlign;
}

(function mlInit() {
    CanvasRenderingContext2D.prototype.mlFunction = mlFunction;

    CanvasRenderingContext2D.prototype.mlFillText = function (text, x, y, w, h, vAlign, hAlign, lineheight) {
        this.mlFunction(text, x, y, w, h, hAlign, vAlign, lineheight, "fillText");
    };

    CanvasRenderingContext2D.prototype.mlStrokeText = function (text, x, y, w, h, vAlign, hAlign, lineheight) {
        this.mlFunction(text, x, y, w, h, hAlign, vAlign, lineheight, "strokeText");
    };
})();

そして、これが使用例です:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var T = "This is a very long line line with a CR at the end.\n This is the second line.\nAnd this is the last line.";
var lh = 12;

ctx.lineWidth = 1;

ctx.mlFillText(T, 10, 10, 100, 100, 'top', 'left', lh);
ctx.strokeRect(10, 10, 100, 100);

ctx.mlFillText(T, 110, 10, 100, 100, 'top', 'center', lh);
ctx.strokeRect(110, 10, 100, 100);

ctx.mlFillText(T, 210, 10, 100, 100, 'top', 'right', lh);
ctx.strokeRect(210, 10, 100, 100);

ctx.mlFillText(T, 310, 10, 100, 100, 'top', 'justify', lh);
ctx.strokeRect(310, 10, 100, 100);

ctx.mlFillText(T, 10, 110, 100, 100, 'center', 'left', lh);
ctx.strokeRect(10, 110, 100, 100);

ctx.mlFillText(T, 110, 110, 100, 100, 'center', 'center', lh);
ctx.strokeRect(110, 110, 100, 100);

ctx.mlFillText(T, 210, 110, 100, 100, 'center', 'right', lh);
ctx.strokeRect(210, 110, 100, 100);

ctx.mlFillText(T, 310, 110, 100, 100, 'center', 'justify', lh);
ctx.strokeRect(310, 110, 100, 100);

ctx.mlFillText(T, 10, 210, 100, 100, 'bottom', 'left', lh);
ctx.strokeRect(10, 210, 100, 100);

ctx.mlFillText(T, 110, 210, 100, 100, 'bottom', 'center', lh);
ctx.strokeRect(110, 210, 100, 100);

ctx.mlFillText(T, 210, 210, 100, 100, 'bottom', 'right', lh);
ctx.strokeRect(210, 210, 100, 100);

ctx.mlFillText(T, 310, 210, 100, 100, 'bottom', 'justify', lh);
ctx.strokeRect(310, 210, 100, 100);

ctx.mlStrokeText("Yo can also use mlStrokeText!", 0 , 310 , 420, 30, 'center', 'center', lh);
9
jbaylina

JavaScriptを使用して、ソリューションを開発しました。それは美しくはありませんが、私にとってはうまくいきました:


function drawMultilineText(){

    // set context and formatting   
    var context = document.getElementById("canvas").getContext('2d');
    context.font = fontStyleStr;
    context.textAlign = "center";
    context.textBaseline = "top";
    context.fillStyle = "#000000";

    // prepare textarea value to be drawn as multiline text.
    var textval = document.getElementByID("textarea").value;
    var textvalArr = toMultiLine(textval);
    var linespacing = 25;
    var startX = 0;
    var startY = 0;

    // draw each line on canvas. 
    for(var i = 0; i < textvalArr.length; i++){
        context.fillText(textvalArr[i], x, y);
        y += linespacing;
    }
}

// Creates an array where the <br/> tag splits the values.
function toMultiLine(text){
   var textArr = new Array();
   text = text.replace(/\n\r?/g, '<br/>');
   textArr = text.split("<br/>");
   return textArr;
}

お役に立てば幸いです!

8
Ramirez

@ Gaby Petrioli が提供するワードラッピング(スペースで分割)のコードは非常に役立ちます。改行文字_\n_のサポートを提供するために、彼のコードを拡張しました。また、多くの場合、バウンディングボックスのサイズがあると便利なので、multiMeasureText()は幅と高さの両方を返します。

ここでコードを見ることができます: http://jsfiddle.net/jeffchan/WHgaY/76/

7
jeffchan

2行のテキストのみが必要な場合は、それらを2つの異なるfillText呼び出しに分割し、それぞれに異なるベースラインを与えることができます。

ctx.textBaseline="bottom";
ctx.fillText("First line", x-position, y-position);
ctx.textBaseline="top";
ctx.fillText("Second line", x-position, y-position);
5
thingEvery

以下は、ColinのwrapText()のバージョンで、垂直中央揃えテキスト with context.textBaseline = 'middle'

var wrapText = function (context, text, x, y, maxWidth, lineHeight) {
    var paragraphs = text.split("\n");
    var textLines = [];

    // Loop through paragraphs
    for (var p = 0; p < paragraphs.length; p++) {
        var line = "";
        var words = paragraphs[p].split(" ");
        // Loop through words
        for (var w = 0; w < words.length; w++) {
            var testLine = line + words[w] + " ";
            var metrics = context.measureText(testLine);
            var testWidth = metrics.width;
            // Make a line break if line is too long
            if (testWidth > maxWidth) {
                textLines.Push(line.trim());
                line = words[w] + " ";
            }
            else {
                line = testLine;
            }
        }
        textLines.Push(line.trim());
    }

    // Move text up if centered vertically
    if (context.textBaseline === 'middle')
        y = y - ((textLines.length-1) * lineHeight) / 2;

    // Render text on canvas
    for (var tl = 0; tl < textLines.length; tl++) {
        context.fillText(textLines[tl], x, y);
        y += lineHeight;
    }
};
4
Tom Söderlund

あなたはまだCSSに頼ることができると思います

ctx.measureText().height doesn’t exist.

幸いなことに、CSS hack-ardry(CSS測定を使用する古い実装を修正する他の方法については、「Typographic Metrics」を参照)を使用して、同じfont-propertiesでaのoffsetHeightを測定することでテキストの高さを見つけることができます:

var d = document.createElement(”span”);
d.font = “20px arial”
d.textContent = “Hello world!”
var emHeight = d.offsetHeight;

from: http://www.html5rocks.com/en/tutorials/canvas/texteffects/

3
MarioF

私もこれは不可能だとは思いませんが、これを回避するには<p>elementを作成し、JavaScriptで配置します。

2
Harmen

私は同じ問題を抱えているため、これに出くわしました。私は可変フォントサイズで作業しているので、これはそれを考慮しています:

var texts=($(this).find('.noteContent').html()).split("<br>");
for (var k in texts) {
    ctx.fillText(texts[k], left, (top+((parseInt(ctx.font)+2)*k)));
}

ここで、.noteContentはユーザーが編集したcontenteditable div(これはjQuery各関数にネストされています)、ctx.fontは「14px Arial」です(ピクセルサイズが最初に来ることに注意してください)

2
MaKR

Canvas要素は、改行 '\ n'、タブ '\ t'または<br />タグなどの文字をサポートしていません。

それを試してみてください:

var newrow = mheight + 30;
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "bold 24px 'Verdana'";
ctx.textAlign = "center";
ctx.fillText("Game Over", mwidth, mheight); //first line
ctx.fillText("play again", mwidth, newrow); //second line 

またはおそらく複数行:

var textArray = new Array('line2', 'line3', 'line4', 'line5');
var rows = 98;
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "bold 24px 'Verdana'";
ctx.textAlign = "center";
ctx.fillText("Game Over", mwidth, mheight); //first line

for(var i=0; i < textArray.length; ++i) {
rows += 30;
ctx.fillText(textArray[i], mwidth, rows); 
}  
0
Dariusz J

問題に対する私のES5ソリューション:

var wrap_text = (ctx, text, x, y, lineHeight, maxWidth, textAlign) => {
  if(!textAlign) textAlign = 'center'
  ctx.textAlign = textAlign
  var words = text.split(' ')
  var lines = []
  var sliceFrom = 0
  for(var i = 0; i < words.length; i++) {
    var chunk = words.slice(sliceFrom, i).join(' ')
    var last = i === words.length - 1
    var bigger = ctx.measureText(chunk).width > maxWidth
    if(bigger) {
      lines.Push(words.slice(sliceFrom, i).join(' '))
      sliceFrom = i
    }
    if(last) {
      lines.Push(words.slice(sliceFrom, words.length).join(' '))
      sliceFrom = i
    }
  }
  var offsetY = 0
  var offsetX = 0
  if(textAlign === 'center') offsetX = maxWidth / 2
  for(var i = 0; i < lines.length; i++) {
    ctx.fillText(lines[i], x + offsetX, y + offsetY)
    offsetY = offsetY + lineHeight
  }
}

この問題に関する詳細情報は 私のブログで です。

0
Oleg Berman

この正確な使用のために、単純なnpmモジュールを作成しました。 https://www.npmjs.com/package/canvas-txt

テキストは自動的に複数行に分割でき、\n

0
Geon George