Paper.js中如何调整矩形大小

Question

Paper.js中如何调整矩形大小

5

我使用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;

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

- Tibor Szasz

2个回答

4

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

然后，您可以使用该缩放“系数”来应用缩放。

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

这里有一个关于 IT 技术的链接：Sketch

请注意，上述函数还会将元素重新定位到它的先前位置，但是它将使用左上角定位方式。Paper.js 使用元素的中心来定位它们，所以我在这里澄清，以免引起混淆。

- nicholaswmin

非常感谢。我刚刚意识到有一个形状对象。我可以调用 rectangle.set({ size: [200,200] })，它能正常工作，但对于 Path.rectangle 并非如此。 - Tibor Szasz

我遇到了一个问题。当我将宽度更改为0，然后再更改回来时，scaleX的值变成了无穷大。 - navono

1

在这个答案之后是一个好的答案。 - SteamFire

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arel · Accepted Answer

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

Rectangle — 这是定义矩形的基本类型（数据结构）。基本上，它由左上角点、宽度和高度组成。（屏幕上没有显示任何内容。）这种类型的矩形可以通过设置其大小属性来调整大小，例如：
```
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() 方法或修改其线段，正如另一个答案所建议的那样：

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