0

I'm trying to resizing a rotated rectangle in html canvas. The direction of resizing is to east, so basically, the rectangle width must grow, while it mantains the height fixed.

I achieved to do it in the nwse resize in the example below.

 const cx = this.x + this.width / 2;  
     const cy = this.y + this.height / 2;
  
  const [nw] = v_rotate([new Vector(this.x, this.y)], cx, cy, this.angle);

  
    if(side === 'nor-east') {
            const new_center = new Vector( 
            (nw.x + c.x) / 2, 
              (nw.y + c.y) / 2 
          );

            const [tl] = v_rotate(  
            [nw],
            new_center.x,  
            new_center.y, 
            -this.angle 
          ); 
  
          const [br] = v_rotate(    
            [c],  
            new_center.x,  
            new_center.y,  
            -this.angle    
          );        

             
              this.x = tl.x; 
                this.y = tl.y; 
                this.height = br.y - tl.y
              this.width = br.x - tl.x;

                return;
        } 

I understand how I achieve it because of this article [resizing-rotated-elements], but I'm not being able to achieve in the ew resize.

To achieve the ew resize without the rectangle to shift, at least in my mind, I cannot change the y, and should find the new x center based on the Δx

if (side === 'east') {
             const nc = new Vector(
                 (c.x + nw.x) / 2,  
                 cy
             ) 


              const [tl] = v_rotate([nw], nc.x, nc.y, -this.angle)
              const [br] = v_rotate([c], nc.x, nc.y, -this.angle)
              this.x = tl.x;
              this.width = br.x - tl.x;
        return;
      }

If helps, I have this small app in svelte that I'm using as prototype.

https://svelte.dev/playground/558adc2e7ed94682b06d1ff144a44ba2?version=5.19.7

1
  • Please note that we expect a minimal reproducible example of your issue to be included directly inside your question, please do not just send us to external playgrounds. Commented Feb 3 at 9:19

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.