drawing-viewer v0.0.1

二维原理图可视化

Build 编译

重要！！！

在 build 之前，需要将 src/lib 文件夹中的 hammer.js 的内容替换掉 node_modules/hammerjs 中的 hammer.js 文件！！！

pnpm install

pnpm build

Integration 集成

编译过后得到一个 dist 目录，将 dist 目录整个复制到需要使用的项目中。

复制到别的项目中建议改个名字，比如将 dist --> lib。

集成至 Vue2

1. 将目录中的 font 文件夹拖入至 Vue 项目中 public 文件夹中
2. 在组件的 mounted() 生命周期中挂载
3. 设置字体路径

export default {
    name: 'HelloWorld',
    props: {
        msg: String,
    },
    mounted() {
        const app = new App();
        app.setFontURL('simHei', '/font/simhei.ttf');
        app.setFontURL('newSimSun', '/font/NSimSun-02.ttf');
        app.setFontURL('SimSun (TrueType)', '/font/SimSun-01.ttf');
        app.setFontURL('Monospac821 BT', '/font/MONOSPACE821BT.ttf');
        app.mountTo(this.$refs.root);
    },
};

使用

与 npm 包类似，直接 import 引入即可

import { App } from '../lib';

const app = new App();
app.mountTo(ele); //ele是HTML元素

相关 API

• 更改图元颜色： app.updateColor(symbolId: number, r: number, g: number, b: number, a: number): void

• 更改图元透明度： app.updateTransparency(symbolId: number, transparency: number): void

r, g, b, transparency 范围均在 0~255

• 选择图元：app.selectSymbol(symbolId: number): void

• 聚焦图元并居中显示：app.focusSymbol(symbolId: number): void

• 加载图纸：app.loadDrawing(drawingData: DrawingJSON): void

• 新增、修改字体路径：setFontURL(fontName: string, url: string): void

• 修改图纸背景色：setBackgroundColor(r: number, g: number, b: number, a: number): void

2022.12.30 新特性

1. 提供二维原理图加载完成后的回调功能：

提供了一个 DRAWING_LOADED的事件，监听该事件即可。

const app = new App();
app.on(App.DRAWING_LOADED, () => {
    console.log('加载完成！');
});

2. 提供二维原理图复位功能

app.resetCanvas();

3. 提供背景色设置，同之前的 API setBackgroundColor，新增了透明度参数。

4. 提供二维原理图关闭或画布关闭时的销毁功能

app.destroy();

5. 提供清楚所有高亮节点功能

app.cancelHighlightNode();

6. 提供鼠标选择图元时返回 symbolID, orilID, nodeID

test.on(App.SELECT_SYMBOL_ACTIVE, ids => {
    console.log(ids.symbolId);
    console.log(ids.orilId);
    console.log(ids.nodeId);
});

7. 提供修改图元颜色，支持 RGBA，同之前的 API updateColor，新增了透明度参数

8. 设置选中高亮颜色为红色，新增了 API setHighlightColor(r: number, g: number, b: number, a: number) 可以设置高亮颜色。

app.setHighlightColor(255, 100, 100, 255);