Text rendered on multiline using same path merges all the lines on one path.

[Shashank-Bhatt1]

CheckList

• [X] I agree to follow this project's Code of Conduct
• [X] I have read and followed the Contributing Guide
• [X] I have searched and referenced existing issues, feature requests and discussions
• [X] I am filing a FEATURE request.

Description

Hi, I am using path for my text object to apply curvature for it and it works very nicely. However i need to use same path for when text is spanned across multiline.

when i do that, path is no longer working correctly and all of the lines following the path are combined as one line and overlapped.

Here is the snapshot how it comes.

It follows the correct path but the only problem is that it does not do that on individual line. If i remove path then it looks like this

I have checked fewer native code (_measureLine function) but i am not able to figure out how the things work here so any help would be much appreciated.

Current State

One partial solution is to add individual text object from each line and then apply path for all of them Something like

const textLines = text.split('\n');
const textObjects = textLines.map(textLine => new fabric.Text(textLine))

textObjects.forEach((textObject,index) => {
    textObject.set('top', index * textObject.__lineHeights[0])
})

const textLinesGroup = new fabric.Group(textObjects);
textLinesGroup.name = 'label';
canvas.add(textLinesGroup);

but this also means that one has to apply all the other props to individual objects as well which i can't now as i already have taken text object everywhere in my project.

Additional Context

No response

[Shashank-Bhatt1]

Hello, I need solution for this quickly if possible so can anyone please help on this thing?

[asturur]

What you want to do here is complex. You should concatenate your path with a vertical offset and replicate the path on multi line. Text on a path and text wrapping do not work currently.

[Shashank-Bhatt1]

@asturur Noted. Thanks for the update.