企业官网建设流程全解析

• 图形学
• 前端

Two.js 是一个渲染器无关（renderer agnostic）的二维绘图 API，可在 SVG、Canvas 2D 与 WebGL 三种渲染器之间无缝切换，常被用于动画、数据可视化与创意编程。本文以 wiki/changelog/README.md 这份官方 Changelog 为核心骨架，完整梳理从 2013 年 v0.1.0-alpha 到 2026 年 v0.8.24 的每个版本关键变更，并结合仓库源码（src/目录）验证 API 的实际实现细节。读完本文，你将掌握 Two.js 的核心对象模型（Two.Shape/Two.Path/Two.Group/Two.Text等）、命中检测、生命周期管理、TypeScript 类型与 SVG 解释等能力的演进脉络，并能准确判断每个版本适合承载哪些特性。

文档定位与版本规范

仓库的wiki/changelog/README.md是该项目的官方变更日志，其格式借鉴了 Keep a Changelog 规范，版本号遵循 Semantic Versioning（语义化版本），即主版本.次版本.补丁结构。当前package.json中声明的版本为v0.8.24，这与 Changelog 最新条目（Aug 28, 2026 v0.8.24）一致，说明仓库正处于 0.8 系列的最新稳定迭代中。

Changelog 覆盖了从 2013 年「Proof of Concept built from Three.js」（v0.1.0-alpha）到 2026 年的全部版本，是理解 Two.js 架构决策与能力边界的第一手资料。下面先对最新版本做源码级剖析，再按主题回顾完整演进历程。

最新版本深度解析：v0.8.24 → v0.8.19

v0.8.24（2026-08-28）：类型与路径精度

该版本做了三项关键改动：

• 类型签名拆分：将 TypeScript 类型签名拆分到各自独立的文件中。仓库中src/目录下每个模块（如src/path.js、src/group.js、src/two.js）旁均配套*.d.ts文件（如 src/path.d.ts、src/two.d.ts），package.json的types字段指向src/two.d.ts。从源码结构看，这种"一模块一类型"的布局正是类型签名文件化的直接体现。
• 类型与 JSDoc 拼写修正：提升类型提示质量。
• 路径度量精度：改进Two.Path.length、Two.Path.beginning、Two.Path.ending的精度（感谢 @Xuepoo 的贡献）。这三个属性用于沿路径的动画插值，其精度直接影响路径上运行动画的流畅度。

v0.8.23（2025-12-22）：事件与 dispose 测试

• Two.Event私有 getter 放宽限制，便于外部访问。
• 新增Two.Shape.dispose方法。源码 src/shape.js 中该实现先调用父类dispose()以「保留渲染器类型并解绑事件」。
• 为dispose系列方法新增测试套件，对应测试脚本 tests/suite/dispose.js，并已挂载进 tests/index.html 与 tests/noWebGL.html 两个测试页面。

v0.8.22（2025-12-03）：曲线细分、平滑与命中检测

这是功能密度很高的一版，引入了多项与路径编辑、交互相关的能力：

• Two.Path.subdivide保留曲线：改进后的subdivide会通过填充Two.Anchor.controls属性来保留曲线形状。源码 src/path.js 中，subdivide(limit)先调用_update()，然后遍历vertices，在每个锚点之间插入中点 Anchor，并区分子路径起点（command === Commands.move）做特殊处理。
• 新增Two.Path.smooth命令：源码 src/path.js 显示其完整配置项——options.type支持'continuous'（默认）、'asymmetric'、'catmull-rom'、'geometric'四种平滑算法；options.from/options.to指定顶点区间（支持数字索引、负数回绕或直接传入 Anchor 对象）；options.factor供局部算法使用。平滑结束后会置_automatic = false并触发顶点/长度重算标志。
• 命中检测三件套：新增Two.Path.contains、Two.Group.contains、Two.Shape.contains。Two.Shape.contains的源码实现（src/shape.js）会先检查visible与opacity（ignoreVisibility为true时跳过），再基于getBoundingClientRect()做包含判断，并支持tolerance像素容差。
• Two.getShapesAtPoint与Two.Group.getShapesAtPoint：带可见性与过滤选项的批量点选。Two#getShapesAtPoint（src/two.js）直接委托给根场景scene.getShapesAtPoint；Two.Group#getShapesAtPoint（src/group.js）完整实现了选项解析：mode（'all'返回所有相交图形、'deepest'或deepest别名只返回最上层）、visibleOnly（默认true）、includeGroups、filter谓词函数、tolerance像素容差、precision曲线细分精度以及fill/stroke覆盖开关，最终通过Group.VisitForHitTest遍历层级树，按"前到后"顺序返回结果。

