@ cadview/ core (中文(简体) )
框架-不可知 CAD 文件查看器引擎有 DXF 剖析器和 Canvas 2D 渲染器.
特征
- 快速 DXF 解析器, 支持13个实体类型( LINE, CIRCLE, ARC, LWPOLYLINE, POLYLLLINE, ELLIPSE, SPLINE, TEXT, MTEXT, InSERT, DIMENSION, HATCH, POINT)
- 带有 DPR 感知渲染和暗/淡主题的 Canvas 2D 渲染器
- 与 pan 、 缩放( Mouse wheel + citch) 和指针抓取交互查看器
- 具有空间索引(R-tree)和几何打击测试的实体选择
- 带有速成对地测量(端点、中点、中点)的测量工具
- 带有能见度切换和色彩覆盖的层管理
- ACI 颜色表( 256 颜色) 有主题意识的颜色 7 互换
- 用嵌入式块支持屏蔽 INSERT 渲染
- 零框架依赖性——与任何UI框架或vanilla JS合作
安装
npm install @cadview/core
快速启动
import { CadViewer } from '@cadview/core';
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const viewer = new CadViewer(canvas, { theme: 'dark' });
// Load a DXF file
const response = await fetch('/drawing.dxf');
const buffer = await response.arrayBuffer();
viewer.loadArrayBuffer(buffer);
// Or load from File input
const file = input.files[0];
await viewer.loadFile(file);
// Controls
viewer.fitToView();
viewer.setTheme('light');
viewer.setTool('select'); // 'pan' | 'select' | 'measure'
// Events
viewer.on('select', (e) => {
console.log('Selected:', e.entity.type, 'on layer:', e.entity.layer);
});
viewer.on('measure', (e) => {
console.log('Distance:', e.distance);
});
// Cleanup
viewer.destroy();
API 密码
CadViewer
主取景器类 管弦乐解析,渲染,和相互作用.
构造器
new CadViewer(canvas: HTMLCanvasElement, options?: CadViewerOptions)
选项
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
theme | 'dark' | 'light' | 'dark' | 颜色主题 |
minZoom | number | 0.0001 | 最小缩放比例 |
maxZoom | number | 100000 | 最大缩放尺度 |
zoomSpeed | number | 1.1 | 每个轮子的缩放系数勾选 |
initialTool | Tool | 'pan' | 启用时使用的工具 |
formatConverters | FormatConverter[] | [] | 非 DXF 文件的格式转换器( 如 DWG) |
方法
| 方法 | 说明 |
|---|---|
loadFile(file: File) | 从文件对象装入( 同步, 运行格式转换器) |
loadBuffer(buffer: ArrayBuffer) | 从矩阵缓冲器装入( 同步, 运行格式转换器) |
loadString(dxf: string) | 从字符串装入 DXF( 同步, 不转换) |
loadArrayBuffer(buffer: ArrayBuffer) | 从矩阵缓冲器装入 DXF( 同步, 不转换) |
loadDocument(doc: DxfDocument) | 直接装入预放的 DxfDocument |
clearDocument() | 在不破坏查看器的情况下清除当前文档 |
fitToView() | 适合绘制边框 |
setTheme(theme) | 设置颜色主题 |
setTool(tool) | 设置活动工具( S)pan, (中文(简体) ), select, (中文(简体) ), measure(中文(简体) ) |
getLayers() | 获取所有层 |
setLayerVisible(name, visible) | 切换层可见度 |
on(event, callback) | 订阅事件 |
off(event, callback) | 未订阅事件 |
destroy() | 清理所有资源 |
FormatConverter
用于注册自定义文件格式转换器的接口 。 转换器在 loadFile() 财务报告和审定财务报表 loadBuffer() —— 第一场比赛取胜.
interface FormatConverter {
/** Return true if the buffer is in this format (check magic bytes, not extensions). */
detect(buffer: ArrayBuffer): boolean;
/** Convert the buffer to a DXF string. */
convert(buffer: ArrayBuffer): Promise<string>;
}
示例——通过DWG支持 @cadview/dwg数字 :
import { CadViewer } from '@cadview/core';
import { dwgConverter } from '@cadview/dwg';
const viewer = new CadViewer(canvas, {
formatConverters: [dwgConverter],
});
// loadFile and loadBuffer now handle both DXF and DWG
await viewer.loadFile(file);
说明:
@cadview/dwg由GPL-3.0(因LibreDWG而批准).@cadview/core麻省理工学院 见 @cadview/ dwg 读取ME 详细情况.
parseDxf
独立的 DXF 解析器 — 如果您不需要解析器, 请使用此解析器 .
import { parseDxf } from '@cadview/core';
const doc = parseDxf(dxfString);
console.log(doc.entities.length, 'entities');
console.log(doc.layers.size, 'layers');
支助的DXF实体
线, CIRCLE, ARC, LWPOLLINE, POLYLLLINE, ELLIPSE, SPLINE, TEXT, MTEXT, InSERT (有MINSERT 网格), DIMENSION (有几何区块), HATCH (线/弧/圈边缘), POINT.
许可证
麻省理工学院