Fabric.js文本转换不起作用

时间:2013-12-14 03:18:21

标签: javascript canvas transform fabricjs

我无法将transformMatrix应用于Fabric中的Text对象。

问题在这里说明: http://jsfiddle.net/d8Tkj/1/

var canvas = new fabric.Canvas('c');

canvas.add(new fabric.Text('Transform does not work', {
    fontSize:20,
    left:0,
    top:0,
    'transformMatrix': [1,0,0,1,0,200] // should translate by 200px down. But this does not work
}));


canvas.add(new fabric.Text('But this works', {
    fontSize:20,
    left:0,
    top:200
}));

// transform works on other objects:
canvas.add(new fabric.Rect({
    left:0,
    top:0,
    width:50,
    height:50,
    fill:'red',
    'transformMatrix': [1,0,0,1,100,100]
}));

还有其他人看过这个问题吗?我知道我可以通过改变位置进行翻译,但我需要能够为我的应用程序使用变换矩阵。

3 个答案:

答案 0 :(得分:0)

transformMatrix for text在最新版本的fabric.js即可正常工作。 1.4.1 https://github.com/kangax/fabric.js/blob/master/CHANGELOG.md

检查以上链接。

答案 1 :(得分:0)

canvas.add(new fabric.Rect({
    left:100,
    top:100,
    width:50,
    height:50,
    fill:'red',
    'transformMatrix': [1,0,0,1,0,0]
}));

尝试给出顶部和左侧而不是在变换矩阵中给出它

答案 2 :(得分:0)

如果你想旋转项目,你可以简单地使用

const text = new fabric.Text('Text label', { angle: 90 })
OR
text.angle = 90;