在Fabric.js中调整基于文本的对象的大小时，如何防止包含文本的垂直和水平拉伸? [英] How can I prevent both vertical and horizontal stretching of contained text while resizing text-based objects in Fabric.js?

问题描述

我希望能够缩放基于文本的对象(例如，使用IText，Textbox的类和子类)，而无需在对象内部扩展文本.缩放和移动的交互是在用户端(UI)上，而不是以编程方式进行的(我正在使用图形编辑器).

I want to be able to scale text-based objects (for example with classes and subclasses of IText, Textbox) without stretching the text inside of the object. The interaction of scaling and moving is on user-side (UI), not programmatically (I am working on a drawing editor).

我正在寻找的行为与即时贴应用程序中的行为类似:您可以缩放纸张，但是此操作也不能缩放文本.

我已经检查过，但这仅用于水平预防:

I have already checked this, but this is only for horizontal prevention: Fabric.js How to resize IText horizontally without stretching the text

这都不是我想要的/意思:

This is neither what I want/mean: Fabric.js : How to set a custom size to Text or IText?

我知道比例因子不等于1表示内部文本会拉伸，并且通过更改 width 和 height 可以调整对象的大小，同时保持文本未缩放，因此我尝试在使用事件监听器缩放时更新这些内容.

I know that a scaling factor different than 1 implies the stretching of the inner text, and that by changing the width and height I can resize the object while keeping the text unscaled, so I tried updating these during scaling using events listeners.

我尝试了IText，Textbox的许多组合以及一些缩放事件，例如:

I tried many combinations of the IText,Textbox with some scaling events, like this one:

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

我也在Textbox中尝试了此操作

I also tried this with Textbox:

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

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

But nothing worked so far. I am out of ideas.

推荐答案

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>

这是一个代码示例，可让您修改便签大小"而不会拉长文本

Here is a code sample that will let you modify the "sticky note size" without streching out the text

这篇关于在Fabric.js中调整基于文本的对象的大小时，如何防止包含文本的垂直和水平拉伸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！