如何在fabric 2.7.0中使用fabric.curvedText

问题描述 投票:1回答:1

在我以前的项目中,我使用的是Fabric版本1.7.9。现在,我正在使用最新版本的Fabric升级我的项目。 2.7.0。我的问题是在我的上一个项目中,我已经包含了fabric.curvedText.js文件,并且工作正常。我尝试在当前版本中使用相同的库(因为找不到针对织物的特定版本的任何其他库),它在委托属性对象中表示未定义的未定义属性“ backgroundColor”。谁能帮我这个忙

我在两件事上遇到错误:1.委托属性和2. createAccessors。所以我尝试从以前的结构库文件中添加这两件事。它成功添加了弯曲的文本,但是当我尝试选择它时,行为非常奇怪,文本和处理程序位于不同的位置。

以下代码我在fabric 2.7.0文件中添加:

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

和fabric.util中的createAccessors函数=

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);
        }
      }
    },

这是我添加织物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.
fabricjs
1个回答
0
投票

最后,我能够找到一个可以将文本对象转换为弯曲文本的库。 demo

Though currently, this library has one issue i.e. when you reduce scale too much than object will disappear 
© www.soinside.com 2019 - 2024. All rights reserved.