將字體大小從輸入更新到織物 js canvas 生成的文本

Question

我想從這里更新字體大小

<input value="1" id="fontSize" type="text">

輸入到

 $("#fontSize").on("change", () => {
      let fontsize = document.querySelector("#fontSize");
      sizeFromInput = fontsize.value;
      canvas.getActiveObject().set("fontSize", sizeFromInput);
    
      canvas.renderAll();
    });

這是我在織物 js 中的文本生成 function

 $("#typeTool").click(() => {
        var textEditable = new fabric.Textbox("ASR Textbox", {
        width: 500,
        editable: true,
        fontFamily: "Delicious_500",
        left: 100,
        top: 100,
        fontSize: 18,
        fill: "#000",
      });
    
      canvas.add(textEditable);
    });

Answer 1

我認為您的代碼按預期工作。 也許您可以使用 input 事件進行即時更新，因為當內容發生更改並且元素失去焦點時，大多數瀏覽器中都會觸發 change 事件。

它不會像 case 輸入事件中的每一個更改都觸發。

https://stackoverflow.com/a/17047588/5646527

 var canvas = new fabric.Canvas('c'); canvas.renderAll.bind(canvas); $("#fontSize").on("change", () => { let fontsize = document.querySelector("#fontSize"); sizeFromInput = fontsize.value; var activeObject = canvas.getActiveObject(); if (activeObject) { activeObject.set("fontSize", sizeFromInput); } canvas.renderAll(); }); $("#typeTool").click(() => { var textEditable = new fabric.Textbox("ASR Textbox", { width: 50, editable: true, left: 10, top: 10, fontSize: 18, fill: "#000", }); canvas.add(textEditable); canvas });

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fabric@5.2.4-browser/dist/fabric.min.js"></script> <button id="typeTool">Add Text</button> <input type="text" id="fontSize" /> <br> <canvas id="c" width="400" height="400"></canvas> <br> <p class="save"> </p>