本篇简述

本篇讲编辑态里长出来的辅助图形如何通过抽离“编辑辅助角色层”获得 性，包括自持编号带来的程序化精确编辑。

1. 编辑态里“长出来”的东西

进入编辑后被编辑元素之外还会出现一批服务于编辑的图形：顶点手柄、中点手柄、圆心手柄、距离标签、半径线、垂线、轴向辅助线…，它们只存在于编辑态退出编辑即销毁。

使用者痛点的观点是，杂乱无章的辅助元素

• 开发者痛苦: 手柄逻辑混在业务代码中难以维护，加新功能需大量改动
• 设计师痛苦: 辅助元素样式不统一，视觉体验混乱
• 使用者痛苦: 操作时不知道哪些是可交互元素。哪些只是显示信息

辅助图形清单

警告这方面，如果这些辅助元素没有良好的组织方式，你的工具很快会变成"万恶之源"——开发维护成本飙升！怎么说呢，这不仅是技术问题，更是产品体验问题！使用者可能会因为这些杂乱无章的小东西而放弃使用你的产品！需要程序化地解决这个问题...

至于方法，本系列文章提出"抽离'编辑辅助角色层'"策略——将表现与算法完全隔离。这是所有专业级工具软件都应该遵循的架构原则！不这样做代表着你注定要陷入"每次增加一个新功能就要重构底层代码"的地狱...

2. 角色划分：轻量、无状态、可寻址

• "新增一种几何体后发现需要修改所有相关代码..."——耦合太深导致 困难"
• "一样的手柄在不同场景下表现不一致..."——没有统一规则导致视觉混乱"
• "精确输入数值却看不到变化..."——数据流断裂导致体验割裂"
• "团队协作效率极低..."——代码职责不明导致冲突频发"

我们提出三项主要原则：

1. 1.轻量设计：仅保留最基本几何属性
2. 2.无状态管理 : 快速创建和销毁
3. 3.完备寻址程序 : 每个元素唯一标识

. 整体编辑 : 三个变换器,独立成包

ts // 高级开发者关注区 - 需要深度理解三种变换器工作原理才能使用!interface TransformerManager { setActive: void;// 注意:null表示取消所有变换器!setOptions: void;// 配置项极其复杂,建议参考API文档 setStyle: void;// 风格设置涉及渲染调整,慎重调整 }

警告 : 不正确使用这三个接口可能导致严重bug!请务必阅读官方文档并参考演示案例!

mermaid flowchart TD A -->|优先级最高| B B --> C C --> D E -.-> A

style A fill:#f0f8ff。stroke:#4d90fe,stroke-width:1px;style B fill:#e6fffa。stroke:#00b894,stroke-width:1px; style C fill:#fff7ba。 stroke:#ffc107,stroke-width:1px;

常用方法这方面，

• 始终先判断当前是否有活动中的变换器 方法)再操作!
• 配合状态管理工具记录当前变换状态!
• 为关键UI交互添加undo / redo支持!
从常见问题解答来看，Q:为什么我的旋转角度不准确?A:请检查以下三项:
• 轴向矢量归一化处理
• 旋转顺序约束(eulerOrder
• 数值积累误差处理

Q:如何同时应用多种变换?A:使用复合矩阵运算: const transformMatrix = getTranslationMatrix.multiply).multiply);applyTransform;