Javascript 在Paper.js中调整矩形大小

我在Paper.js中创建了一个非常普通的矩形，我想调整它的大小，但我找不到任何明显的方法

var rect = new Rectangle([0, 0],[width,height]);
rect.center = mousePoint;
var path = new Path.Rectangle(rect, 4);
path.fillColor = fillColor;
path.meta = fillColor;

---

有一种缩放变换方法，但它实际上不适用于鼠标交互，我的目标是创建一个可以调整组件大小的句柄。

您可以通过将矩形的预期宽度/高度除以矩形的当前宽度/高度来计算缩放

然后可以使用该缩放“系数”应用缩放

根据上面的代码，您可以使用以下命令获得矩形的当前宽度/高度：

rect.bounds.width

和

rect.bounds.height

这里有一个可以使用的函数

var rectangle = new Shape.Rectangle({
    from: [0, 0],
    to: [100, 50],
    fillColor: 'red'
});


function resizeDimensions(elem,width,height){
    //calc scale coefficients and store current position
    var scaleX = width/elem.bounds.width;
    var scaleY = height/elem.bounds.height;
    var prevPos = new Point(elem.bounds.x,elem.bounds.y);

    //apply calc scaling
    elem.scale(scaleX,scaleY);

    //reposition the elem to previous pos(scaling moves the elem so we reset it's position);
    var newPos = prevPos + new Point(elem.bounds.width/2,elem.bounds.height/2);
    elem.position = newPos;
}


resizeDimensions(rectangle,300,200)

这是它的基本原理

---

请注意，上述功能也会将图元重新定位到其以前的位置，但它将使用左上角定位。Paper.js使用元素的中心来定位它们，因此我要澄清这一点，以免引起混淆

注意PaperJS有三种不同的矩形：

• 矩形

  -这是定义矩形的基本类型（数据结构）。基本上是左上角的点、宽度和高度。（屏幕上不显示任何内容。）这种矩形可以通过设置其大小属性来调整大小，例如：

  let rect;
  const originalSize = [50, 50];
  const newSize = [100, 100];
  
  rect = new Rectangle([10, 50], originalSize);
  rect.size = newSize;
  

• 路径。矩形

  -这是一种生成组成矩形路径的段列表的方法。这确实会显示，但路径缺少与矩形关联的方法。例如，

  Path.Rectangle

  没有

  size

  属性（因此尝试修改它没有效果）。要调整路径大小，可以使用另一个答案建议的

  scale（）

  方法，或修改其分段：

• Shape.Rectangle

  -此类矩形将显示并公开其形状的属性，例如

  大小

  。要调整

  形状.矩形的大小

  ，可以直接修改其

  大小

  属性：

  rect = new Shape.Rectangle([410, 50], originalSize)
  rect.strokeColor = "blue"
  rect.strokeWidth = 3
  
  rect.size = newSize
  

最有可能的情况是，如果要绘制一个矩形并在事后修改其属性，则要查找的矩形是

Shape.rectangle

---

这是一个可以让你玩不同种类的矩形的游戏。

非常感谢。我刚刚意识到有一个形状物体。我可以调用

rectangle.set（{size:[200200]}）

它工作得很好，但是

Path.rectangle

不是这样的。我用这个解决方案解决了一个问题。当我把宽度改为0，然后再改回来，scaleX是无穷大。这个答案之后是个好答案。这个答案比公认的好。也许在2015年的版本中没有这样的形状。。。

rect = new Shape.Rectangle([410, 50], originalSize)
rect.strokeColor = "blue"
rect.strokeWidth = 3

rect.size = newSize