将字体大小从输入更新到织物 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>