在前端开发中，我们有时需要进行复杂的计算来完成某些视觉效果。在实现三角形视觉效果时，大多数情况下都会需要进行长宽比计算、角度计算等等，这些计算都相对繁琐。在这个时候，npm包big-triangle就能方便地帮助我们完成这些计算。
1. 安装big-triangle
在命令行中使用以下命令安装big-triangle：
npm install big-triangle --save
2. 使用big-triangle
使用big-triangle，我们可以轻松地计算三角形的各种参数，例如：
2.1 计算第三个点坐标
const bigTriangle = require('big-triangle');
const A = { x: 0, y: 0 };
const B = { x: 0, y: 5 };
const C = bigTriangle.calcC(A, B, 90);
// 会输出 { x: -5, y: 0 }这里我们通过 bigTriangle.calcC 方法计算出了三角形第三个点的坐标，其中参数A和B为三角形中已知的两个点，最后一个参数为C点与B点连线与水平线的夹角。
2.2 计算三角形面积
const bigTriangle = require('big-triangle');
const A = { x: 0, y: 0 };
const B = { x: 0, y: 7 };
const C = { x: 5, y: 0 };
const area = bigTriangle.calcArea(A, B, C);
// 会输出 17.5这里我们使用 bigTriangle.calcArea 方法计算了三角形ABC的面积，其中参数A、B、C为三角形的三个顶点坐标。
2.3 计算角度
const bigTriangle = require('big-triangle');
const A = { x: 0, y: 0 };
const B = { x: 0, y: 7 };
const C = { x: 5, y: 0 };
const angle = bigTriangle.calcAngle(B, A, C);
// 会输出 90这里我们通过 bigTriangle.calcAngle 方法计算了三角形BAC与水平线的夹角，其中参数B、A、C分别为三角形的三个顶点坐标。
3. 示例代码
在前面的例子中，我们已经演示了big-triangle的基本使用方法，下面给出一些高级示例：
3.1 渐变三角形
-- -------------------- ---- ------- ----- ----------- - ------------------------ ----- - - - -- -- -- - -- ----- - - - -- -- -- - -- ----- - - - -- -- -- - -- ----- ----- - ------------------------ -- --- ----- ---- - ----------------------- -- --- ----- -------------- - ----------------------------- --------------- ------ - ----- --------------- ------ - ----- --------------- ------ - - - ----- --------------- ------------ ----------------------------------- - ---------------
这里我们通过 bigTriangle.calcAngle 和 bigTriangle.calcArea 方法，分别计算出了三角形BAC与水平线的夹角和三角形ABC的面积。然后将这些计算结果应用在CSS中，创建出一个渐变的三角形背景。
3.2 透视
-- -------------------- ---- ------- ----- ----------- - ------------------------ ----- - - - -- -- -- - -- ----- - - - -- -- -- - -- ----- - - - -- -- -- - -- ----- - - - -- -- -- - -- ----- -- - ---- ----- -- - ---- ----- - - - -- ---- -- ---- -- -- -- ----- - - - -- ---- -- ---- -- -- -- ----- - - - -- ---- -- ---- -- -- -- ----- - - - -- ---- -- ---- -- -- -- ----- - - - -- ---- -- ---- -- -- -- ----- - - - -- ---- -- ---- -- -- -- ----- - - - -- ---- -- ---- -- -- -- ----- - - - -- ---- -- ---- -- -- -- ----- ------- - ----------------------- -- --- ----- ------- - ----------------------- -- --- ----- ------- - ----------------------- -- --- ----- ------- - ----------------------- -- --- ----- ------- - ----------------------- -- --- ----- ------- - ----------------------- -- --- ----- ------- - ----------------------- -- --- ----- ------- - ----------------------- -- --- ----- ------- - ----------------------- -- --- ----- ------- - ----------------------- -- --- ----- ------ - ------ ----- ------ - ------- ----- ---------- - --- - ------ - --- ----- ---------- - --- - ------ - --- ----- ------ - ---------- ---------- -- -- -- -- ---------- -- -- -- -- -- -- -------------- -------------- -- - --- ------------------------------------------------------ - -------
这里我们通过big-triangle，计算了一个透视效果。需要注意的是，这个示例使用了3D坐标来计算三角形ABCDEF和ABCDKL的面积，以及三角形AEFL、BEFL、CFL、DFL和AFR、BFR、CFR、DFR的面积，然后将这些面积比例关系应用在CSS中，创建出一个透视效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554cb81e8991b448d1fd6