vjcad

v1.0.0

Published

8 days ago

vjcad

Downloads

222

0High
0Medium
0Low

vjmap

唯杰WebCAD

唯杰WebCAD 是一个基于 TypeScript 开发的专业级 Web 端 CAD 引擎，提供完整的 2D CAD 绘图功能。它采用现代化的架构设计，具有高性能渲染、完善的插件系统和丰富的 API 接口，适用于各类需要精确绘图和 CAD 功能的 Web 应用。

在线体验

| 名称 | 地址 | |------|------| | 唯杰WebCAD编辑平台 | https://vjmap.com/app/webcad/ | | 唯杰WebCAD在线示例 | https://vjmap.com/app/democad | | 唯杰WebCAD文档 | https://vjmap.com/app/docscad/ |

核心特性

矢量图形引擎 - GPU 加速渲染，支持百万级实体显示
DWG 兼容 - 完整支持 DWG/DXF 格式读写，与 AutoCAD 无缝对接
丰富实体类型 - Line、Circle、Arc、Polyline、Text、Hatch、Insert 等 20+ 种实体
插件系统 - 完善的生命周期管理，支持命令注册、UI 扩展、事件监听
撤销重做 - 完整的撤销重做机制，支持批量操作合并
TypeScript - 完整的类型定义，良好的开发体验

安装

# npm
npm install vjcad

# yarn
yarn add vjcad

# pnpm
pnpm add vjcad

或在 package.json 中添加：

{
  "dependencies": {
    "vjcad": "^1.0.0"
  }
}

快速开始

1. 初始化引擎

<!-- index.html -->
<div id="cad-app" style="width: 100%; height: 100%;"></div>

import { MainView, initCadContainer, Engine, LineEnt } from 'vjcad';

// 创建 MainView 实例
const cadView = new MainView({
    appname: "我的CAD应用",
    version: "v1.0.0",
    serviceUrl: "https://your-service-url/api/v1",
    sidebarStyle: "none",  // "none" | "left" | "right" | "both"
});

// 挂载到 DOM 容器
initCadContainer("cad-app", cadView);

// 等待初始化完成
await cadView.onLoad();

2. 绘制图形

// 创建直线
const line = new LineEnt([0, 0], [100, 100]);
line.setDefaults();  // 必须调用
Engine.addEntities(line);

// 创建圆
const circle = new CircleEnt([50, 50], 30);
circle.setDefaults();
Engine.addEntities(circle);

// 缩放到全图
Engine.zoomExtents();

3. 创建自定义命令

import { CommandDefinition, CommandRegistry, PointInputOptions, 
         InputStatusEnum, getPoint, Engine, LineEnt } from 'vjcad';

class MyLineCommand {
    async main() {
        // 获取起点
        const opt1 = new PointInputOptions("指定起点:");
        const result1 = await getPoint(opt1);
        if (result1.status !== InputStatusEnum.OK) return;
        
        // 获取终点（带橡皮筋线）
        const opt2 = new PointInputOptions("指定终点:");
        opt2.useBasePoint = true;
        opt2.basePoint = result1.value;
        const result2 = await getPoint(opt2);
        if (result2.status !== InputStatusEnum.OK) return;
        
        // 创建直线
        const line = new LineEnt(result1.value, result2.value);
        line.setDefaults();
        Engine.addEntities(line);
    }
}

// 注册并执行命令
const cmdDef = new CommandDefinition("MYLINE", "绘制直线", MyLineCommand);
CommandRegistry.regist(cmdDef);
await Engine.editor.executerWithOp("MYLINE");

常用 API

实体创建

| 实体 | 创建方式 | 说明 | |------|----------|------| | LineEnt | new LineEnt([x1,y1], [x2,y2]) | 直线 | | CircleEnt | new CircleEnt([cx,cy], radius) | 圆 | | ArcEnt | new ArcEnt([cx,cy], r, startAng, endAng) | 圆弧 | | PolylineEnt | new PolylineEnt() + setPoints() | 多段线 | | TextEnt | new TextEnt() | 单行文字 | | MTextEnt | new MTextEnt() | 多行文字 | | HatchEnt | new HatchEnt() | 填充 |

重要：创建实体后必须先调用 setDefaults()，再设置其他属性。

实体属性

const line = new LineEnt([0, 0], [100, 0]);
line.setDefaults();           // 必须先调用

line.color = 1;               // 颜色（1红 2黄 3绿 4青 5蓝 6洋红 7白）
line.layer = "图层名";         // 图层
line.lineType = "HIDDEN";     // 线型（CONTINUOUS, HIDDEN, CENTER）
line.lineTypeScale = 1.0;     // 线型比例

Engine.addEntities(line);

Engine 核心方法

// 实体操作
Engine.addEntities(entity);           // 添加实体
Engine.addEntities([ent1, ent2]);     // 批量添加
Engine.eraseEntities(entity);         // 删除实体

// 视图操作
Engine.zoomExtents();                 // 缩放到全图
Engine.zoomToEntities(entities);      // 缩放到指定实体
Engine.regen();                       // 刷新显示

// 选择集
Engine.ssSetFirst([entity]);          // 设置选择集
Engine.ssGetFirst();                  // 获取选择集

// 查询
Engine.getEntities();                 // 获取所有实体
Engine.getEntities(ent => ent.layer === "图层A");  // 按条件过滤
Engine.getEntitiesByType('LINE');     // 按类型获取
Engine.getLayers();                   // 获取所有图层

输入函数

import { getPoint, getSelections, getReal, getInteger,
         PointInputOptions, SelectionInputOptions, 
         RealInputOptions, IntegerInputOptions, InputStatusEnum } from 'vjcad';

// 获取点
const result = await getPoint(new PointInputOptions("指定点:"));
if (result.status === InputStatusEnum.OK) {
    const point = result.value;  // {x, y}
}

// 获取选择集
const result = await getSelections(new SelectionInputOptions("选择对象:"));

// 获取数值
const result = await getReal(new RealInputOptions("输入半径:"));
const result = await getInteger(new IntegerInputOptions("输入边数:"));

图层操作

// 创建图层
Engine.createLayer("新图层", {
    color: 1,
    lineType: "CONTINUOUS",
    layerOn: true,
    isFrozen: false,
    isLocked: false
});

// 切换当前图层
Engine.setCurrentLayer("图层名");

// 图层可见性
const layer = Engine.getLayerByName("图层名");
layer.layerOn = false;   // 关闭
layer.isFrozen = true;   // 冻结
layer.isLocked = true;   // 锁定
Engine.regen(true);

撤销操作

const undoMgr = Engine.undoManager;

// 撤销/重做
undoMgr.undo();
undoMgr.redo();

// 撤销分组（多个操作合并为一次撤销）
undoMgr.start_undoMark();
try {
    // 多个操作...
} finally {
    undoMgr.end_undoMark();
}

浏览器支持

| 浏览器 | 最低版本 | 推荐版本 | |--------|---------|---------| | Chrome | 80+ | 最新版 | | Firefox | 75+ | 最新版 | | Edge | 80+ | 最新版 | | Safari | 13+ | 最新版 |

文档导航

入门指南 - 了解基本概念和快速上手
核心概念 - Engine、Document、坐标系统
实体系统 - 各类 CAD 实体的属性和方法
命令系统 - 创建和注册自定义命令
插件系统 - 开发 WebCAD 插件
事件系统 - 监听和处理系统事件

唯杰地图介绍

唯杰地图VJMAP为CAD图或自定义地图格式WebGIS可视化显示开发提供的一站式解决方案，支持的格式如常用的AutoCAD的DWG格式文件、GeoJSON等常用GIS文件格式，它使用WebGL矢量图块和自定义样式呈现交互式地图, 提供了全新的大数据可视化、实时流数据可视化功能，通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析，可帮助您在网站中构建功能丰富、交互性强、可定制的地图应用。

唯杰地图官网地址：https://vjmap.com/

特点

完全兼容AutoCAD格式的DWG文件，无需转换
绘图技术先进：采用WebGL技术，支持矢量地图渲染，支持栅格、图片、视频等图形渲染，支持3D模型渲染；
个性化地图：服务端渲染和前端渲染都支持自定义样式表达式，灵活强大；
多视角模式：支持2D、3D视角，支持垂直视角、360度旋转视角；
视觉特性：支持无极缩放、支持粒子、航线等动画效果、支持飞行、平移等运动特效；
功能完善：支持所有常见的地图功能，提供丰富的js接口；
交互控制：支持鼠标/单指拖拽、上下左右按键进行地图平移，支持鼠标滚轮、双击、双指进行地图缩放，支持Shift+拉框放大；
大数据可视化：性能卓越，支持大数据可视化展示
跨平台支持(支持windows,linux); 支持docker部署;支持私有化部署;支持桌面端语言开发(如C#、Java、C++语言)