SVG 导入和图片转矢量

大约 6 分钟

SVG 导入和图片转矢量

WebCAD 提供 SVG 导入和图片转矢量功能，支持将 SVG 文件和栅格图片转换为可编辑的矢量图形。

IMPORTSVG - 导入 SVG

导入 SVG 文件或粘贴 SVG 内容到当前图形。

命令名: IMPORTSVG

命令: IMPORTSVG

功能说明

执行命令后打开 SVG 导入对话框，支持：

文件选择：点击"选择文件"按钮选择本地 SVG 文件
内容粘贴：在文本框中直接粘贴 SVG 内容
实时预览：左侧显示 SVG 原始效果，中间显示 WebCAD 转换效果

导入选项

选项	说明
显示线宽	是否保留 SVG 中的线宽信息
启用填充	是否将填充区域转换为填充图案
线宽缩放	调整线宽的缩放比例 (0.1-10)
允许缩放	导入时允许交互式指定缩放比例
允许旋转	导入时允许交互式指定旋转角度

颜色处理

对于 SVG 中的白色和黑色，可以选择不同的处理方式：

模式	说明
原样保留	保持原始颜色不变
自动反色	白色变黑色，黑色变白色（适合深色背景）
过滤排除	不导入该颜色的图形（适合过滤背景色）

API 使用

import { getWebCadCoreService, CadDocument, Engine, Point2D, regen } from 'vjcad';

// 1. 初始化 WASM 服务
const wasmService = getWebCadCoreService();
await wasmService.initWasm();

// 2. 解析 SVG 为 WebCAD 数据
const webcadData = await wasmService.parseSvgToWebcad(
    svgContent,       // SVG 内容字符串
    0,                // whiteColorProcessing: 0=原样, 1=反色, 2=过滤
    0,                // blackColorProcessing: 0=原样, 1=反色, 2=过滤
    1,                // enableFill: 0=否, 1=是
    1,                // displayLineWeight: 0=否, 1=是
    1.0               // lineWeightScale: 线宽缩放比例
);

// 3. 解析数据
const parsedData = JSON.parse(webcadData);
const entities = parsedData.entities || [];

// 4. 构建文档并插入实体
const docData = {
    appName: "WebCAD SVG Import",
    docVer: 0.3,
    dbBlocks: {
        "*Model": {
            blockId: "*Model",
            name: "*Model",
            isLayout: false,
            basePoint: [0, 0],
            items: entities
        }
    },
    dbLayers: [{
        name: "0",
        layerId: "0",
        layerOn: true,
        color: 7,
        lineType: "Continuous",
        lineWeight: -3
    }]
};

const symbolDoc = new CadDocument();
await symbolDoc.fromDb(docData);

// 5. 合并到当前文档
const modelBlock = symbolDoc.blocks.itemByName("*Model");
for (const entity of modelBlock.items) {
    if (!entity.isAlive) continue;
    Engine.pcanvas.addEntity(entity.clone());
}

regen();

parseSvgToWebcad 参数

参数	类型	说明
`svgContent`	`string`	SVG 内容字符串
`whiteColorProcessing`	`0 \| 1 \| 2`	白色处理：0=原样，1=反色，2=过滤
`blackColorProcessing`	`0 \| 1 \| 2`	黑色处理：0=原样，1=反色，2=过滤
`enableFill`	`0 \| 1`	启用填充：0=否，1=是
`displayLineWeight`	`0 \| 1`	显示线宽：0=否，1=是
`lineWeightScale`	`number`	线宽缩放比例

INSERTIMAGE - 图片转矢量

将栅格图片转换为矢量图形并导入到当前图形。

命令名: INSERTIMAGE

命令: INSERTIMAGE

提示

此命令由 insert-plugin 插件提供，需要确保插件已加载。

功能说明

执行命令后打开图片转矢量对话框，支持：

拖放导入：将图片文件拖放到预览区域
粘贴导入：使用 Ctrl+V 粘贴剪贴板中的图片
文件选择：点击"选择文件"按钮选择本地图片
实时预览：左侧显示原始图片，中间显示 SVG/WebCAD 转换效果

支持的图片格式

PNG
JPG/JPEG
GIF
WebP
其他浏览器支持的图片格式

转换设置

聚类设置

选项	说明	取值范围
聚类模式	颜色模式选择	黑白 / 彩色
层级模式	彩色模式下的层级处理	切除 / 堆叠
斑点过滤	过滤小面积斑点的阈值	0-128 像素
颜色精度	彩色模式下的颜色数量	1-8
渐变步长	彩色模式下的渐变平滑度	0-128

