javascript - 替换fabricjs Canvas 上的函数(文本)？

Question

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

 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>

Answer 1

您可以在给定的 canvas 元素上调用 clear 方法，以便给定的 canvas 上下文可以清除 中的内容>当前文本绘图

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

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