javascript - Ew resizing rotated rectange in html canvas - Stack Overflow

admin管理员组

文章数量:1313011

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.

/playground/558adc2e7ed94682b06d1ff144a44ba2?version=5.19.7

本文标签： javascriptEw resizing rotated rectange in html canvasStack Overflow