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.
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.
Note that PaperJS has three different kinds of Rectangles:
Rectangle
— This is the basic type (data structure) that defines a 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. 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). To resize a Path you can use the scale()
method as another answer proposes, or modify its 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
— This kind of rectangle gets displayed and exposes properties about its shape, such as size
. To resize a Shape.Rectangle
you can modify its size
property directly:
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
.
Here is a Sketch that lets you play around with the different kinds of rectangles.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With