8.1贝塞尔曲线(下坡)绘制，自适应宽高、点位计算

 效果如下

左上角左边为(0,0)

右下角为(width,height)

// 根据宽高绘制贝塞尔曲线(下坡)
export function paintCurve(w, h) {
  let path = ''
  if (/^\d+$/.test(w) && /^\d+$/.test(w)) {
    let fontSize = document.getElementsByTagName('html')[0].style.fontSize
    fontSize = fontSize.split('px')[0]
    let halfWidth = Math.ceil((w / 75) * fontSize)
    let Width = Math.ceil((w / 37.5) * fontSize)
    let height = Math.ceil((h / 37.5) * fontSize)
    // L 0,Width的 意思是从横坐标0到Width这个区间把曲线绘制出来
    path = 'path("M 0,0 C ' + halfWidth + ',0 ' + halfWidth + ',' + height + ' ' + Width + ',' + height + ' ' + 'L 0,' + Width + ' Z")'
  } else {
    Toast('宽高必须为数字')
  }
  
  return path
}

在vue中使用

在style标签里，通过v-bind可以把data的变量绑定使用，然后通过计算出需要的点位，这里是根据自适应的根标签字体大小来实现根据屏幕自适应曲线位置

data() {
  return {
   // 贝塞尔曲线
   path: 'path("M 0,0 C 14,0 14,28 28,28 L 0,28 Z")'
  }
},
mounted() {
  // 绘制曲线
  this.path = paintCurve('28','28')   
},
<style lang="less" scoped>
.curve:after {
      content: '';
      position: absolute;
      width: 28px;
      height: 28px;
      top: 0;
      right: -27px;
      background: linear-gradient(to bottom, #0F1214,#383A3B);
      // clip-path: path('M 0,0 C 14,0 14,28 28,28 L 0,28 Z');
      clip-path: v-bind(path);
    }
}
</style>