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();
            });