can I linebreak in paper.js library

Question

I'm trying to understand if there is a way to break a line ( \n ) in the paper.js textItem: http://paperjs.org/reference/textitem

maybe there's a way to box it in somehow? I need it to breakline at the edges of a square.

Hi

Answer 1

This code line breaks and word wraps as best as I can figure out right now:

paper.PointText.prototype.wordwrap=function(txt,max){
    var lines=[];
    var space=-1;
    times=0;
    function cut(){
        for(var i=0;i<txt.length;i++){
            (txt[i]==' ')&&(space=i);
            if(i>=max){
                (space==-1||txt[i]==' ')&&(space=i);
                if(space>0){lines.push(txt.slice((txt[0]==' '?1:0),space));}
                txt=txt.slice(txt[0]==' '?(space+1):space);
                space=-1;
                break;
                }}check();}
    function check(){if(txt.length<=max){lines.push(txt[0]==' '?txt.slice(1):txt);txt='';}else if(txt.length){cut();}return;}
    check();
    return this.content=lines.join('\n');
    }



var pointTextLocation = new paper.Point(20,20);
var myText = new paper.PointText(pointTextLocation);
myText.fillColor = 'purple';
myText.wordwrap("As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as practice sentence Early. examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson 1888 (3),[How] to Become Expert in Typewriting A: Complete Instructor Designed Especially for the Remington Typewriter 1890 (4),[and] Typewriting Instructor and Stenographer s'Hand book-1892 (By). the turn of the 20th century the, phrase had become widely known In. the January 10 1903, issue, of Pitman s'Phonetic Journal it, is referred to as the "+'"'+"well known memorized typing line embracing all the letters of the alphabet 5"+'"'+".[Robert] Baden Powell-s'book Scouting for Boys 1908 (uses) the phrase as a practice sentence for signaling", 60);

I am trying to improve this, but, it works for pointText. I can't yet see how to make a paper.textItem (can't be much different)

Blockbusting

This should be the accepted answer. You saved me hours :) – Midrib

Just want to note that new versions of paper.js do support line breaks with \n, but no word-wrapping as Ben's solution does. There are a couple PR's open (#1005 and #1108) that implement the AreaText feature... just waiting for them to be included in an official release. – Aviate

Answer 2

\n works pretty well for next line in he Current PaperJs Version.

var text = new PointText(new Point(200, 50));
text.justification = 'center';
text.fillColor = 'black';
text.content = 'The contents \n of the point text';

Produces the following Output.

Burford

Answer 3

No, paper.js cannot currently break lines. It is not a layout manager...at least not a full-functioned layout manager. There is a comment in the TextItem reference that an AreaText is "coming soon" that would do what you want.

For now, you have to split the string yourself, create multiple PointText to hold the pieces of the string, and stack those texts.

Falchion

Answer 4

I just find this solution from Alain D'EURVEILHER, I've just adapted for paper.js

    paper.PointText.prototype.wordwrap = function(txt, max_char){

        var sum_length_of_words = function(word_array){
            var out = 0;
            if (word_array.length!=0){
                for (var i=0; i<word_array.length; i++){
                    var word = word_array[i];
                    out = out + word.length;
                }
            };
            return out;
        };

        var chunkString = function (str, length){
            return str.match(new RegExp('.{1,' + length + '}', 'g'));
        };

        var splitLongWord = function (word, maxChar){
            var out = [];
            if( maxChar >= 1){
                var wordArray = chunkString(word, maxChar-1);// just one under maxChar in order to add the innerword separator '-'
                if(wordArray.length >= 1){
                    // Add every piece of word but the last, concatenated with '-' at the end
                    for(var i=0; i<(wordArray.length-1); i++){
                        var piece = wordArray[i] + "-";
                        out.push(piece);
                    }
                    // finally, add the last piece
                    out.push(wordArray[wordArray.length-1]);
                }
            }
            // If nothing done, just use the same word
            if(out.length == 0) {
                out.push(word);
            }
            return out;
        }

        var split_out = [[]];
        var split_string = txt.split(' ');
        for(var i=0; i<split_string.length; i++){
            var word = split_string[i];

            // If the word itself exceed the max length, split it,
            if(word.length > max_char){
                var wordPieces = splitLongWord(word, max_char);
                for(var i=0;i<wordPieces.length;i++){
                    var wordPiece = wordPieces[i];
                    split_out = split_out.concat([[]]);
                    split_out[split_out.length-1] = split_out[split_out.length-1].concat(wordPiece);
                }

            } else {
                // otherwise add it if possible
                if ((sum_length_of_words(split_out[split_out.length-1]) + word.length) > max_char){
                  split_out = split_out.concat([[]]);
                }

                split_out[split_out.length-1] = split_out[split_out.length-1].concat(word);
            }
        }

        for (var i=0; i<split_out.length; i++){
            split_out[i] = split_out[i].join(" ");
        }

        return this.content=split_out.join('\n');
    };

Example of use : wordwrap for paper.js example

Halation