曲线拟合

选项	说明	取值范围
曲线模式	路径简化方式	像素 / 多边形 / 样条
拐角阈值	样条模式下的拐角识别	0-180°
线段长度	样条模式下的分段长度	3.5-10
连接阈值	样条模式下的曲线连接	0-180°

导入选项

选项	说明
启用填充	是否将区域转换为填充图案
允许缩放	导入时允许交互式指定缩放比例
允许旋转	导入时允许交互式指定旋转角度

VectroizeConfig 配置详解

interface VectroizeConfig {
    /** 颜色模式: color=彩色, binary=黑白 */
    colorMode: 'color' | 'binary';
    
    /** 层级模式: stacked=堆叠, cutout=切除 */
    hierarchical: 'stacked' | 'cutout';
    
    /** 路径模式: pixel=像素, polygon=多边形, spline=样条曲线 */
    pathMode: 'pixel' | 'polygon' | 'spline';
    
    /** 斑点过滤阈值 (像素数), 默认 4 */
    filterSpeckle: number;
    
    /** 颜色精度 (1-8), 默认 6 */
    colorPrecision: number;
    
    /** 渐变步长 (0-128), 默认 16 */
    layerDifference: number;
    
    /** 拐角阈值 (0-180度), 默认 60 */
    cornerThreshold: number;
    
    /** 线段长度阈值 (3.5-10), 默认 4 */
    lengthThreshold: number;
    
    /** 连接阈值 (0-180度), 默认 45 */
    spliceThreshold: number;
    
    /** 路径精度 (0-8), 默认 8 */
    pathPrecision: number;
}

参数说明

colorMode - 颜色模式

color（彩色）：保留原始图片的颜色信息，适合彩色图片
binary（黑白）：转换为黑白二值图，适合线条图、签名等

hierarchical - 层级模式

仅在彩色模式下有效：

stacked（堆叠）：颜色区域按层次堆叠，下层被上层覆盖
cutout（切除）：上层颜色区域会从下层中切除

pathMode - 曲线模式

pixel（像素）：保留原始像素边缘，输出锯齿状路径
polygon（多边形）：使用直线段拟合，输出折线路径
spline（样条）：使用贝塞尔曲线拟合，输出平滑曲线

API 使用

图片转矢量功能由 VectroizeService 提供：

// 从插件导入服务
import { getVectroizeService } from 'insert-plugin';

// 获取服务实例
const service = getVectroizeService();

// 方式1：从图片 URL 转换
const result = await service.convertImageUrlToSvg(imageUrl, {
    colorMode: 'color',
    hierarchical: 'stacked',
    pathMode: 'spline',
    filterSpeckle: 4,
    colorPrecision: 6
});
// result.svg - 转换后的 SVG 字符串
// result.width - 图片宽度
// result.height - 图片高度

// 方式2：从 File 对象转换
const result = await service.convertFileToSvg(file, config);

// 方式3：从 Canvas 转换
const result = await service.convertCanvasToSvg(canvas, config);

// 方式4：从像素数据转换
const svg = await service.convertToSvg(
    pixelData,    // Uint8Array - RGBA 像素数据
    width,        // 图片宽度
    height,       // 图片高度
    config        // VectroizeConfig
);

VectroizeService API

方法	说明
`convertToSvg(data, width, height, config)`	从像素数据转换
`convertCanvasToSvg(canvas, config)`	从 Canvas 转换
`convertImageUrlToSvg(url, config)`	从图片 URL 转换
`convertFileToSvg(file, config)`	从 File 对象转换

使用场景

SVG 导入

图标导入：将 SVG 图标导入为 CAD 图形
Logo 导入：将矢量 Logo 导入到图纸中
图形复用：导入其他软件导出的 SVG 图形

图片转矢量

扫描图纸处理：将扫描的图纸转换为可编辑的矢量图形
手绘草图数字化：将手绘草图照片转换为矢量线条
Logo 矢量化：将栅格 Logo 转换为矢量格式
签名数字化：将签名图片转换为矢量路径

最佳实践

SVG 导入：
- 导入前确保 SVG 内容格式正确
- 根据背景色选择合适的颜色处理模式
- 复杂 SVG 可能需要调整线宽缩放
图片转矢量：
- 高对比度图片效果更好
- 线条图建议使用黑白模式
- 彩色图片建议使用样条曲线模式
- 调整斑点过滤可减少噪点

下一步

文件操作 - DWG 导入导出
系统命令 - 其他系统命令
符号命令 - 符号管理