Matter JS Body rectangle/circle resize width and height

Viewed 17

I created circle/rectangle with code from this answer.

Now, I'm trying to resize the width and height of body, when the browser resized.

    if ( window.matchMedia("(max-width: 700px)") ) { 
        Matter.Body.scale( circle.body, 1, 1); 
    } else { 
        Matter.Body.scale( circle.body, 1.5, 1.5); 
    } 

This method is not working perfectly how i want. I tried to test with click function, so i can check how it works.

    btn1.addEventListener('click', (e) => {
        Matter.Body.scale( circle.body, 1, 1); 
    });
    btn2.addEventListener('click', (e) => {
        Matter.Body.scale( circle.body, .5, .5); 
    });

Example's result:

_ 1 is origin value
_ btn2 click -> 1 * .5 = .5
_ btn2 click -> .5 * .5 = .25
_ btn1 click -> .25 * 1 = .25
...

I found that the body(circle) is not resizing with origin value like css transform scale. It calculate(increase and decrease) with previous value.

I always control and set the BODY position (ex. Matter.Body.set(circle.body, "position", {x: xPos, y: yPos}); ) How can i use the Body scale like css-transform-scale? Or is there any way to set new width or height, so that body get new vertices?

0 Answers
Related