v0.8.21（2025-10-01）：描边衰减与安全合规

• 描边衰减（stroke attenuation）：为Two.Path、Two.Group、Two.Points、Two.Text统一新增strokeAttenuation属性，用于随缩放调整描边宽度。测试 tests/suite/core.js 覆盖了Two.Path.strokeAttenuation的读写往返，Two.Group（tests/suite/core.js）与Two.Text亦有对应用例。
• 全部fromObject方法的类型签名改进，便于类型提示。
• 曲线细节（curve details）精度提升。
• 工程治理层面：新增 SECURITY.md、wiki/incident-response-plan/README.md、wiki/privacy/README.md，启用 Code Scanning，并补充安全漏洞相关测试。

v0.8.20（2025-09-08）：Image 图形与系统性 dispose

• Two.Element.copy失败时优雅降级，避免异常中断。
• 新增Two.Image图形：它继承自Two.Rectangle，对应源码 src/effects/image.js，让位图可以直接作为场景图节点参与变换与命中检测。
• Two.RoundedRectangle构造函数扩展为接受Two.Vector作为radius，支持 x/y 两个方向独立圆角半径。
• dispose 家族补齐：Two.Element.dispose、Two.Path.dispose、Two.Group.dispose、Two.Text.dispose、Two.Points.dispose、Two.ImageSequence.dispose、Two.Sprite.dispose全部就位。
• Two.release增强：按渲染器类型执行各自的资源释放。源码 src/two.js 中可见其会清理 WebGL 效果（obj._renderer.effect = null）以及 Canvas 渲染器的缓存 context（delete obj._renderer.context）。
• Two.ImageSequence实例化时所有参数均可选。
• 修复Two.Line.left/Two.Line.right的命令设置问题。

v0.8.19（2025-06-27）：渲染钩子与虚线类型

• 改进Two.Path.dashes、Two.Points.dashes、Two.Text.dashes的 TypeScript 类型。
• 改进Two.Element.renderer属性类型。
• 新增Two.Element.renderer.onBeforeRender与onAfterRender：在渲染前后提供上下文级操作钩子，适合自定义绘制前状态保存与绘制后还原。

v0.8.18 → v0.8.11：类型、释放与渲染器修复

v0.8.18（2025-04-08）

• TypeScript 类型做到正确继承且无报错。
• 修复Two.release对fill、stroke属性的存在性检查。

v0.8.17（2025-03-17）

• 基于公开/私有属性重写 TypeScript 类型。
• 新增Two.Gradient.dispose与Two.Texture.dispose，确保从场景图中正确移除效果对象。
• 命名变更：Two.nextFrameID更名为Two.NextFrameId。源码中Two.NextFrameId静态属性（src/two.js）与运行时Two.NextFrameId = raf(loop)（src/two.js）并存，这一改名让常量命名与Two.Constants体系保持一致。
• Two.release现在会同时解绑对象的效果（如Two.Texture、Two.Gradient）。
• 修复Two.Shape变换的运算顺序。

v0.8.16（2025-02-13）

• Two.Utils.shim移至Two.Utils.polyfill（原 shim 保留但转为内部用途，避免循环依赖）。
• Two.CanvasRenderer获得对 skia-canvas 的兼容支持，可在 Node 环境中离屏渲染。
• Two.Path.subdivide准确修正更新列表中的最终顶点。
• Two.ZUI.reset更新表面以反映重置后的朝向。
• Two.Group.getBoundingClientRect(shallow)正确推算 min/max 值以计算尺寸。

v0.8.15（2024-12-31）

• CanvasPolyfill对象并入Two.Utils（src/utils/canvas-polyfill.js），消除循环依赖。
• Two.Collection._events与Two.Children.ids改为不可枚举，使Array.filter、Object.keys等操作更顺滑。
• fromObject静态方法与copy实例方法覆盖全部Two.Element及其子类，并新增toObject方法测试。这形成了完整的对象序列化/反序列化闭环，是状态保存与克隆的重要基础。
• Two.WebGLRenderer正确处理负 scale 值。
• Two.Path.noStroke、Two.Text.noStroke及其派生方法现在同时把 stroke 颜色设为"none"且线宽置 0。
• 修复Two.Arc.width/Two.Arc.height的 flag 行为。

v0.8.14（2024-06-10）

• objectBoundingBox应用在各渲染器间保持一致。
• 修补Two.SVGRenderer的纹理缩放。
• 更新 TypeScript 定义（感谢 @kevin-nano）。

v0.8.13（2024-02-22）

