有没有办法固定Fabric.js中TextBox的宽度和高度，并防止它们随着里面的文本而改变

Question

我在 Fabric.js 中设置了 TextBox 的宽度和高度，但是 我设置的高度值不起作用。我不知道为什么。有没有办法实现具有固定宽度和高度的 TextBox 并防止它们随其中的文本而变化？感谢您的帮助！！！

var canvas = (this.__canvas = new fabric.Canvas("c"));
canvas.uniformScaling = false;

var textBox = new fabric.Textbox("Freedom", {
  left: 100,
  top: 100,
  width: 300,
  height: 200,
  fontSize: 20,
  fontWeight: "bold",
  fontStyle: "italic",
  textAlign: "left",
  editable: false,
  hasControls: true,
  editingBorderColor: "red",
  fill: "red",
  objectCaching: false,
  lockScalingFlip: false,
  borderColor: "black",
  lockScalingY: false,
  editable: true
});

textBox.setControlVisible("mtr", false);
canvas.add(textBox);
canvas.setActiveObject(textBox);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<canvas id="c" width="600" height="400" style="border:1px solid #ccc"></canvas>

Answer 1

您可以通过

canvas.requestRenderAll()

或

canvas.renderAll()

方法解决。

我认为这是一个问题，因为内部已经按照需要更改了值，但实际上并未反映在渲染中。

这里，

canvas.requestRenderAll()

或

canvas.renderAll()

方法之间存在细微差别，但我们不期望解决问题时有任何差异。

您可以按照以下示例解决您的问题。

// ... your codes ...
textBox.setControlVisible("mtr", false);
canvas.add(textBox);
canvas.setActiveObject(textBox);
canvas.requestRenderAll()

我希望这可以帮助您解决您的问题。谢谢你。