Multiline text about jcanvas HOT 5 CLOSED

In short, it is possible, but there are a number of implementation choices which need to be considered.

I've experimented with line break support in the past, but because of the way jCanvas centers everything (shapes, images, text, etc.), calculating that center point (since its all one text object) will require some thought. Additionally, the question of line spacing also needs to be addressed.

I might consider adding it in the future, but I'd need to solve these problems first.
-Caleb

On Sep 11, 2012, at 8:15 PM, Nathan Breit wrote:

I noticed if I try to render text with a line break in it, the line break just appears as a space, and everything remains on a single line. I suppose it wouldn't be too difficult for me to write some code that splits my text on \n and renders it in pieces, but it would be convenient to have that ability built into jCanvas.

—
Reply to this email directly or view it on GitHub.

from jcanvas.

Here's some hastily written code I'm using for this:

function drawMultilineText($canvas, properties){
    var strings = properties.text.split('\n');
    var currentY = properties.y;
    properties = $.extend({
        method: "drawText",
        lineSpacing: 0
    }, properties);
    $.each(strings, function(idx, string) {
        var lineProperties = $.extend(Object.create(properties), {
            text: string,
            y: currentY
        });
        var measurements = $canvas.measureText(lineProperties);
        $canvas.addLayer(lineProperties);
        currentY += properties.lineSpacing + measurements.height;
    });
}

It doesn't handle cases where y isn't the top of the text.

from jcanvas.

Yes, which is why I need to think this through so I can create an
implementation which would work in all cases.

When I have time, I will try to conjure up an implementation for you. ;)

-Caleb

On Mon, Sep 17, 2012 at 12:29 AM, Nathan Breit [email protected]:

Here's some hastily written code I'm using for this:

function drawMultilineText($canvas, properties){
var strings = properties.text.split('\n');
var currentY = properties.y;
properties = $.extend({
method: "drawText",
lineSpacing: 0
}, properties);
$.each(strings, function(idx, string) {
var lineProperties = $.extend(Object.create(properties), {
text: string,
y: currentY
});
var measurements = $canvas.measureText(lineProperties);
$canvas.addLayer(lineProperties);
currentY += properties.lineSpacing + measurements.height;
});}

It doesn't handle cases where y isn't the top of the text.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/31#issuecomment-8606175.

from jcanvas.

Okay, I recently added the multi-line support you asked for, as well as text wrapping and a new lineHeight property. Enjoy.
-Caleb

from jcanvas.

Awesome! Thanks!

from jcanvas.