• 新增Two.Text.direction：支持从左到右或从右到左渲染文本。
• Two.WebGLRenderer纹理清晰度/抗锯齿改进。
• Two.Text.baseline在各渲染器间渲染一致性改进。

v0.8.12（2023-10-16）

• 图片请求增加"no-referrer"策略，避免跨域引用的信息泄露。
• extras 适配Two.MatrixAPI 变更。
• noFill()/noStroke()系列方法统一输出"none"而非"transparent"，覆盖Two.Path、Two.Text、Two.Points。

v0.8.11（2023-08-07）

• 修复Two.Anchor.left/Two.Anchor.rightgetter（感谢 @eatgrass）。
• Two.Path/Two.Group/Two.Text的getBoundingClientRect正确处理经矩阵旋转后的投影点。
• Two.Text在 SVG 渲染器中直接渲染而非放入<defs />。
• Two.SVGRenderer释放<defs />中未使用的效果。
• 覆写Two.Collection.map使其行为更明确。
• 改进渲染器与Two基类的类型定义。

v0.8 时代的架构变革：ES6 化与模块化

v0.8.0（2022-01-10）：全面 ES6 类化

这是 0.8 系列的奠基版本，一次性将整个核心对象体系从原型式改写为 ES6 class，包括：Two.Element、Two.ImageSequence、Two.Sprite、Two.Texture、Two.Stop、Two.RadialGradient、Two.LinearGradient、Two.Gradient、Two.Star、Two.RoundedRectangle、Two.Rectangle、Two.Polygon、Two.Points、Two.Line、Two.Ellipse、Two.Circle、Two.ArcSegment、Two.Path、Two.Group、Two.Text、Two.Shape、Two.Matrix、Two.Registry、Two.Children、Two.Collection、Two.Events、Two.Anchor、Two.Vector。这一改造为后续fromObject/copy/dispose体系的统一实现铺平了道路（对应类文件分散在 src/ 及 src/shapes/、src/effects/ 目录）。

同一版本中，Two.interpret能正确地把类与data-*属性继承到 SVG 的<g />标签上（感谢 @elShiaLabeouf）。

v0.8.5（2022-03-29）：导出映射

• Two.Gradient增加 parent 参数传递到Two.Stop.clone。
• 破坏性变更：引入 export maps，extras 改为按路径导入，例如import { ZUI } from 'two.js/extras/zui.js'。这正是仓库 extras/js/zui.js 与 extras/jsm/zui.js 双份构建（CJS + ESM）的原因。

v0.8.10（2022-06-09）与 v0.8.7（2022-05-09）等后续微版本

• Two.Arc加入/extras目录（extras/js/arc.js、extras/jsm/arc.js）；/extras/js/zui.js改为 ES6 兼容写法；extras 模块移出自动生成文档。
• 修复Two.Path.ending在Two.Path.curved = true时的偏差；Two.Group、Two.Text属性在类型中公开；类型增加重载方法。
• v0.8.3 改进Two.Element.className的 flag 与classList构建；v0.8.2 移除#私有变量声明以提升 EcmaScript 兼容性、修复beginning/ending在Two.Anchor.relative = false时的插值、新增Two.Utils.read.path(string)解析 SVGd属性字符串、新增Two.Shape.worldMatrix。

v0.7 系列：SVG 解释、ZUI 与效果体系成熟

v0.7.0（2020-01-22）：大版本功能井喷

• Two.makeCircle/Two.makeEllipse暴露resolution参数；Two.Circle/Two.Ellipse在_update时重算控制点并让顶点数量周期化。
• WebGL 渲染器通过 uniform 构造平面并去除重复渲染调用、解包 scale 对象、移除冗余的gl.colorMask调用与Two.Utils.toFixed调用。
• Two.Shape.clone在matrix.manual = true时克隆矩阵；Two.Group.mask在 WebGL 渲染器中的渲染修复。
• Two.Group.closed、Two.Group.curved、Two.Group.automatic支持向子级下传样式；Two.Group.add增加重复项检查。
• Two.makeArrow新增三角箭头工具方法（感谢 @mike168m）。
• 虚线动画：Two.Path.dashes.offset与Two.Text.dashes.offset在所有渲染器上支持虚线描边动画。
• Two.Matrix.toArray拆分为 2D 变换数组与纯对象（JSON）两种表示，并新增Two.Matrix.toTransformArray。
• WebGL 渲染器更稳健地支持位图内容；新增offscreenElement构造选项以兼容 WebWorker。
• 新增Two.Shape.position访问器（等价于Two.Shape.translation），方便与 matter.js 等物理引擎对接。
• Two.Path.dashes与Two.Text.dashes在 WebGL 与 Canvas 渲染器落地。

