Paper.js: Typography for Richtext/AreaText

[kaelumania]

I found AreaText in the docs and found Typography on the roadmap. Are there any updates regarding these features? I need to draw multiline richtext on a canvas.

[lehni]

No updates here right now unfortunately...

[kaelumania]

Allright, let me know if I can help out with these features. If you have a solution in mind and looking for someone to implement it.

[simonrobb]

Same goes - I'll be needing it within the next week or so, so I'll have a crack at developing it myself. I imagine there's good reason it hasn't been implemented already, but I'll see how I go.

[kaelumania]

@simonrobb see if https://github.com/paperjs/paper.js/issues/743 works out for you. Otherwise, I implemented minimal richtext (lines/words) rendering with paperjs:

var textItem = renderText('Hello World!\nIts a good day', new Point(200, 300)) 
textItem.rotate(Math.random() * 360)

function renderText(text, point) {
    var group = new Group(),
        lines = text.split(/\r\n|\n|\r/mg)
    for(var i=0; i < lines.length; i++) {
        lineItem = renderLine(lines[i], point)
        group.addChild(lineItem)
        point = new Point(point.x, point.y + lineItem.bounds.height)
    }
    return group
}

function renderLine(line, point) {
    var group = new Group(),
        words = line.split(/ /mg)
    for(var i=0; i < words.length; i++) {
        wordItem = renderWord(words[i] + ' ', point)
        group.addChild(wordItem)
        point = new Point(point.x + wordItem.bounds.width, point.y)
    }
    return group
}

function renderWord(word, point) {
    var lightness = (Math.random() - 0.5) * 0.4 + 0.4,
        hue = Math.random() * 360,
        textItem = new PointText(point)
        textItem.fillColor = { hue: hue, saturation: 1, lightness: lightness }
        textItem.strokeColor = textItem.fillColor
        textItem.fontSize = 25
        textItem.content = word
    return textItem 
}

[simonrobb]

@kaelumania great work. I'll take a look through it and let you know how it goes.

[simonrobb]

I've taken a look at this today (it only took six months) and put together a basic AreaText implementation. See #1005.