[英]Resize rectangle in Paper.js
I have a very ordinary rectangle created in Paper.js and I'd like to resize it, but I can't find any obvious ways to do it. 我有一个在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;
There's a scale transformation method, but it's not really for mouse interaction and my goal is to create a handle that can resize a component. 有一个比例转换方法,但它不是真正的鼠标交互,我的目标是创建一个可以调整组件大小的句柄。
You can calculate the scaling by dividing the intended width/height of your rectangle with the current width/height of your rectangle. 您可以通过将矩形的预期宽度/高度除以矩形的当前宽度/高度来计算缩放比例。
Then you can use that scaling 'coefficient' to apply the scaling. 然后,您可以使用该缩放“系数”来应用缩放。
Based on your code above, you can get the current width/height of your rectangle by using: rect.bounds.width
and rect.bounds.height
根据上面的代码,您可以使用:
rect.bounds.width
和rect.bounds.height
矩形的当前宽度/高度。
Here's a function you can use 这是您可以使用的功能
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)
And here's the Sketch for it. 这是草图 。
Be aware that the above function will also reposition the element at it's previous position but it will use top-left positioning. 请注意,上述功能还会将元素重新定位在其先前位置,但它将使用左上角定位。 Paper.js uses the element's center to position them so I'm clarifying this so it doesn't cause confusion
Paper.js使用元素的中心来定位它们,所以我澄清这一点,这样就不会引起混淆
Note that PaperJS has three different kinds of Rectangles: 请注意,PaperJS有三种不同的矩形:
Rectangle
— This is the basic type (data structure) that defines a rectangle. Rectangle
- 这是定义矩形的基本类型 (数据结构)。 Basically, top-left point, width, and height. 基本上,左上角,宽度和高度。 (Nothing is displayed on the screen.) This kind of rectangle can be resized by setting its size property, for instance:
(屏幕上不显示任何内容。)可以通过设置其大小属性来调整此类矩形的大小,例如:
let rect; const originalSize = [50, 50]; const newSize = [100, 100]; rect = new Rectangle([10, 50], originalSize); rect.size = newSize;
Path.Rectangle
— This is a method for generating a list of Segments that make up a rectangular-shaped Path. Path.Rectangle
- 这是一种用于生成构成矩形路径的段列表的方法。 This does get displayed, but a Path lacks methods associated with a rectangle. 这并获得显示,但路径没有用矩形相关的方法。 For instance, a
Path.Rectangle
has no size
property (so trying to modify it has no effect). 例如,
Path.Rectangle
没有size
属性(因此尝试修改它没有任何效果)。 To resize a Path you can use the scale()
method as another answer proposes, or modify its Segments : 要调整路径大小,您可以使用
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
— This kind of rectangle gets displayed and exposes properties about its shape, such as size
. Shape.Rectangle
-这种矩形被显示,并揭露了其形状属性,如size
。 To resize a Shape.Rectangle
you can modify its size
property directly: 要调整
Shape.Rectangle
大小,可以直接修改其size
属性:
rect = new Shape.Rectangle([410, 50], originalSize) rect.strokeColor = "blue" rect.strokeWidth = 3 rect.size = newSize
Most likely, if you want to draw a rectangle and modify its properties after the fact, the rectangle you are looking for is Shape.Rectangle
. 最有可能的是,如果你想绘制一个矩形并在事后修改它的属性,你正在寻找的矩形是
Shape.Rectangle
。
Here is a Sketch that lets you play around with the different kinds of rectangles. 这是一个Sketch ,可以让你玩弄不同种类的矩形。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.