Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 计算SVG元素内的面积体积_Javascript_Css_Math_Svg_Analytics - Fatal编程技术网

Javascript 计算SVG元素内的面积体积

Javascript 计算SVG元素内的面积体积,javascript,css,math,svg,analytics,Javascript,Css,Math,Svg,Analytics,给定一个SVG,比如这个鱼缸,我试图计算以粉红色定义的区域的体积,作为“填充标高”和“空标高”之间的面积百分比 我不能从上到下做一个简单的百分比,因为鱼缸的形状是不规则的,这将使计算偏离至少几个百分点。我需要对许多不同形状的鱼缸进行此操作,因此需要一个算法来确定每个鱼缸的体积 在SVG元素上使用javascript有什么方法可以做到这一点吗?如果有,有什么方法可以在元素区域内以百分比的形式计算出来吗 更新:将示例SVG上载到首先需要将SVG路径解析为行。因为他们都不交叉 Y轴,这减少到找到鱼缸

给定一个SVG,比如这个鱼缸,我试图计算以粉红色定义的区域的体积,作为“填充标高”和“空标高”之间的面积百分比

我不能从上到下做一个简单的百分比,因为鱼缸的形状是不规则的,这将使计算偏离至少几个百分点。我需要对许多不同形状的鱼缸进行此操作,因此需要一个算法来确定每个鱼缸的体积

在SVG元素上使用javascript有什么方法可以做到这一点吗?如果有,有什么方法可以在元素区域内以百分比的形式计算出来吗


更新:将示例SVG上载到

首先需要将SVG路径解析为行。因为他们都不交叉 Y轴,这减少到找到鱼缸引起的曲线下的区域, 也称为积分

设{x_0,x_1,…,x_n}为线段x坐标的绝对值

表示鱼缸图的函数是分段函数:

f(x) = 
 { (x - x_0)/(x_1 - x_0) if x_0 <= x < x_1
 { (x - x_1)/(x_2 - x_1) if x_1 <= x < x_2
 {  ... 
 { (x - x_(n-1))/(x_n - x_(n-1)) if x_(n-1) <= x < x_(n)
f(x)=

{(x-x_0)/(x_1-x_0)如果x_0A我需要一个在计算成本方面不令人望而却步的解决方案,而且我没有心情编写优化的代码,我最终在透明背景下渲染它,转换为光栅,然后计算像素。我相信在图形和几何方面有经验的人可以想出更干净的解决方案,但我的高级语言中的优化代码不可能比那些毕生致力于此并在汇编中编写的人运行得更快


当然,根据鱼缸几何体的复杂性,您可能需要提高渲染分辨率。

您通常是在寻找旋转的体积吗?如果是这样,您需要指定轴。我认为是这样。我假设对象是完全对称的,因此俯视3d世界中的对象,鱼缸是完美的圆形。我们能看到
.svg
文件吗?对边缘上的点进行采样,并使用旋转体积估算公式如果你想知道形状的体积,请在math上提问。stackexchangeAwesome答案,正是我想要的。完全有意义。数学解决方案的额外荣誉。你知道转换svg pa的好方法吗到线条?我查看了一些常见的线条,但找不到任何适用于复杂形状的东西,就像我不知道任何解析SVG路径到线条的代码一样。因为您的示例使用了贝塞尔曲线,一种方法是细分曲线,直到它足够接近线条。另一种方法是使用贝塞尔立方函数我的答案中给出的分段曲线函数的一部分。