替换fabricjs画布上的功能（文本）？答案

【问题标题】：Replacing functions (text) on fabricjs canvas?替换fabricjs画布上的功能（文本）？
【发布时间】：2018-04-10 06:45:12
【问题描述】：

我有两个函数，每个函数都绘制文本，但我希望单击哪个函数来替换当前绘制的函数（这样一次只绘制一个）。我怎么能做到这一点？提前致谢。

 var $ = function(id) {
   return document.getElementById(id)
 };

 var canvas = this.__canvas = new fabric.Canvas('c');
 canvas.setHeight(300);
 canvas.setWidth(500);
 
 function textOne() {
   canvas.add(new fabric.IText('One', {
     left: 50,
     top: 100,
     fontFamily: 'arial',
     fill: '#333',
     fontSize: 50
   }));
 }

 function textTwo() {
   canvas.add(new fabric.IText('Two', {
     left: 200,
     top: 100,
     fontFamily: 'arial black',
     fill: '#333',
     fontSize: 50
   }));
 }

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>

【问题讨论】：

您的问题现在解决了吗？
不，我还没有

标签： javascript jquery canvas fabricjs

【解决方案1】：

您可以在给定的canvas 元素上调用clear 方法，以便给定的canvas 上下文可以清除current text drawings 中的内容

JS代码：

 var $ = function(id) {
     return document.getElementById(id)
 };

 var canvas = this.__canvas = new fabric.Canvas('c');
 canvas.setHeight(300);
 canvas.setWidth(500);

 function textOne() {
     canvas.clear(); // Clear the given canvas
     canvas.add(new fabric.IText('One', {
         left: 50,
         top: 100,
         fontFamily: 'arial',
         fill: '#333',
         fontSize: 50
     }));
 }

 function textTwo() {
     canvas.clear(); // Clear the given canvas
     canvas.add(new fabric.IText('Two', {
         left: 200,
         top: 100,
         fontFamily: 'arial black',
         fill: '#333',
         fontSize: 50
     }));
 }

这是给定示例的 JS Fiddle：http://jsfiddle.net/7me0eat3

希望这对您的情况有所帮助。

【讨论】：

谢谢，这很有帮助！如果我希望其他一些功能保持不变，例如其他文本，我将如何让它保持不变？ Here's a JSFiddle with a third function。如果您愿意，我也可以创建一个新问题。再次感谢！
您想让given text drawing 保持在同一个canvas 元素上吗？
是的，这可能吗？
这是另一种情况。我建议为此创建一个新问题。有些人也可能会在这种情况下提供帮助
好的，我会的：）

【解决方案2】：

var canvas = new fabric.Canvas('c');
canvas.setHeight(300);
canvas.setWidth(500);
var text = new fabric.IText('One', {
   left: 50,
   top: 100,
   fontFamily: 'arial',
   fill: '#333',
   fontSize: 50
 });
canvas.add(text);
function replaceText(val) {
 text.setText(val);
 canvas.renderAll();
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>
<button onclick="replaceText('One')">One</button>
<button onclick="replaceText('Two')">Two</button>
<canvas id="c"></canvas>

您可以使用 text 属性将文本设置为文本对象或使用setText()。

【讨论】：