javascript - IText 的 Canvas 大小

Question

我正在开发 Canvas 编辑器项目。我正在使用 IText 在 Canvas 中添加文本。用户可以更改字体、将文本设置为粗斜体等。当用户想要更改文本的字体大小时，他可以但文本的大小不以 px 大小变化，这是一个问题。如果需要我可以放置所有代码。并且可以显示实时版本。现在要更改大小，我使用此代码

document.getElementById('fontSize').onchange = function() {
  canvas.getActiveObject().set("FontSize", this.value);
  canvas.renderAll();
}

<div class="select-wrapper font-size">
  <select id="fontSize">
    <option value="10">10</option>
    <option value="12">12</option>
    <option value="14">14</option>
    <option value="16">16</option>
    <option value="18">18</option>
    <option value="20">20</option>
    <option value="22">22</option>
    <option value="24">24</option>
    <option value="26">26</option>
    <option value="28">28</option>
    <option value="30">30</option>
    <option value="32">32</option>
    <option value="34">34</option>
    <option value="36">36</option>
    <option value="38">38</option>
    <option value="40">40</option>
    <option value="42">42</option>
    <option value="44">44</option>
    <option value="46">46</option>
    <option value="48">48</option>
    <option value="50">50</option>
    <option value="52">52</option>
    <option value="54">54</option>
    <option value="56">56</option>
    <option value="58">58</option>
    <option value="60">60</option>
    <option value="62">62</option>
    <option value="64">64</option>
    <option value="66">66</option>
    <option value="68">68</option>
    <option value="70">70</option>
    <option value="72">72</option>
    <option value="74">74</option>
    <option value="76">76</option>
    <option value="78">78</option>
    <option value="80">80</option>
  </select>
</div>

Answer 1

很抱歉，您的假设是错误的，请将此答案视为长评论，

The problem when user want to change Font Size of the text he can but the text change not in px size.

正如您在 fabric.js source code 中所读到的那样:

/**
* Font size (in pixels)
* @type Number
* @default
*/
fontSize:             40,

默认(编辑和唯一)单位为像素。

如果运行下面的可执行代码片段，您可以看到 Fabric iText，并输入文本，同步更新其字体大小

$(function() {
  var canvas = new fabric.Canvas('c');
  var iTextSample = new fabric.IText('hello\nworld', {
    left: 50,
    top: 50,
    fontFamily: 'Helvetica',
    fontSize: $('#fontSize').val(),
  });
  $('#dText').css('fontSize', $('#fontSize').val() + 'px');

  canvas.add(iTextSample);
  canvas.setActiveObject(iTextSample);
  $('#fontSize').change(
    function() {
      $('#dText').css('fontSize', this.value + 'px');
      canvas.getActiveObject().set("fontSize", this.value);
      canvas.renderAll();
    });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c" width="150" height="150" style="border: 1px solid rgb(204, 204, 204);"></canvas>

<select id="fontSize">
  <option value="10">10</option>
  <option value="12">12</option>
  <option value="14">14</option>
  <option value="16">16</option>
  <option value="18">18</option>
  <option value="20">20</option>
  <option value="22">22</option>
  <option value="24">24</option>
  <option value="26">26</option>
  <option value="28">28</option>
  <option value="30">30</option>
</select>

<input id="dText" value="hello world">