Question

我已成功创建了fabricJS对象（fabric.Text）。但现在我想要具有固定高度和宽度的对象。目前，当我编辑对象的文本时，它（对象）被缩放。但现在我想要具有固定高度和宽度的对象。当我编辑文本时，文本应该缩小（减少文本宽度并减小间距大小）和对象的高度和宽度应该是固定的。这里是参考link（中心文本是我必须开发的）。这是我的代码。

$(function () {
  var fontfamily = 'Arial';
  var fontsize = 30;
  var fontspacing = $('#fontspacing').val();

  var canvas = new fabric.Canvas('c');

  var text = new fabric.Text($('#text').val(), {
    top: 250,
    left: 250,
    centeredScaling: true,
    hasControls: true,
    hasBorders: false,
    textAlign: 'center',
    fontSize: fontsize,
    fontFamily: fontfamily,
    originX: 'center'
  });
  canvas.add(text).renderAll();

  $('#text').on('keyup', function () {
    canvas.setActiveObject(canvas.item(canvas.getObjects().length - 1));
    var obj = canvas.getActiveObject();
    if (obj) {
      obj.setText($('#text').val());
      canvas.renderAll();
    }
  });
});

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
        <script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="row canvas-container" style="width: 50%; float: left;">
                <canvas id="c" width="500" height="500" style="border:1px dotted #000; border-radius: 50%;"></canvas><br>
            </div>
            <div class="row" style="float: left; width: 50%; height: 150px; background-color: violet;">
                Text : 
                <input type="text" id="text" /><br>
            </div>
        </div>
    </body>
</html>

如何创建具有修复高度和宽度的fabricjs对象？

0 个答案: