Kategorien
HTML5 JavaScript Web Frontend WebGL

HTML5 Canvas Text auf Canvas schreiben richtiger Zeilenumbruch

Wenn man einen bestimmten Text auf einen Canvas schreiben will und dafür bestimmen will, wann ein Text umgebrochen werden muss, kann man die folgende Funktion benutzen, die aus einem Text in Array macht in Abhängigkeit des Canvas.

Bsp:

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
//vorher muss Schriftgröße des Canvas gesetzt werden
context.font = "30px arial";
textArr  = textToArray ("Wordpress eigene Farben und CSS Klassen in den Editor einbauen", 300, context);
//textArr enhält ["Wordpress Plugin"] und ["selber erstellen Tutorial"]
textToArray = function(text, maxWidth, context){
    var textArr = new Array();
    var fragment = "";
    var lastCutPostion = 0;
    var lastPossibleCutPosition = 0;
    var charCounter = 0;
    var position = 0;
    $j.each(text, function(index, char) {
        if(char == " " && charCounter != 0)
        {
            fragment  = text.substring (lastCutPostion, position);
            //console.log(fragment);
            textWidth = context.measureText(fragment).width;
            //console.log(textWidth);
            if(textWidth > maxWidth)
            {
                //console.log("max width reched");
                fragment  = text.substring (lastCutPostion, lastPossibleCutPosition);
                //console.log(fragment);
                textArr.push(fragment);
                charCounter = -1 + (position - lastPossibleCutPosition);
                lastCutPostion = lastPossibleCutPosition + 1;
            }
            lastPossibleCutPosition = position;
        }
        position++;
        charCounter++;
    });
    //do not forget the last Word
    if(charCounter > 0)
    {
        fragment  = text.substring(lastCutPostion, text.length);
        textWidth = context.measureText(fragment).width;
        //console.log(textWidth);
        if(textWidth > maxWidth)
        {
            fragment  = text.substring (lastCutPostion, lastPossibleCutPosition);
            lastCutPostion = lastPossibleCutPosition + 1;
            textArr.push(fragment);
            fragment  = text.substring(lastCutPostion, text.length);
        }
        textArr.push(fragment);
    }
    return textArr;
}