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

debugcn 发表于 Dev

杰科姆

在我的使用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>

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

牛ob

您将IText在每个keyup事件上添加一个新对象。结果，结构正在渲染多个文本片段。（您还具有多个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();
            });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。