CODEWITHSUNDEEP
javascriptrectanglespaperjs
mdomino
mdomino

Reputation: 1235

Resize rectangle "onResize" in paper.js

Ok, I feel incredibly stupid, but after trying for half an hour or so, I give up.

How do I resize a rectangle via the onResize() event in paper.js? I am trying with this example, which comes with a onResize() function already, but I am having no success (you can edit the sample by clicking on the Source button on the top right).

The current resize function looks like this:

function onResize() {
    text.position = view.center + [0, 200];
    square.position = view.center;
}

Now, I tried to make the square 80 % of the viewport height on resize by adding:

square.size = [view.size.height / 100 * 80, view.size.height / 100 * 80];

(I tried the same with static numbers, just to be sure).

I tried

square.size = new Size(width, height);

square.set(new Point(view.center), new Size(width, height)

square.height = height;
square.width = width;

and probably 20 more version that I cannot remember now. When I console.logged the square.size it did show me the newly assigned values (sometimes?), but it still left the size of the rectangle unchanged.

What can I do to actually change the size of rectangle?

Upvotes: 0

Views: 1027

Answers (1)

ibriq
ibriq

Reputation: 71

Just to make sure, the onResize() function gets called whenever the window's dimensions change. That's not the only place you can change the rectangle's size / it has nothing to do with the rectangle per se.

To change the rectangle's sizes, you have to check the documentation. There's a scale(amount) and an expand(amount) method attached to the Rectangle object. size is just a property, and it doesn't seem to come with a setter.

Hence, if you want to keep a ratio in between the square and the view, I guess you could save the previous view width, see what the difference is and scale the rectangle accordingly – see how in this this answer to a previous question.

Alternatively, you could just reinitialise the square and set the size property to 80% of the view's width on each view resize:

square = new Path.Rectangle({
    position: view.center,
    size: view.bounds.width * 0.8,
    parent: originals,
    fillColor: 'white'
});

Upvotes: 2

Related Questions