FabricJs 1.7.18 scaleToWidth（）不设置给定的宽度 [英] FabricJs 1.7.18 scaleToWidth() not setting the given width

问题描述

按照这个答案，我已经构建了所有功能启用的fabricJs版本 1.7.18 - 建立输出档案。

我使用下面的代码来使用scaleToWidth（）更改对象的宽度和高度，但新宽度值设置不正确。它是用其他值设置宽度。

  var obj = canvas.getActiveObject（）; 
 
 obj.scaleX = 1; 
 obj.scaleY = 1; 
 obj.scaleToWidth（65）; 
 obj.setCoords（）; 
 
 canvas.renderAll（）; 
 
 //这给出了不同的宽度值
 console.log（obj.getWidth（））; 
  

任何人都可以帮我解决这个问题吗？

我的实际需求是：
在设置对象宽度时相对设置高度。
例如：
我有一个宽度为50和高度为40的对象。如果我使用函数setWidth（）将宽度设置为100，那么是否有任何内置函数将高度设置为80 ？

解决方案

正如 scaleToWidth 根据边界框将对象缩放到给定宽度（以x / y为单位进行缩放）。

和 getWidth 返回对象边界框计数转换的宽度。

如果您只想设置对象使用 obj.width = value 。

您可以使用 scale（）或scaleX（），scaleY（）来缩放对象。

DEMO

  canvas {border-width：1pz; border-style：solid; border-color：＃000;}  

< script src =https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.js>< / script>< canvas id ='c'width = 300如您所知，您可以通过以下方式获取您的个人资料： 你设定的宽度。计算其变化的百分比与高度相同的百分比。你会得到结果。

As per this answer I have built fabricJs version 1.7.18 with all features enabled - Built output file.

I am using the following code to change an object's width and height using scaleToWidth(), but the new width value is not set properly. It is setting the width with some other value.

var obj = canvas.getActiveObject();

obj.scaleX = 1;
obj.scaleY = 1;
obj.scaleToWidth(65);
obj.setCoords();

canvas.renderAll();

//This gives a different width value
console.log(obj.getWidth()); 

Can anyone help me out to fix this issue?

My actual requirement is: To set the height relatively when I am setting the object width. Example: I have an object with width 50 and height 40. If I am setting the width as 100 using the function setWidth(), then is there any built-in function to set the height as 80?

解决方案

As mentioned in scaleToWidth Scales an object to a given width, with respect to bounding box (scaling by x/y equally).

And getWidth Returns width of an object bounding box counting transformations.

If you just want to set width of an object use obj.width = value.

You can use scale() or scaleX(),scaleY() to scale an object .

DEMO

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c');
  var rect = new fabric.Rect({
   left:50,top:50,width:50,height:40
  })
  canvas.add(rect);
  rect.scale(2);
  rect.setCoords();
  console.log(rect.height,rect.scaleY)
  
})();

canvas{
  border-width: 1pz;
  border-style: solid;
  border-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.js"></script>
<canvas id='c' width=300 height=300></canvas>

As you know the width you are setting. calculate the difference how much percentage its changed set the same to height. You will get the result.

这篇关于FabricJs 1.7.18 scaleToWidth（）不设置给定的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！