摆脱 Fabric.js 中的旋转控制

Question

在此 jsfiddle 中，我使用

lockRotation: true

创建了 Fabric.js 文本以避免旋转。线条消失了，但是旋转的框控件还在，怎么去掉呢？

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 版本不再有效（请参阅changelog）。

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>

在这里，我们使用文本的默认控件创建一个新的控件对象，但重新定义

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>

Answer 3

使用

setControlsVisibility

，它适用于fabricjs的所有对象类型

fabric.Image.fromURL(src, (img) => {
      var oImg = img.set({
        left: 0,
        top: 0,
      })
      oImg.setControlsVisibility({ mtr: false })
      canvas.add(oImg)
      canvas.setActiveObject(oImg)
      canvas.renderAll()

    }



let newtext = new fabric.Textbox(text, {
      left: 0,
      top: 0,
      originX: 'center',
      originY: 'center',
      fontFamily: 'Inter',
      fill: '#fff',
      textAlign: 'center',}
      )
      newtext.setControlsVisibility({ mtr: false })
      canvas.add(newtext)
      canvas.setActiveObject(newtext)
      canvas.renderAll()

Answer 4

有时禁用对象旋转还不够。人们仍然可以选择多个对象，并且旋转控制点会再次显示。您可能还想禁用组轮换

fabric.Group.prototype._controlsVisibility = {
    tl: true,
    tr: true,
    br: true,
    bl: true,
    ml: false,
    mt: false,
    mr: false,
    mb: false,
    mtr: false
};