npm 包 angle-iterate 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

angle-iterate 是一个基于 JavaScript 语言的 npm 包，它提供了一个能够在 2D 平面内，沿着一定角度旋转的迭代算法。具有极高的灵活性和可定制性，可以帮助前端开发者快速生成各种有趣的几何图形和视觉效果。

安装

可以使用 npm 或者 yarn 来安装 angle-iterate。

使用 npm 安装 angle-iterate

npm install angle-iterate

使用 yarn 安装 angle-iterate

yarn add angle-iterate

使用

引用

使用 CommonJS 或者 ES6 的语法引用 angle-iterate。

// CommonJS
const iterate = require('angle-iterate');

// ES6
import iterate from 'angle-iterate';

API

`iterate(config: Object): Array<Array<number>>`

angle-iterate 提供的唯一 API，接收一个配置对象，并返回一个包含多个点坐标数组的二维数组。

配置项

属性名	类型	默认值	描述
`startPos`	`Array<number>`	`[0, 0]`	迭代的起始点坐标
`iterations`	`number`	`3`	迭代次数
`lineLength`	`number`	`20`	每段线段的长度
`angle`	`number`	`0`	第一条线段与 X 轴正方向之间的夹角，单位为度数
`angleMode`	`'degrees'` 或 `'radians'`	`'degrees'`	角度值的类型
`branchingFactor`	`number`	`2`	每个节点分支的数量
`variation`	`number` 或 `(index: number) => number`	`0`	控制线段长度变化的因子，请看下面的具体说明
`angleVariation`	`number` 或 `(index: number) => number`	`0`	控制角度随机偏差的因子，请看下面的具体说明
`fullCircle`	`boolean`	`false`	是否围绕原点旋转一定角度
`randomSeed`	`number`	`undefined`	随机数种子

variation 属性

variation 属性用于控制线段长度的变化规律。它的值可以是一个数字，也可以是一个接受节点 index 参数的函数，返回一个数字。默认值为 0，表示线段长度不变。

如果 variation 的值为正数，那么每一级的线段长度都会比上一级增加 variation。例如，设置 variation: 10，则一条长为 20 的线段将被分成两段，长度分别为 20 和 30。

如果 variation 的值为负数，那么每一级的线段长度都会比上一级减小 variation。例如，设置 variation: -5，则一条长为 20 的线段将被分成两段，长度分别为 20 和 15。

angleVariation 属性

angleVariation 属性用于控制角度偏移量的规律。它的值可以是一个数字，也可以是一个接受节点 index 参数的函数，返回一个数字。默认值为 0，表示角度不变。

如果 angleVariation 的值为正数，那么每一级的角度都会基于上一级角度增加 angleVariation。例如设置 angleVariation: 10，则一条初始角度为 0 的线段将偏转为 10，20，30...依此类推。

如果 angleVariation 的值为负数，那么每一级的角度都会基于上一级角度减小 angleVariation。例如设置 angleVariation: -5，则一条初始角度为 0 的线段将偏转为 -5，-10，-15...依此类推。

示例

生成一个以画图板的左下角为起点，围绕起点逆时针旋转 30 度，共分 4 层，每层 4 条线段的分形图形。各个线段的长度随着层数的增加而变短，变化率为 0.6。每个节点的分支数量为 3，各个节点上两条分支的角度相差 72 度，第三条分支角度随机偏移不超过 30 度。

-- -------------------- ---- -------
----- ------ - -
  --------- --- -----
  ----------- --
  ----------- ----
  ------ ----
  ---------------- --
  ---------- -----
  --------------- ----- -- -
    ------ -------------- - ---- - ---
  --
--

----- ----- - ----------------

-------------------
-- ---
-
  - --- ----- --- ----- --------- --------- --- -------- --
  - --- --------- -------- --------- ------- --------- -------- --------- -------- --------- -------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- -------- --------- --------- -------- --------- ---------- --------- ---------- --------- --------- -------- --
  - --------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- --------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- ------- ---------- --------- ---------- --------- ---------- -------- --------- --------- ---------- --------- ---------- ---- --
  - ---------- ----- ---------- --------- ---------- --------- ---------- -------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- --------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- -------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- -------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- --------- --------- ---------- -------- ---------- --------- ---------- -------- -
-
--

总结

angle-iterate 是一个非常有趣和有用的 npm 包，它提供了一个原生 JavaScript 实现的迭代算法，可以帮助前端开发者快速生成各种有趣的几何图形和视觉效果。通过本文的介绍和示例，你应该可以掌握如何使用 angle-iterate 创建自己的分形图形，并且能够通过调整各种参数来探索它所提供的灵活性和可定制性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055cb681e8991b448da34f