一种基于Html5技术实现的二维液面分层显示的仿真实验平台

技术领域

本发明涉及计算机图形学和计算机视觉相关领域，具体为一种基于Html5技术实现的二维液面分层显示的仿真实验平台，该平台通过预先录入的各种药品和容器数据，对用户进行仿真实验操作后的容器中的液面进行绘制。

背景技术

在许多领域，如化学、生物、制药等，需要进行仿真实验以预测或解释实际实验的结果。在这些仿真实验中，常常需要模拟液体物质的分层和液面的变化情况。然而，现有的技术手段通常只能够提供二维的单层液面绘制，无法准确地反映实际实验中液体的复杂分层情况。因此，开发一种能够准确绘制二维分层液面的仿真实验平台，具有重要的实际应用价值。

发明内容

本发明针对现有的技术手段无法准确地反映实际实验中液体复杂分层情况的问题，提供了一种基于Html5技术实现的二维液面分层显示的仿真实验平台。

本发明是采用如下的技术方案实现的：一种基于Html5技术实现的二维液面分层显示的仿真实验平台，该平台包括以下部分：

数据预处理：在此阶段，预先在平台中录入各种药品和容器的基础数据，基础数据包括药品的物理性质、化学性质以及容器的形状数据和容器的形状数据和实际容积与容器投影形状的比例系数，这些基础数据将作为绘制液面的基础；

仿真实验操作：用户通过平台提供的虚拟实验工具，进行药品的添加、移除、混合操作，同时改变容器的角度和姿态；

数据更新与计算：在用户进行仿真实验操作后，平台会实时更新容器内的药品基础数据以及容器的角度数据，根据这些更新的数据，平台会计算液体物质的分层情况以及液面的形状，具体过程如下：

首先根据药品的物理化学性质来模拟出其在容器内的分布情况，接着根据容器的实际形状计算出容器在竖直背景面的投影形状，再根据容器实际容积与容器投影形状的比例系数来计算容器边界点的坐标，再结合添加的药品的体积计算出分层后每层液体的投影面积S

在容器投影形状上画横线，横线和容器投影的交点与容器底部边界点形成多边形，多边形各个顶点的坐标分别为(x1、y1)、(x2、y2)、(x3、y3)、......、(xn、yn)，计算多边形的面积S＝0.5×|(x1y2-x2y1)+(x2y3-y2x3)+(x3y4-y3x4)+......+(xny1-ynx1)|，比较计算的多边形面积S和S

在容器上再画横线，横线和容器投影的交点与第一层液体分界线的边界点形成多边形，多边形各个顶点的坐标分别为(x1、y1)、(x2、y2)、(x3、y3)、......、(xn、yn)，计算多边形的面积S＝0.5×|(x1y2-x2y1)+(x2y3-y2x3)+(x3y4-y3x4)+......+(xny1-ynx1)|，比较计算的多边形面积S，若|S-S

按照上述方法类推，在容器上再画横线，横线和容器投影的交点与第m-1层液体分界线的边界点形成多边形，多边形各个顶点的坐标分别为(x1、y1)、(x2、y2)、(x3、y3)、......、(xn、yn)，计算多边形的面积S＝0.5×|(x1y2-x2y1)+(x2y3-y2x3)+(x3y4-y3x4)+......+(xny1-ynx1)|，比较计算的多边形面积S和S

根据上述内容得出了每层液体的液面形状，再根据每层各种药品的颜色数据对每层液体颜色进行计算，RGBA颜色叠加的公式如下：

新红色＝(红色1*alpha1+红色2*alpha2+......+红色K*alphaK)/(alpha1+alpha2+......+alphaK)

新绿色＝(绿色1*alpha1+绿色2*alpha2+......+绿色K*alphaK)/(alpha1+alpha2+......+alphaK)

新蓝色＝(蓝色1*alpha1+蓝色2*alpha2+......+蓝色K*alphaK)/(alpha1+alpha2+......+alphaK)

新alpha＝alpha1+alpha2+......+alphaK-alpha1*alpha2*......*alphaK

