在 Fabric.js 中调整基于文本的对象大小时如何防止包含文本的垂直和水平拉伸？

Question

我希望能够在不拉伸对象内部文本的情况下缩放基于文本的对象（例如，使用类和 IText 的子类，文本框）。缩放和移动的交互是在用户端 (UI)，而不是以编程方式进行（我正在使用绘图编辑器）。

我正在寻找的行为类似于便签应用程序中的行为：您可以缩放纸张，但此操作不会缩放您的文本。

这个我已经查过了，但这只是为了横向预防：

这不是我want/mean：Fabric.js : How to set a custom size to Text or IText?

我知道缩放因子不同于 1 意味着内部文本的拉伸，并且通过更改 width 和 height 我可以调整对象的大小，同时保持文本未缩放，所以我尝试在使用事件侦听器缩放期间更新这些。

我尝试了 IText、Textbox 与一些缩放事件的多种组合，比如这个：

fbtext.on('scaling', function() {
                      this.set({
                        width : this.width  * this.scaleX,
                        height: this.height * this.scaleY,
                        scaleX: 1,
                        scaleY: 1,
                      });
                    });

我也用文本框试过这个：

fbtext.on('scaling', function() {
                      this.set({
                        height: this.height * this.scaleY,
                      });
                    });

但到目前为止没有任何效果。我没主意了。

Answer 1

var canvas = new fabric.Canvas('mycanvas');

let textbox = new fabric.Textbox("Sample text", {
   left: 100,
   top: 100
});

let lastHeight;

const updateTextSize = () => { 

  const controlPoint = textbox.__corner;

  //mr and ml are the only controlPoints that dont modify textbox height
  if( controlPoint && controlPoint != "mr" && controlPoint != "ml"){
     lastHeight =  textbox.height * textbox.scaleY;   
  }

  textbox.set({  
    height: lastHeight || textbox.height,
  scaleY:1    
  });
  
  canvas.renderAll();
};
  
 
textbox.on('scaling', updateTextSize );
textbox.on('editing:entered', updateTextSize);
canvas.on('text:changed', updateTextSize);
  
canvas.add(textbox);

canvas {
    border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.min.js"></script>
<canvas id="mycanvas" width="400" height="400"></canvas>

这是一个代码示例，可让您修改 "sticky note size" 而无需拉伸文本

在 Fabric.js 中调整基于文本的对象大小时如何防止包含文本的垂直和水平拉伸？

How can I prevent both vertical and horizontal stretching of contained text while resizing text-based objects in Fabric.js?

javascript

draw

html5-canvas

fabricjs