长方形旋转计算最后的外层宽高，单元测试

思路：计算的变量

实际代码：

<template>
  <div>
    <div style="margin-bottom: 30px">
      rotate： {{rotate}}
      圆角：<input type="number" v-model="rotate" max="360" />
    </div>
    <div class="out-box">
      <div class="rect" :style="{width: width + 'px', height: height + 'px', transform: `rotate(${rotate}deg)`}"></div>
      <!-- <div class="abs" :style="{width: newWidth+'px', height: newHeight + 'px'}"></div> -->
      <!-- <div class="rect2" :style="{width: width+'px', height: height + 'px', transform: `rotate(${120}deg)`}"></div> -->
      <!-- <div class="abs2" style="width: 91.6025px; height: 58.6603px; transform: translateX(-41.8013px) translateY(19.6699px); borderColor: pink"></div> -->
      <div class="abs2" :style="{width: newWidth+'px', height: newHeight + 'px', transform: `translateX(-${endObj.x4}px) translateY(${endObj.y4}px)`}"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      width: 10,
      height: 100,
      rotate: 60,
      newWidth: '',
      newHeight: '',
      border: 1,
      endObj: {},
    };
  },
  mounted() {
    this.checkWH();
  },
  watch: {
    rotate() {
      this.checkWH();
    }
  },
  methods: {
    checkWH() {
      const rotate = this.rotate > 270 ?  360 - this.rotate : this.rotate > 180 ? this.rotate - 180 : this.rotate > 90 ? 90 - (this.rotate - 90) : this.rotate;
      const x1 = this.height * Math.sin(rotate * (Math.PI / 180));
      const y1 = Math.sqrt(this.height * this.height - x1 * x1);
      const minRotate = 180 - 90 - rotate; // 
      const x2 = this.width * Math.sin(minRotate * (Math.PI / 180));
      const y2 = Math.sqrt(this.width * this.width - x2 * x2);
      this.newWidth = Number(x1) + Number(x2);
      this.newHeight = Number(y1) + Number(y2);

      const x3 = this.newWidth / 2 - this.width / 2 - x2;
      const x4 = x2 + x3 + this.border;
      const y4 = (this.height - this.newHeight) / 2 - this.border;

      console.log('x1: ', x1);
      console.log('x2: ', x2);
      console.log('y1: ', y1);
      console.log('y2: ', y2);
      console.log('x3: ', x3);
      console.log('newWidth', this.newWidth);
      console.log('newHeight', this.newHeight);

      this.endObj = { x1, x2, y1, y2, x4, y4 };
    },
  },
};
</script>

<style scoped>
.rect {
  box-sizing: border-box;
  width: 10px;
  height: 100px;
  border: 1px solid red;
}
.out-box {
  box-sizing: border-box;
  border: 1px solid green;
  display: inline-block;
  position: relative;
}
.abs,
.abs2 {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid orange;
}
.rect2 {
  position: absolute;
  border: 1px solid blue;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

</style>

—end