问题描述
我有一个滑块/量规/条形组件来选择一个值。拖动滑块时，它会更新一个值以提供用户反馈：
currentValue = Math.round((componentHeight - draggedValue) / componentHeight * vesselVolume);
滑块从溢出隐藏 div 父级内绝对 div 的顶部位置给出其值，给人一种可以升高和降低的仪表的错觉。
这一切正常。
问题
我正在使用仪表来估计容器中的液体体积。如果容器有水平、直边，很好，但可能没有。例如，一个桶会先凸出来然后再缩进去。
我可以在我的量规上使用遮罩来模拟正在填充的容器，但这让我想知道能够提取显示的容器中填充的一些体积的任务是非常复杂还是平易近人？
我目前的方法
我将使用我自己的 SVG 图形，它可以提供简单的线数据。我正在研究是否可以在 vanilla javascript 中对 SVG 进行裁剪或布尔运算，我可以在其中裁剪仪表顶部到达的图形。
我想我然后可以计算结果图形的面积，如果提供适合整个容器的液体体积，则显示液体体积。
我没有提供深度信息，但目前我可以安全地假设所有血管都围绕 Y 轴对称。
我对涉及形状的数学有点无知，这项任务可行吗？作为妥协，我可以使用粗略的公式来模拟各种船只，如果它们近似地模拟以某个角度发散到某个高度等的边缘。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）