Mohr 圆计算器和二维应力状态转换 - 使用 HTML5

• 下载 MohrsCircleCalculator-master.zip - 6.9 KB
• 从Github下载代码

1. 引言

在力学中，可变形体的力学被称为材料强度学、材料力学，或者更高级的形式，称为固体力学。材料力学研究应力，包括其简单的一维状态，或稍高级的二维应力状态；也可能存在一般的三维应力状态，这涉及到复杂的数学方法进行分析。

您可以在 Github Pages 在线尝试此应用。

.

二维应力状态的特点是具有两个轴（x和y）的二维几何。应力分量通常用其矩形分量表示，即 σ_x、σ_y 和 τ_xy，如下图所示。这里，应力 σ_x 和 σ_y 是正应力分量，τ_xy 是剪应力分量。下图显示了一个微小面积，并标出了应力的矩形分量。

如果x和y轴发生变换，那么这些应力分量也会相应地发生变换，它们的变换方程如下，其中 θ 是微小面积旋转的角度。

存在一个特定的变换轴角度，使得应力分量达到最大值，相应的应力分量称为主应力，σ₁ 和 σ₂。这些主应力可以通过以下公式计算。主应力出现的角度 θ_p 的公式也给出。主应力在表征工程材料的失效理论中起着重要作用。在相应的角度下，剪应力也达到最大值 τ_max。

主应力有一个很好的图形表示，最初由Otto Mohr提出，这被称为Mohr圆。Mohr圆的绘制以正应力分量为x轴，剪应力分量为y轴。图显示了一个典型的二维应力状态的Mohr圆。可以注意到，水平轴代表正应力 σ，垂直轴（正方向向下）代表剪应力 τ。Mohr圆上的每个点代表一个变换后的应力状态，取决于面积元素的取向角 θ。

这个小型应用程序的目的是在屏幕上绘制Mohr圆，给定应力的矩形分量。另一个目的是允许用户更改轴的取向角，并查看变换后的应力分量，以及旋转的微小面积，以及其在Mohr圆上的对应点。所有这些都是用HTML5应用程序编写的，使用了JavaScript Canvas元素。这个小型应用程序可以在支持Canvas元素的浏览器上运行。

2. 程序特性

此软件应用程序允许您

• 指定二维应力状态的三个矩形应力分量 σ_x、σ_y 和 τ_xy；并查看主应力及其角度，以及最大剪应力的相应值，还可以查看Mohr圆。
• 修改二维矩形元素的取向，并查看相应的变换应力分量，以及旋转的矩形元素。还可查看元素取向角函数对应的Mohr圆上的点。

我们将通过实现上述功能的JavaScript代码来检查不同的函数。

3. 代码概述

与大多数HTML5应用程序一样，此代码包含三个部分——HTML部分、CSS部分和JavaScript部分。虽然HTML和CSS部分很容易理解，但JavaScript部分需要一些解释。

3a. 重要变量

作为输入的矩形应力分量存储在三个变量 sigmax、sigmay 和 tauxy 中。主应力存储在 sigma1 和 sigma2 中，最大剪应力存储在 tauMax 中。变换后的应力分量存储在 sigmax1、sigmay1 和 taux1y1 中。变换角度也作为一个变量存储。

3b. 在Canvas上绘图

有两个Canvas分别显示Mohr圆（canvasMohr）和变换后的微小面积（canvasTransform）。

1. 函数 bnComputeClick：计算主应力及其角度。也处理主应力相等的情况，此时角度可以是任意值。注意处理分母为零的情况。
2. 函数 drawMohrsCircle：这是绘制Mohr圆的函数。有趣的是，Mohr圆的位置保持不变，与各个应力值无关。图的比例尺会根据各个应力值而变化。相应地，与主应力相对应的标签也会改变。此函数内部调用函数来绘制静态标签、圆心处的应力值以及第一和第二主应力。圆本身使用HTML5 Canvas的 arc() 方法绘制。文本使用 fillText() 方法在Canvas上绘制。在Canvas上绘图之前，使用 fillRect() 方法将Canvas清除为预定颜色。这样做是为了防止此函数后续调用在Canvas上重叠。在Canvas上绘制的Mohr圆如下图所示。

   

3. 函数 drawRotatingSquare：这是在Canvas上绘制变换后正方形的函数。这是一个旋转的正方形，其旋转角度取决于用户通过Angle滑块指定的角度。正方形本身是使用其四个点 x1, y1, x2, y2, x3, y3, x4, y4 绘制的。这四个点根据指定的角度使用简单的二维旋转公式进行旋转。然后绘制代表正应力和剪应力分量的线和箭头，并绘制与旋转正方形相伴的文本，以便显示用户设置角度对应的正应力和剪应力分量。下图显示了屏幕的这一部分。

   

以上是对用于绘制Mohr圆和变换后微小面积的代码的简要描述。整个代码封装在一个立即调用的函数表达式（IIFE）中。

要启动应用程序，只需在浏览器中调用 index.html。

4. 程序验证

有一些简单的情况需要处理和验证。

1. 应力分量不同且为正的情况，例如，σ_x = 15，σ_y = 5，τ_xy = 4。在这种情况下，可以根据公式找到主应力；这些值都是正的，并且与此应用程序的值匹配。Mohr圆上显示的主应力值与这些值匹配。
2. 应力分量不同且为负的情况，例如，σ_x = -15，σ_y = -5，τ_xy = -4。在这种情况下，主应力值是第一种情况的负值。
3. 应力分量符号不同的情况，例如，σ_x = 15，σ_y = -5，τ_xy = 4。在这种情况下，主应力值符号相反，并与公式进行核对。
4. x和y应力分量相同的 S情况，例如，σ_x = 15，σ_y = 15，τ_xy = 4。在这种情况下，圆心位置可用于验证程序。
5. x和y应力分量相同的 S情况，例如，σ_x = 15，σ_y = 15，且剪应力为零，τ_xy = 0。这代表一种各向同性应力状态，其中每个方向都是主方向。圆仍然绘制，但最左端和最右端的点具有相同的坐标，表明圆只是一个点。
6. 所有应力分量都为零的情况。在这种情况下，应用程序不应出现故障。
7. 输入无效的情况。应用程序应向用户显示错误消息，并优雅地处理这种情况。

5. 值得关注的要点

代码中很可能存在效率不佳的地方。恳请指出任何此类代码缺陷，以便我能从中学习，并在后续版本中改进代码。

代码编写时没有使用JavaScript中的面向对象编程的任何方面。这对我来说很自然，因为我的第一门编程语言是FORTRAN 77。

我使用Visual Studio Code开发了此应用程序。

6. 浏览器兼容性

我在Windows 10机器的Chrome（版本108.0.5359.125）上测试了此应用程序。在此版本上运行良好。我没有在任何其他浏览器上测试过。

6. 结语

本文介绍了一个用于可视化Mohr圆和二维应力转换的简单应用程序。此应用程序中的所有代码都设计为在浏览器上运行。此应用程序旨在帮助学生学习应力转换和Mohr圆的各个方面。如果这个意图至少能让一部分学生受益，我将感到荣幸。

开发有助于增强工程学生理解力的简单应用程序是一项我喜欢的有趣活动。如果您觉得有必要开发一个您感兴趣的工程主题的简单应用程序，请写信给我，我们可以共同开发这样的工具并发布到CodeProject社区。

您也可以在 https://github.com/amarnaths0005/MohrsCircleCalculator 下载代码。

历史

• 2017年1月26日：版本1.0
• 2022年12月19日：版本1.1，根据Jan Herman Kuiper PhD的建议，修改了旋转正方形对应的应力值的显示。

致谢

我想感谢我的同事Vishnu Chander帮助我布局屏幕上的不同元素。同时也要感谢Ravindra Bhat提出的专家意见。