使用Fabric js倾斜右/左画布文本对象

Question

如何使用Fabric js使画布文本对象向右倾斜并向左倾斜？屏幕截图。

For slant right

And for slant left

任何帮助都非常赞赏。

Answer 1

根据您使用的fabric js版本，您可能会开箱即用：（1.6.0-rc +）

＆＃13;

＆＃13;

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

var textLeft = new fabric.Text('13-arid-365',{
    left:100,
    top: 25,
    skewX: 45    
});
canvas.add(textLeft);

var textRight = new fabric.Text('13-arid-365',{
    left: 100,
    top: 75,
    skewX: -45    
});
canvas.add(textRight);

＆＃13;

<script src='http://www.deltalink.it/andreab/fabric/fabric.js'></script>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

＆＃13;

＆＃13;

transformMatrix和skew功能之间的区别在于更好地支持偏斜并允许您拥有一个相干的边界框，而变换矩阵则没有。