v0.7.1（2021-01-12）～ v0.7.13：SVG 互操作与文本

• Two.AutoCalculateImportedMatrices控制 SVG 变换导入方式；Two.load会在<head />中挂载隐藏 DOM 元素以保证getComputedStyles一致；Two.Text.className修复；Two.interpret支持科学计数法、<use />标签、基础文本；Two构造函数新增fitted参数；Two.Text.decoration在 Canvas/WebGL 渲染器生效。
• v0.7.3 暴露Two.Shape.renderer便于访问底层 SVG 元素；Two.Group.visible成为组自身属性不下传给子级；v0.7.4 新增Two.Shape.skewX/Two.Shape.skewY并成功导出extras/（CJS + ESM）。
• v0.7.6 新增Two.Path.mask/Two.Text.mask属性、<clipPath />与<image />的 SVG 解释、<defs />解释；v0.7.8 将types.d.ts作为模块 shim。
• v0.7.9 统一Two.load/Two.interpret的viewBox应用；Two.Rectangle.origin作为反向锚点定位；Two.Path.toObject对象化fill/stroke中的Two.Texture/Two.Gradient；Two.Points与Two.makePoints覆盖全部渲染器；Two.release行为对齐Two.remove。
• v0.7.10 修复Two.Points空顶点问题；v0.7.12 允许移除Two.Group/Two.Path/Two.Points的 mask，并简化Two.Points.vertices管理。
• v0.7.13 改进 SVG 渐变解释、url()解包、Two.Gradient.units落地（默认objectBoundingBox），解释得到的渐变复用进<defs />。

v0.7.0-beta 系列（2018）

beta.1 引入Two.Commands.arc、dashes属性、Two.ZUI（经/extras引入）、Two.Group.length、基于距离的beginning/ending计算、ES6 兼容的./build/two.module.js、className（配合 CSS 样式化 SVG）以及Two.Events.resize绑定到渲染器setSize。beta.2 更新对 webpack 与 node-canvas 2.0.0+ 的兼容；beta.3 让 Canvas 渲染器支持虚线与非虚线路径、强制Two.Rectangle具有四个顶点。

v0.6 / v0.5 / v0.4 / v0.3 / v0.2：从文本、渐变到核心场景图

v0.6.0（2016-02-09）

• Two.CanvasRenderer.ctx.imageSmoothingEnabled改为非废弃调用方式。
• Two.Group.mask在 SVGRenderer 中正确挂载 DOM。
• require导入兼容 require.js。
• 新增Two.Text：程序化文本绘制。

v0.5.0（2015-10-01）：效果与基础图形成型

• two.interpret支持导入 SVG 渐变、椭圆弧（Elliptical Arcs）；新增Two.Utils.xhr与two.load异步加载 SVG。
• 新增效果类：Two.Gradient、Two.LinearGradient、Two.RadialGradient。
• 新增基础图形：Two.Line、Two.Rectangle、Two.RoundedRectangle、Two.Ellipse、Two.Polygon、Two.Star、Two.ArcSegment、Two.SineRing。
• 破坏性变更：Two.Polygon更名为Two.Path。
• Two.Group.children改为继承Two.Collection（数组行为），映射仍可通过Two.Group.children.ids访问。

v0.4.0（2014-07-22）：遮罩与场景图增强

• Two.Group.mask与Two.Polygon.clip实现裁剪蒙版；Two.Group拥有独立opacity。
• Two.noConflict非破坏式命名冲突处理；Two.interpret分解transform属性、兼容 Inkscape 输出。
• Two.Group.getById/Two.Group.getByClassName便捷选择；classList挂到所有Two.Shape。
• Two.Polygon.getPointAt、Two.Polygon.length/_updateLength建立路径长度度量。
• 渲染器与场景图重构：内部事件（_events）改为标志（_flags）、_update+flagReset机制、渲染器解耦独立、_matrix.manual覆盖变换默认行为。

v0.3.0（2013-10-25）：多渲染器基础

• 支持传入domElement构造实例；overdraw布尔选项覆盖 Canvas 与 WebGL 渲染器。
• Two.Anchor正式登场，代表所有锚点；Two.Utils.Collection可观察数组类。
• Canvas/WebGL 渲染器自动高 DPI 支持；Two.Group.center/corner方法；Two.Matrix.inverse；Two.Events.insert/Two.Events.remove；AMD 加载器兼容。

v0.2.0（2013-05-03）

