Question

我正在尝试用功能替换文本，而不清除所有绘制的文本。现在我可以替换一个函数，但只能清除整个画布。我希望它有点动态，以便保留第三个函数（例如）。

这是我到目前为止所得到的;请注意原始文本是如何清除的：

canvas {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-top: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<button onclick="textOne()">One</button>
<button onclick="textTwo()">Two</button>
<canvas id="c"></canvas>

{{1}}

提前致谢！

Answer 1

您只需在画布中添加一个空文本并在相应的函数内更新它。然后在更新后执行canvas.renderAll。仅供参考，我对fabric.js有ZERO经验。

＆＃13;

var $ = function(id) {
   return document.getElementById(id)
 };

 var canvas = this.__canvas = new fabric.Canvas('c');
 canvas.setHeight(300);
 canvas.setWidth(500);
 
 var dynamicText = new fabric.IText('', {
   left: 50,
   top: 100,
   fontFamily: 'arial',
   fill: '#333',
   fontSize: 50
 })
 
 canvas.add(dynamicText);
 
 function textOne() {
   dynamicText.setText('ONE');
   canvas.renderAll();
 }
 
 // Text that should stay
canvas.add(new fabric.IText('This Should Stay The Same\nEdited Or Not', {
  left: 300,
  top: 45,
  fontFamily: 'Monsieur La Doulaise',
  fontSize: 27,
  hasBorders: false,
  hasControls: false,
  selectable: true,
  lockRotation: true,
  lockMovementX: true,
  lockMovementY: true,
  align: 'mid',
  originX: 'center',
  originY: 'center',
  centeredScaling: true,
}));

 function textTwo() {
   dynamicText.setText('TWO');
   canvas.renderAll();
 }

＆＃13;

canvas {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-top: 5px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<button onclick="textOne()">One</button>
<button onclick="textTwo()">Two</button>
<canvas id="c"></canvas>

＆＃13;

在不清除整个画布的情况下更换功能？

1 个答案: