摆脱 Fabric.js 中的旋转控制

Question

在这个 jsfiddle 中，我创建了一个 Fabric.js 文本lockRotation: true以避免旋转。线不见了，但是要旋转的框控件还在，怎么去掉？

HTML

<canvas id="c" width="300" height="300"></canvas>

Javascript

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

var text = new fabric.IText('This is the text',{
    left: 50,
    top: 50,
    fontFamily: 'Arial',
    fontWeight: 'normal',
    fontSize: 18,
    lockRotation: true,
    stroke: 'black',
    fill: 'black'
});

Answer 1

接受的答案对于 Fabricjs 4.0 版本不再有效（请参阅更改日志）。hasRotatingPoint已被删除，以支持更全面的控件 API，尽管它的文档仍然非常少。

要对特定对象隐藏某个控件，您必须重新定义其controls属性。以下是隐藏控件mtr（旋转）的方法：

text.controls = {
    ...fabric.Text.prototype.controls,
    mtr: new fabric.Control({ visible: false })
}

var canvas = new fabric.Canvas('c');
var text = new fabric.IText('This is the text',{
    left: 50,
    top: 50,
    fontFamily: 'Arial',
    fontWeight: 'normal',
    fontSize: 18,
    stroke: 'black',
    fill: 'black'
});
text.controls = {
    ...fabric.Text.prototype.controls,
    mtr: new fabric.Control({ visible: false })
}

canvas.add(text);

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>

在这里，我们使用 Text 的默认控件创建一个新的控件对象，但重新定义该mtr集合。

Answer 2

使用object.hasRotatingPoint = false; 隐藏旋转点。

var canvas = new fabric.Canvas('c');
var text = new fabric.IText('This is the text',{
    left: 50,
    top: 50,
    fontFamily: 'Arial',
    fontWeight: 'normal',
    fontSize: 18,
    hasRotatingPoint: false,
    stroke: 'black',
    fill: 'black'
});

canvas.add(text);

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>