首个 alpha 正式发布。更早的 v0.1.0-alpha（2013-01-29）标注为「基于 Three.js 构建的概念验证」，这也解释了 Two.js 与 Three.js 在场景图、矩阵、渲染器分层等设计理念上的渊源。

按能力域梳理：跨版本的演进主线

除了按时间线追踪版本，从主题维度看，Two.js 的能力演进呈现几条清晰主线：

命中检测与交互（Hit Testing）

从 v0.4.0 的getPointAt，到 v0.8.22 全面补齐contains与getShapesAtPoint，命中检测逐渐形成三层 API：

• 单图形判断：shape.contains(x, y, options)（src/shape.js），支持ignoreVisibility与tolerance；
• 层级遍历点选：group.getShapesAtPoint(x, y, options)（src/group.js），支持visibleOnly、includeGroups、mode: 'all' | 'deepest'、filter、precision；
• 全局入口：two.getShapesAtPoint(x, y, options)（src/two.js）委托给根场景。

这些 API 均约定使用世界坐标（即渲染器输出的像素空间，如鼠标clientX/clientY减去画布偏移并按设备像素比换算），详见方法注释中的nota-bene说明。

生命周期与资源释放（dispose / release）

从 v0.3.0 的remove/clear，到 v0.8.20 / v0.8.23 的dispose全家族，再到 v0.8.17 的 effect 解绑与 v0.8.20 的渲染器级释放，Two.js 形成了"移除场景图节点 → 解绑事件与效果 → 按渲染器清理 GPU/画布资源"的完整生命周期闭环，配套测试见 tests/suite/dispose.js。

TypeScript 类型体系

v0.7.3 首次加入声明文件 → v0.7.8 转为模块 shim → v0.8.0 起的逐类精修 → v0.8.15 的fromObject参数关联 → v0.8.24 的签名独立拆分。仓库按模块拆分的.d.ts文件（如 src/two.d.ts、src/group.d.ts）与tsconfig.types.json、tests/typescript/目录共同支撑类型质量，可通过npm run types:check运行tsc校验。

效果体系（Effects）

v0.5.0 引入渐变 → v0.7.0-alpha 加入Two.Texture/Two.Sprite/Two.ImageSequence→ v0.7.6 的<clipPath />/<image />解释 → v0.7.13 的Gradient.units→ v0.8.20 的Two.Image。效果对象现在是场景图中的一等公民，见 src/effects/ 目录下的gradient.js、linear-gradient.js、radial-gradient.js、image.js、image-sequence.js、sprite.js、texture.js、stop.js。

SVG 解释与互操作（interpret / load）

从 v0.4.0 分解 transform、v0.5.0 导入渐变与椭圆弧，到 v0.7.x 的<use />、科学计数法、viewBox统一、类与data-*继承，再到 v0.8.0 的类继承，Two.interpret已成为相当完整的 SVG 导入器，配套测试见 tests/suite/svg-interpreter.js 与 tests/images/interpretation/ 中的各类 SVG 用例（如circle.svg、linear-gradient.svg、compound-path.svg）。

版本时间线速查表

如何配合源码继续研究

• 阅读核心实现：类实现集中在 src/（element.js、shape.js、path.js、group.js、text.js、matrix.js、vector.js、two.js），基础图形在 src/shapes/，效果在 src/effects/，渲染器在 src/renderers/。
• 运行测试：浏览器打开 tests/index.html（完整套件，包含 WebGL 用例）或 tests/noWebGL.html（纯 SVG/Canvas 用例），QUnit 会按 tests/suite/ 下的脚本逐项执行；其中dispose.js、core.js、hit-test.js、shapes.js、svg-interpreter.js等分别覆盖了 Changelog 中提到的核心能力。
• 类型校验：执行npm run types:check（对应tsc --project tsconfig.types.json），验证.d.ts声明的正确性。
• 构建与文档：npm run build生成build/two.js与build/two.module.js；npm run docs:dev以 VuePress 在本地启动 wiki 站点，Changelog 正是该站点的一个页面。

结语

回顾 Two.js 的完整 Changelog，可以看到一条清晰的演进路径：从 Three.js 的概念验证出发，先打好Two.Anchor/Two.Vector/Two.Matrix的几何基座，再铺开多渲染器（SVG / Canvas / WebGL）、效果体系（渐变、纹理、精灵、序列帧）、SVG 互操作、文本与基础图形，最后在 0.8 时代完成 ES6 类化、类型系统精修、命中检测与生命周期治理。理解这份 Changelog，等于拿到一张 Two.js 能力地图——无论是挑选适合自己项目的版本，还是在使用某个 API 时追溯其设计初衷，都能从中找到答案。

• 图形学
• 前端