水排序

简介

主要是水面倾斜，水分层，水波纹三合一的效果。

有关水面倾斜计算方案

方案来源于 白玉无冰
链接: https://mp.weixin.qq.com/s/DXl7_rvI5fS3Fg-OmHvgmg

核心原理

水面倾斜后水体的体积不变，已知水体高度，水体的宽度，以及旋转的角度，那么可以求得在水倾斜到某个角度后，倾斜各点的顶点位置，即可进行水体的绘制达到倒水的效果。

那么以最底层为例子，朝着一边倒水的时候会出现两种情况：

• 当水体稍微倾斜后，但是最低的水面没有够着底部，形成了一个梯形水体:
  !Post not found: = Pasted image 20230216093108.png|left|200
  在这种情况下可以通过左边的公式算出新的顶点高度。
  实际上就是原来的高度+新增的高度(宽度 X $tan(\theta)$ / 2)

• 水体临界值的计算：
  !Post not found: = Pasted image 20230216102153.png|left|200

• 当水体倾斜超越临界值的情况:
  !Post not found: = Pasted image 20230216100702.png|left|200

这样就能计算出每一次水体偏高一边点的位置。

具体代码

private drawOneWater(height: number, color: Color) {
	// 三角函数中弧度值得求值方式  角度/180*Math.Pi
    const radiansA = this.bottleAngle / 180 * Math.PI;
    //计算临界角度
    const radiansM = Math.atan(2 * height / this.bottleWidth);
	// 对于梯形的情况这个是新增的高度
    const tempWTan = this.bottleWidth * Math.tan(radiansA);
    this.drawGraphics.fillColor = color;
    // 当前角度如果小于其临界值，还有两种情况。当前角度是逆时针(负数)，还是顺时针。
    if (radiansA <= radiansM) {
	    // 这种情况是当逆时针旋转的值大于了临界值，形成了三角形
        if (radiansA < -radiansM) {
            // 三角形 逆时针
            let hL = Math.sqrt(2 * height * -tempWTan);
            // 超出高度处理
            hL = hL > this.bottleHeight ? this.bottleHeight : hL;
            const bW = hL / Math.tan(-radiansA);
            this.drawGraphics.moveTo(this.bottleWidth, 0);
            this.drawGraphics.lineTo(this.bottleWidth, hL);
            this.drawGraphics.lineTo(this.bottleWidth - bW, 0);
            this.drawGraphics.lineTo(this.bottleWidth, 0);
        } else {
            // 梯形，包含顺逆时针
            this.drawGraphics.moveTo(0, 0);
            let hL = height + tempWTan / 2;
            // 超出高度处理
            let cutOffset = 0;
            if (hL > this.bottleHeight) {
                cutOffset += hL - this.bottleHeight
            }
            let hR = height - tempWTan / 2;
            if (hR > this.bottleHeight) {
                cutOffset += hR - this.bottleHeight
            }

            this.drawGraphics.lineTo(this.bottleWidth, 0);
            this.drawGraphics.lineTo(this.bottleWidth, hR - cutOffset);
            this.drawGraphics.lineTo(0, hL - cutOffset);
            this.drawGraphics.lineTo(0, 0);
        }
    } else {
        // 三角形 顺时针
        let hL = Math.sqrt(2 * height * tempWTan);
        // 超出高度处理
        hL = hL > this.bottleHeight ? this.bottleHeight : hL;
        const bW = hL / Math.tan(radiansA);
        this.drawGraphics.moveTo(0, 0);
        this.drawGraphics.lineTo(bW, 0);
        this.drawGraphics.lineTo(0, hL);
        this.drawGraphics.lineTo(0, 0);
    }
    this.drawGraphics.fill();
}