上式中，红色1、绿色1、蓝色1、alpha1为第一种药品的颜色数据，红色2、绿色2、蓝色2、alpha2为第二种药品的颜色数据，红色K、绿色K、蓝色K、alphaK为第K种药品的颜色数据；

上述计算的每层液体的液面形状和每层液体的颜色构成分层液面数据；

液面绘制：在完成了数据更新和计算后，系统将使用HTML5技术提供的渐变填充方法按照计算得出的分层液面数据和容器形状进行填充绘制。

上述的一种基于Html5技术实现的二维液面分层显示的仿真实验平台，为了更好地反映液体物质的分层情况系统还会根据浑浊系数和悬浮物质数据进行再次填充绘制。这种绘制方式可以呈现出液体物质的分层效果和浑浊效果，从而更加真实地反映出仿真实验的结果。

上述的一种基于Html5技术实现的二维液面分层显示的仿真实验平台，在这个过程中还可以通过引入更多的计算和绘制技术来提高绘制的准确性和逼真程度，例如使用粒子系统来模拟液体表面的波动和涟漪效果，或者使用光线追踪技术来模拟光线在液体表面的反射和折射效果。这些技术应用将使仿真实验平台的体验更加接近真实实验的效果，同时提高实验结果的可视化和可理解性。

上述的一种基于Html5技术实现的二维液面分层显示的仿真实验平台，药品包括溶剂和溶质，记录的物理性质中包括密度、颜色、透明度、相容性、溶解度。

上述的一种基于Html5技术实现的二维液面分层显示的仿真实验平台，对于不规则的容器将其切割为多段形状后再进行数据更新与计算。

本发明的仿真实验平台可以直观地观察到液体物质的分层效果和浑浊效果，从而更加真实地反映出仿真实验的结果。

附图说明

图1为本发明仿真实验平台的流程图。

图2为本发明实施例中药品数据结构表示意图。

具体实施方式

一种基于Html5技术实现的二维液面分层显示的仿真实验平台，通过预先录入的各种药品和容器数据对用户进行仿真实验操作后的容器中的液面进行绘制。

该平台主要包括以下部分：

1、数据预处理：在此阶段，在平台中预先录入各种药品和容器基础数据。这些数据包括但不限于药品的物理性质(例如密度、粘度、相容性、颜色、透明度、溶解度等)、化学性质(例如酸碱度)以及容器的形状数据和实际容积与容器投影形状的比例系数。这些数据将作为绘制液面的基础。

2、仿真实验操作：此阶段主要模拟实际实验操作，使用户可以在平台上进行各种预设的实验操作，这些操作会实时改变容器内的药品数据以及容器的角度数据。具体来说，用户可以通过平台提供的虚拟实验工具，进行药品的添加、移除、混合等操作，同时也可以改变容器的角度和姿态，以便模拟实际实验中的各种情况。

3、数据更新与计算：在用户进行仿真实验操作后，平台会实时更新容器内的药品基础数据以及容器的角度数据，根据这些更新的数据，平台会计算液体物质的分层情况以及液面的形状，具体过程如下：

首先根据药品的物理化学性质来模拟出其在容器内的分布情况，例如密度较大的物质可能会沉在底部而密度较小的物质则可能会浮在顶部，接着根据容器的实际形状计算出容器在竖直背景面的投影形状，再根据容器实际容积与容器投影形状的比例系数来计算容器边界点的坐标，再结合添加的药品的体积计算出分层后每层液体在竖直背景面的投影面积S

在容器投影形状上画横线，横线和容器投影的交点与容器底部边界点形成多边形，多边形各个顶点的坐标分别为(x1、y1)、(x2、y2)、(x3、y3)、......、(xn、yn)，计算多边形的面积S＝0.5×|(x1y2-x2y1)+(x2y3-y2x3)+(x3y4-y3x4)+......+(xny1-ynx1)|，比较计算的多边形面积S和S

