Question

我在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;

有一种比例转换方法，但它并不适用于鼠标交互，我的目标是创建一个可以调整组件大小的句柄。

Answer 1

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

然后您可以使用该缩放'系数'来应用缩放。

根据您的上述代码，您可以使用以下代码获取矩形的当前宽度/高度：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)

这里是Sketch。

请注意，上述功能也将重新定位元素位于其前一个位置，但它将使用左上角定位。 Paper.js使用元素的中心来定位它们，所以我澄清这一点，这样就不会造成混淆

Answer 2

请注意，PaperJS具有三种不同类型的矩形：

Rectangle -这是定义矩形的基本类型（数据结构）。基本上是左上角的点，宽度和高度。（屏幕上不显示任何内容。）可以通过设置其size属性来调整这种矩形的大小，例如：
```
let rect;
const originalSize = [50, 50];
const newSize = [100, 100];

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

Path.Rectangle -这是一种用于生成构成矩形路径的细分列表的方法。显示该，但是路径缺少与矩形关联的方法。例如，Path.Rectangle没有size属性（因此尝试对其进行修改无效）。要调整路径的大小，您可以按照其他答案的建议使用scale()方法，也可以修改其 Segments

：

rect = new Path.Rectangle([210, 50], originalSize);
rect.strokeColor = "red";
rect.strokeWidth = 3;

rect.segments[0].point = rect.segments[0].point.add([-25, 25]);  // lower left point
rect.segments[1].point = rect.segments[1].point.add([-25, -25]); // upper left point
rect.segments[2].point = rect.segments[2].point.add([25, -25]);  // upper right point
rect.segments[3].point = rect.segments[3].point.add([25, 25]);  // lower right point

Shape.Rectangle -显示这种矩形并显示有关其形状的属性，例如size。要调整Shape.Rectangle的大小，您可以直接修改其size属性：
```
rect = new Shape.Rectangle([410, 50], originalSize)
rect.strokeColor = "blue"
rect.strokeWidth = 3

rect.size = newSize
```

最有可能的是，如果您想绘制一个矩形并在事后修改其属性，则您要查找的矩形为 Shape.Rectangle 。

>

这里是一个Sketch，可让您使用各种矩形。

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

2 个答案: