How to Implement Curved Text in Latest Fabric.js Version (6.3.0) Without createClass?

[niketaOptimumnbrew]

Hello,

I have been using the curved text feature by creating a custom class, but with the latest Fabric.js version, createClass is deprecated.

I was following the approach mentioned in this example: Curved Text Example.

Could someone please guide me on how to implement curved text with the latest version of Fabric.js without using createClass? Any assistance would be greatly appreciated.

Thank you!

[asturur]

Niketa you have to extend the class.
Something like:

class CurvedText extends Text {
  customFunction() {
    ...code...
  }
}

it can extends Text or Itext or Textbox depending on your example what you have just follow along.
This is just plain javascript, is not something that is fabricJS specific

[niketaOptimumnbrew]

Thank you @asturur.
extend with text , itext and object working but when I extends the textbox object and call super method inside constructor then it' snot working.

Do you have any idea about textbox class extends?

code:

export class ListTextbox extends fabric.Textbox {
 constructor(text, options, listStyle) {
        super(text, options);
    }
}

[pramod-praella]

@niketaOptimumnbrew and @asturur

I am also facing the same issue. this plain javascript converts text to curved text but removes the existing properties of existing text.
@asturur if you know please guide us with the latest fabric demo example if you have.
Thanks in advance

[niketaOptimumnbrew]

@pramod-praella
you have to add all existing object property which are not available in curved-text into the toObject().
like this:
toObject(propertiesToInclude) { return super.toObject([ "text", "diameter", "kerning", "flipped", "fill", "fontFamily", "fontSize", "fontWeight", "fontStyle", "strokeStyle", "strokeWidth", "textAlign" ].concat(propertiesToInclude));

Try this , if it resolve your issue.

[pramod-praella]

@niketaOptimumnbrew
Thanks for the reply I added the same but still something is missing as the object does not work like it works with other properties like shadow and size.

i tried like below please check if anything I missed

`const arcTextToggle = () => {
const obj = canvas.value.getActiveObject()
console.log('Get Active Object while ArcTextToggle: ', obj)
arcText.value = !arcText.value
if (arcText.value) {
if (obj && obj.type === 'textbox') {
//console.log(obj)

  const curvedText = new fabric.TextCurved(obj.text, {
    diameter: radius.value,
    fontSize: obj.fontSize,
    fontFamily: obj.fontFamily,
    kerning: kerning.value,
    flipped: flipped.value,
    left: obj.left,
    top: obj.top,
    scaleX: obj.scaleX,
    scaleY: obj.scaleY,
    arcText: true,
    id: obj.id
  })
  console.log('curvedText: ', curvedText)
  obj.set(curvedText)
  //canvas.value.remove(obj)
  //canvas.value.add(curvedText)
  canvas.value.renderAll()
} 

}
}`

[Akbar1909]

any updates

[asturur]

Implementing curved text boils down to use text on a path and understing how to make a curve with a path, that are 2 things that do not come out of the box from the library. There aren't 'updates' here unless someone wants to make a full post on its own implementation.

[gitgitwhat]

I created a curved text library and integrated into the latest version (6.5.3) but there were a few things I had to do that feel hackish to make aspects work. As a general suggestion, it'd be nice if a plugin framework was added to fabric to easily extend its capabilities.

[asturur]

Is not easy. Many of the changes i do are toward that idea. The controls api is one.

[snapied]

We are using path-warp.js, its a very popular library
path-warp.ts
Sharing to help others.
We're using this fabricjs 4: Curved Text Generator: Add curved text to designs

[asturur]

this path-warp has a website or a repo?