摆脱 Fabric.js 中的旋转控制答案

【问题标题】：Getting rid of rotation control in Fabric.js摆脱 Fabric.js 中的旋转控制
【发布时间】：2022-02-16 20:22:05
【问题描述】：

In this 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'
});

【问题讨论】：

标签： fabricjs

【解决方案1】：

使用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>

【讨论】：

【解决方案2】：

接受的答案对于 4.0 起的 Fabricjs 版本不再有效（请参阅 changelog）。 hasRotatingPoint 已被删除，取而代之的是更全面的控件 api，尽管它的 documentation 仍然非常苗条。

要对特定对象隐藏某个控件，您必须重新定义其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 集。

【讨论】：

或text.setControlsVisibility({ mtr: false }) 为fabric@4.5.0。
上面的评论是当前 Fabricjs 的有效答案

【解决方案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()

【讨论】：