# 形状创建工具

形状创建工具（ShapeTool）由 @tx3d/extension 包提供。

import { ShapeTool, ShapeToolModel } from '@tx3d/extension';

// 参数
let params = {

    shapeModel: ShapeToolModel.CREATE_LINE,  // 当前模式
    isShowArea: true,           // 是否显示面
    isShowAssist: true,         // 是否显示辅助信息
    adsorbThreshold: 1,         // 吸附的距离阈值
    curvePointDistance: 0.1,    // 曲线分段距离
    ellipseSegments: 64         // 椭圆分段数
};

// 创建工具
let tool = engine.toolManager.addTool(ShapeTool, params);

// 激活工具
engine.toolManager.activateTool(tool);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

提示

形状创建工具参数，详见ShapeToolParameters。

# 属性

🌏 shapeModel 设置工具模式

tool.shapeModel = ShapeToolModel.CREATE_LINE;

🌏 isShowArea 是否显示面（只有多边形椭圆矩形生效）

tool.isShowArea = true;

🌏 isShowAssist 是否显示辅助信息

tool.isShowAssist = true;

🌏 adsorbThreshold 吸附阈值

tool.adsorbThreshold = 0.1;

提示

吸附阈值表示的是当前点距离目标多少距离的时候自动吸附上去，值越大吸附的灵敏度越高。

🌏 curvePointDistance 曲线分段距离

tool.curvePointDistance = 0.1;

提示

只对曲线生效表示多少的距离增加一个节点节点越多曲线越平滑

🌏 ellipseSegments 椭圆分段数

tool.ellipseSegments = 64;

提示

只对椭圆生效表示椭圆有多少个节点节点越多曲线越平滑

🌏 linePoints 线段数据

tool.linePoints; // 获取线段数据

🌏 curvePoints 曲线数据

tool.curvePoints; // 获取曲线数据

🌏 polygonPoints 多边形数据

tool.polygonPoints; // 获取多边形数据

🌏 rectanglePoints 矩形数据

tool.rectanglePoints; // 获取矩形数据

🌏 ellipsePoints 椭圆数据

tool.ellipsePoints; // 获取椭圆数据

# 事件说明

说明

事件参数
pathIndex 代表哪一条路径
points 坐标点

tool.addEventListener(ShapeToolEvent.EVENT_RECTANGLE_DRAW_END, (event) => {
    console.log("矩形绘制完成事件：" + "pathIndex:" + event.pathIndex + ":points:" + JSON.stringify(event.points))
});

1
2
3

EVENT_LINE_ADD_POINT; //直线添加点
EVENT_LINE_REMOVE_POINT; //直线删除
EVENT_LINE_UPDATE; //直线预状更新
EVENT_LINE_PREVIEW_UPDATE; //直线预览形状更新添加临时点时是预览更新

EVENT_POLYGON_ADD_POINT; //多边形添加点
EVENT_POLYGON_REMOVE_POINT; //多边形删除
EVENT_POLYGON_UPDATE; //多边形形状更新
EVENT_POLYGON_PREVIEW_UPDATE; //多边形预览形状更新

EVENT_RECTANGLE_UPDATE; //矩形形状更新
EVENT_RECTANGLE_DRAW_END; //矩形绘制完成

EVENT_ELLIPSE_UPDATE; //椭圆形状更新
EVENT_ELLIPSE_DRAW_END; //椭圆绘制完成

EVENT_CURVE_ADD_POINT; //曲线添加点
EVENT_CURVE_REMOVE_POINT; //曲线删除
EVENT_CURVE_UPDATE; //曲线形状更新
EVENT_CURVE_PREVIEW_UPDATE; //曲线预览形状更新

# 使用说明

说明

关于编辑器模式。
每个图形都有两种编辑方法一种是创建一种是编辑每个图形都有各自对应的创建和编辑模式
直线对应模式：CREATE_LINE（直线创建）EDIT_LINE（直线编辑）
曲线对应模式：CREATE_CURVE（曲线创建）EDIT_CURVE（曲线编辑）EDIT_CURVE_RADIAN（曲线弧度编辑）
多边形对应模式：CREATE_POLYGON（多边形创建）EDIT_POLYGON（多边形编辑）
矩形对应模式：CREATE_RECTANGLE（矩形创建）EDIT_RECTANGLE（矩形编辑）
椭圆对应模式：CREATE_ELLIPSE（椭圆创建）EDIT_ELLIPSE（椭圆编辑）
支持撤销和重做功能。

# 关于吸附对齐说明

说明

吸附对齐通过阈值设定的距离触发当节点距离目标小于吸附阈值时显示对齐目标节点到当前节点的对齐辅助线一共有3种对齐模式分别是水平对齐垂直对齐圆形和正方形对齐

水平对齐：当前点在投影到节点所在的XZ轴线上距离目标点的距离达到阈值时触发

垂直对齐：当前点在投影到节点所在的Y轴线上距离目标点的距离达到阈值时触发

圆形对齐：当椭圆的外接矩形接近正方形时触发

正方形对齐：当矩形接近正方形时触发

# 直线创建模式

说明

通过鼠标左键单击XZ平面来选点。

何时开始创建？在第一次点击XZ平面时开始创建。

何时结束创建？鼠标双击结束一次绘制。

# 直线编辑模式

说明

如何水平移动节点？鼠标左键选中要操作的节点进行XZ平面平移操作。
如何垂直移动节点？鼠标左键选中要操作的节点同时按住Ctrl键进行Y轴平面平移操作。

如何删除节点？鼠标右键单击节点来删除

如何添加节点？当鼠标靠近直线达到阈值距离时会自动显示一个临时可添加点鼠标左键单击可确定添加

# 曲线创建模式

说明

通过鼠标左键单击XZ平面来选点。
通过鼠标左键按住移动来确定控制点位置。

何时开始创建？在第一次按下XZ平面时开始创建。

何时结束创建？单击鼠标右键一次绘制。

# 曲线编辑模式

说明

如何水平移动节点？鼠标左键按住要操作的节点进行XZ平面平移操作。
如何垂直移动节点？鼠标左键按住要操作的节点同时按住Ctrl键进行Y轴平面平移操作。

如何删除节点？鼠标右键单击节点来删除

如何添加节点？当鼠标靠近曲线达到阈值距离时会自动显示一个临时可添加点鼠标左键单击可确定添加

# 曲线控制点编辑模式

说明

如何重置控制节点？鼠标左键按住节点（不是两边控制点）平移。

如何水平移动控制节点？鼠标左键按住要操作的控制节点进行XZ平面平移操作。
如何垂直移动控制节点？鼠标左键按住要操作的控制节点同时按住Ctrl键进行Y轴平面平移操作。

# 多边形创建模式

说明

通过鼠标左键单击XZ平面来选点。

何时开始创建？在第一次点击XZ平面时开始创建。

何时结束创建？鼠标双击结束一次绘制。

# 多边形编辑模式

说明

如何删除节点？鼠标右键单击节点来删除

如何添加节点？当鼠标靠近直线达到阈值距离时会自动显示一个临时可添加点鼠标左键单击可确定添加

# 矩形创建模式

说明

通过鼠标左键单击XZ平面来选择起点。

何时开始创建？在第一次点击XZ平面时开始创建。

何时结束创建？鼠标双击结束一次绘制。

# 矩形编辑模式

说明

# 椭圆创建模式

说明

通过鼠标左键单击XZ平面来选择起点。

何时开始创建？在第一次点击XZ平面时开始创建。

何时结束创建？鼠标双击结束一次绘制。

# 椭圆编辑模式

说明

如何移动节点？鼠标左键选中要操作的节点进行XZ平面平移操作。

← 批量创建工具模型数据 →