Fabric js - 不要向 canvas 添加两个以上的文本区域

Question

在我使用 Fabric js 4.3.1 的项目中，我试图设置向 canvas 添加文本的限制。 我的目标是限制添加 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 object。 因此，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();
            });