in my previous project i was using fabric version 1.7.9. Now i am upgrading my project with latest version of fabric ie. 2.7.0. my problem is in my prev project i have included fabric.curvedText.js file and was working fine. i tried using same library in my current version(as i couldn't found any other library for fabric's specific version), it says undefined property "backgroundColor" of undefined in delegatedProperties object. can anyone help me out with this

i was getting error for two things: 1. delegatedProperties and 2. createAccessors. so i tried adding those two things from my previous fabric library file. It adds curved text successfully but when i try to select it the behaviour is very weird, text and handlers are at different positions.

following code i have added in fabric 2.7.0 file:

delegatedProperties: {
      fill:             true,
      stroke:           true,
      strokeWidth:      true,
      fontFamily:       true,
      fontWeight:       true,
      fontSize:         true,
      fontStyle:        true,
      lineHeight:       true,
      textDecoration:   true,
      textAlign:        true,
      backgroundColor:  true
    },

and createAccessors function in fabric.util =

createAccessors: function(klass) {
      var proto = klass.prototype, i, propName,
          capitalizedPropName, setterName, getterName;

      for (i = proto.stateProperties.length; i--; ) {

        propName = proto.stateProperties[i];
        capitalizedPropName = propName.charAt(0).toUpperCase() + propName.slice(1);
        setterName = 'set' + capitalizedPropName;
        getterName = 'get' + capitalizedPropName;

        // using `new Function` for better introspection
        if (!proto[getterName]) {
          proto[getterName] = (function(property) {
            return new Function('return this.get("' + property + '")');
          })(propName);
        }
        if (!proto[setterName]) {
          proto[setterName] = (function(property) {
            return new Function('value', 'return this.set("' + property + '", value)');
          })(propName);
        }
      }
    },

and here is how i am adding fabric curvedText:

let curvedTextObj = new fabric.CurvedText("Hello World", {
      left: 100,
      top: 100,
      textAlign: 'center',
      radius: 150,
      fontSize: 20,
      spacing: 20
    };
this.canvas.add(curvedTextObj);
this.canvas.renderAll();


at first Hello World is addedd successfully with proper position in canvas. but as soon as i select the same handlers and text object is displayed at opposite/different positions in canvas. can anyone please help me out with this problem.

0 Answers