Fabric js - 不要在画布上添加两个以上的文本区域

Question

在我的 Fabric js 4.3.1 项目中，我试图设置向画布添加文本的限制。我的目标是限制添加 2 个文本，每个文本区域一个。

这是我现在的代码，但它不能很好地工作，因为每次我在 textarea 中写入时，都会将一个文本添加到另一个之上，没有限制......

var canvas = this.__canvas = new fabric.Canvas('canvas');

$(function() {
            
            canvas.setHeight('300');
      canvas.setWidth('800');
      canvas.renderAll();
      
      fabric.Object.prototype.transparentCorners = false;
            fabric.Object.prototype.padding = 5;
            
            
            
            var textOptions = { 
              fontSize:16, 
              left:20,
              top:20, 
              radius:10, 
              borderRadius: '25px', 
              hasRotatingPoint: true 
            };
      
      var textOptions2 = { 
              fontSize:16, 
              left:20,
              top:50, 
              radius:10, 
              borderRadius: '25px', 
              hasRotatingPoint: true 
            };


            //TEXT 1
            $( "#AddTextCust" ).keyup(function() {
            var textObject = new fabric.IText($("#AddTextCust").val(), textOptions);
            if($.trim($(this).val()).length > 0){
            canvas.add(textObject);
            canvas.renderAll();
      }
            });

            document.getElementById('AddTextCust').addEventListener('keyup', function () {
              canvas.getActiveObject().text = document.getElementById('AddTextCust').value;
              canvas.renderAll();
            });
      
      
      //TEXT 2
      $( "#AddTextCust2" ).keyup(function() {
            var textObject = new fabric.IText($("#AddTextCust2").val(), textOptions2);
            if($.trim($(this).val()).length > 0){
            canvas.add(textObject);
            canvas.renderAll();
      }
            });

            document.getElementById('AddTextCust2').addEventListener('keyup', function () {
              canvas.getActiveObject().text = document.getElementById('AddTextCust2').value;
              canvas.renderAll();
            });
      
      
      
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script> 

<div id="contCanvasLogo" style="float:left;width:100%;">
 <canvas id="canvas" class="resize canvasLogo" style="width:500px;height:500px;border:1px solid #ccc;"></canvas>
 </div>
 
 <textarea id="AddTextCust" rows="3" cols="20"></textarea>
 <textarea id="AddTextCust2" rows="3" cols="20"></textarea>

如何设置此添加文本限制？

Answer 1

您正在为每个 keyup 事件添加一个新的 IText 对象。因此，fabric 正在渲染多个文本片段。 （您还有多个 keyup 事件处理程序对相同的对象执行大致相同的操作。）

您的原始代码：

            //TEXT 1
            $( "#AddTextCust" ).keyup(function() {
            var textObject = new fabric.IText($("#AddTextCust").val(), textOptions);
            if($.trim($(this).val()).length > 0){
            canvas.add(textObject);
            canvas.renderAll();
      }
            });

            document.getElementById('AddTextCust').addEventListener('keyup', function () {
              canvas.getActiveObject().text = document.getElementById('AddTextCust').value;
              canvas.renderAll();
            });

与其添加新的IText 对象，不如只创建一个并更新它。 （另外，删除keyup 事件处理程序之一）：

            //TEXT 1
            const $addTextCust = $('#AddTextCust');
            const textObject = new fabric.IText($addTextCust.val(), textOptions);
            canvas.add(textObject);

            $addTextCust.keyup(function() {
              textObject.text = $addTextCust.val();
              canvas.renderAll();
            });