在容器上再画横线，横线和容器投影的交点与第一层液体分界线的边界点形成多边形，多边形各个顶点的坐标分别为(x1、y1)、(x2、y2)、(x3、y3)、......、(xn、yn)，计算多边形的面积S＝0.5×|(x1y2-x2y1)+(x2y3-y2x3)+(x3y4-y3x4)+......+(xny1-ynx1)|，比较计算的多边形面积S和S

按照上述方法类推，在容器上再画横线，横线和容器投影的交点与第m-1层液体分界线的边界点形成多边形，多边形各个顶点的坐标分别为(x1、y1)、(x2、y2)、(x3、y3)、......、(xn、yn)，计算多边形的面积S＝0.5×|(x1y2-x2y1)+(x2y3-y2x3)+(x3y4-y3x4)+......+(xny1-ynx1)|，比较计算的多边形面积S和S

根据上述内容得出了每层液体的液面形状，再根据每层各种药品的颜色数据对每层液体颜色进行计算，RGBA颜色叠加的公式如下：

新红色＝(红色1*alpha1+红色2*alpha2+......+红色K*alphaK)/(alpha1+alpha2+......+alphaK)

新绿色＝(绿色1*alpha1+绿色2*alpha2+......+绿色K*alphaK)/(alpha1+alpha2+......+alphaK)

新蓝色＝(蓝色1*alpha1+蓝色2*alpha2+......+蓝色K*alphaK)/(alpha1+alpha2+......+alphaK)

新alpha＝alpha1+alpha2+......+alphaK-alpha1*alpha2*......*alphaK

上式中，红色1、绿色1、蓝色1、alpha1为第一种药品的颜色数据，红色2、绿色2、蓝色2、alpha2为第二种药品的颜色数据，红色K、绿色K、蓝色K、alphaK为第K种药品的颜色数据；

上述计算的每层液体的液面形状和每层液体的颜色构成分层液面数据；

4、液面绘制：在完成了数据更新和计算后，将使用HTML5技术提供的渐变填充方法按照计算得出的分层液面数据和容器形状进行填充绘制。为了更好地反映液体物质的分层情况，系统还会根据浑浊系数和悬浮物质数据进行再次填充绘制。这种绘制方式可以呈现出液体物质的分层效果和浑浊效果，从而更加真实地反映出仿真实验的结果。在这个过程中还可以通过引入更多的计算和绘制技术来提高绘制的准确性和逼真程度，例如使用粒子系统来模拟液体表面的波动和涟漪效果，或者使用光线追踪技术来模拟光线在液体表面的反射和折射效果。这些技术应用将使仿真实验平台的体验更加接近真实实验的效果，同时提高实验结果的可视化和可理解性。

下面结合实例和附图对本发明作进一步的说明：

本实施例中，基于初中化学仿真探究实验项目，用户可以用账号和密码验证登录进入仿真实验平台。在仿真实验平台中可以查看已创建的实验场景或创建新的实验场景。当用户进入实验场景后可以进行仿真实验操作，系统会自动更新容器内的药品数据和容器的角度数据，并将程序运行结果实时反馈在页面上。在此项目中并不限制数据的存储形式，本实施例中使用如图2结构所示将药品的物理化学性质数据以及容器的形状和容积等相关数据存储在配置文件中，需要在项目启动时提前进行加载。在用户进行化学仿真探究实验操作的同时完成数据计算。

本实施例中，提供了一个液面绘制界面，用于显示根据药品和容器数据计算得出的分层液面数据按照容器形状进行填充绘制的情况。具体而言，系统会使用HTML5技术提供的渐变填充方法，按照计算得出的分层液面数据按照容器形状进行填充绘制。同时，系统还会根据浑浊系数和悬浮物质数据进行再次填充绘制浑浊效果。在该界面上，用户可以直观地观察到液体物质的分层效果和浑浊效果，从而更加真实地反映出仿真实验的结果。

上述实施例仅供参考，具体实现方式可以因应用场景不同而有所不同。本发明的技术方案具有较强的适应性，可以应用于不同领域的仿真实验中液体物质的分层液面绘制，并且能够取得良好的效果。