在我以前的项目中,我使用的是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.
最后,我能够找到一个可以将文本对象转换为弯曲文本的库。 demo
Though currently, this library has one issue i.e. when you reduce scale too much than object will disappear