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()
} 

}
}`