SVG 导入
示例:
vjcad/example/insert/svg/01importsvg.js— IMPORTSVG 命令vjcad/example/insert/svg/02importsvgapi.js—parseSvgToWebcadAPIvjcad/example/insert/svg/03insertimage.js— INSERTIMAGE 命令(图片转矢量入口) 文档:vjcad/doc/insert/index.md
1. 命令方式(最简单)
await Engine.editor.executerWithOp('IMPORTSVG');
Engine.zoomExtents();
IMPORTSVG 弹出对话框,支持:
- 选择本地 SVG 文件 / 直接粘贴 SVG 字符串
- 显示设置:
显示线宽/启用填充/线宽缩放比例 - 颜色处理:白/黑色 →
0=原样/1=反色/2=过滤 - 插入选项:
允许缩放/允许旋转 - SVG 原始效果 vs WebCAD 效果实时对比预览
2. API 方式(可批量 / 服务端预设 / 程序生成 SVG)
完整流程见 vjcad/example/insert/svg/02importsvgapi.js。骨架:
const wasmService = getWebCadCoreService();
// 无需手动 initWasm:parseSvgToWebcad 内部会 await this.initWasm()
const webcadData = await wasmService.parseSvgToWebcad(
svgContent,
/* whiteColorProcessing */ 0, // 0=原样 / 1=反色 / 2=过滤
/* blackColorProcessing */ 0,
/* enableFill */ 0, // 0=否 / 1=是
/* displayLineWeight */ 1,
/* lineWeightScale */ 1.0
);
if (!webcadData) throw new Error('SVG 解析失败'); // 失败返回 null(不抛错),详情见控制台
const parsed = JSON.parse(webcadData);
const entities = parsed.entities ?? [];
随后用 临时 CadDocument 把 entities 装进 *Model 块、再合并到当前文档:
const docData = {
appName: "WebCAD SVG Import",
docVer: 0.3,
dbBlocks: {
"*Model": {
blockId: "*Model", name: "*Model", isLayout: false,
basePoint: [0, 0], lookPt: [0, 0],
twistAngle: 0, zoom: 1, UCSXANG: 0, UCSORG: [0, 0],
items: entities,
},
},
dbLayers: [{ name: "0", layerId: "0", layerOn: true, color: 7,
lineType: "Continuous", lineWeight: -3, plottable: true }],
dbTextStyles: [],
dbLayouts: [{ layoutId: 0, name: "Model", spaceName: "*Model" }],
};
const symbolDoc = new CadDocument();
await symbolDoc.fromDb(docData);
const basePt = new Point2D(
parsed.bounds ? (parsed.bounds[0] + parsed.bounds[2]) / 2 : 0,
parsed.bounds ? (parsed.bounds[1] + parsed.bounds[3]) / 2 : 0
);
const insertPoint = new Point2D(0, 0);
const modelBlock = symbolDoc.blocks.itemByName("*Model");
for (const entity of modelBlock.items) {
if (!entity.isAlive) continue;
const cloned = entity.clone();
cloned.move(basePt, insertPoint); // 把基点对齐到插入点
Engine.addEntities(cloned);
}
regen();
Engine.zoomExtents();
完整代码:
vjcad/example/insert/svg/02importsvgapi.js
3. parseSvgToWebcad 参数
| 参数 | 取值 | 说明 |
|---|---|---|
svgContent |
string | 完整 SVG 文本 |
whiteColorProcessing |
0 / 1 / 2 | 白色:0=原样 / 1=反色 / 2=过滤 |
blackColorProcessing |
0 / 1 / 2 | 黑色:同上 |
enableFill |
0 / 1 | 是否将填充区域转为 Hatch |
displayLineWeight |
0 / 1 | 是否保留线宽 |
lineWeightScale |
number | 线宽缩放(1.0 = 原值) |
返回 JSON 字符串:
{
"entities": [ /* webcad 实体数组 */ ],
"bounds": [minX, minY, maxX, maxY]
}
4. 支持的 SVG 元素
<rect> / <circle> / <ellipse> / <line> / <polyline> / <polygon> / <path>(包含 M L H V Q T C S A Z)/ <text>(基础)/ <g>(嵌套)。
颜色
stroke、fill、stroke-width均会被解析。
红旗
- 不需要先
await initWasm()(parseSvgToWebcad内部自动初始化);WASM 加载或解析失败时返回null而非抛错,必须判空再JSON.parse - 当
parsed.bounds缺失时,把basePoint退化为[0, 0] - 大 SVG(>10MB)建议在 webworker 里转,主线程会卡顿
parseSvgToWebcad是 同步语义但内部异步,外面必须await- 千万别把 SVG 里的
transform="..."留空:parseSvgToWebcad已经把变换应用到坐标,导入后再move/rotate是叠加而非覆盖
参考(官方文档 MCP)
- 示例:
vjcad/example/insert/svg/01importsvg.js— IMPORTSVG 命令vjcad/example/insert/svg/02importsvgapi.js—parseSvgToWebcadAPIvjcad/example/insert/svg/03insertimage.js— INSERTIMAGE 命令(图片转矢量入口)- 文档:
vjcad/doc/insert/index.md