（二）解决思路和准备工作

EmilyHOC
120 阅读2分钟

第二章 解决思路和整体框架

抽象思维

首先我需要得到的是一个跟cad图几乎一样的画面，并且可以编辑，这个画面是由不同的图形组成的，我可以把所有的图形抽象成一个个实体对象，把对象放到一个大的数组里面，遍历数组然后根据这个类型去解析成一个个不同的画面，具体的流程图如下：

image.png

对于从cad文件到json文件，使用c++去读写文件做的，暂不展开描述，这里先从json文件到前端画面这一部分的内容展开描述，我会提供一份解析好的json文件，你只需要关心是怎么变成SVG对象即可。源码会统一放在仓库里

准备工作

我们会新建一个工程把渲染过程讲清楚，鼓励大家动手实践一遍，思考会更深刻,首先用脚手架新建一个Vue2空项目（考虑到大家可能很多人还没接触过Vue3）

1)安装npm 包
    "@svgdotjs/svg.js": "^3.1.2",
    "@svgdotjs/svg.panzoom.js": "^2.1.2",
    "vuex": "^3.4.0"

svg.js 是一个可以用js库，可以用来画SVG元素，svg.panzoom.js可以用来缩放画面,vuex就是全局状态管理

2）熟悉json结构

image.png

如上图所示，图形的原始位置并不是从0开始的，objects结构描述了不同种类的图形的结构，maxX表示这些图形里面最远的点的坐标，minX表示最近的点的坐标，由此可以算出画布的viewbox.

3) 准备一张画布

  this.draw = SVG().addTo('#app').size('100%', '100%').panZoom({
    wheelZoom: true,
    panning: true,
    zoomFactor: 1,
    panButton: 1,
    wheelZoomDeltaModeScreenPixels: 1,
    wheelZoomDeltaModeLinePixels: 1
 });

image.png

4) 渲染viewbox
 this.viewBox = this.draw.viewbox(
        0,
        0,
        this.svgJsonData.maxX - this.svgJsonData.minX,
        this.svgJsonData.maxY - this.svgJsonData.minY ? this.svgJsonData.maxY - this.svgJsonData.minY : 100
      );

image.png

5) 新建一个入口类

根目录下新建一个入口类，用来操作整个画面的对象

this.cad = new MCad(this.draw, this.svgJsonData);

image.png

对于这个类的构造函数，主要做的事情就是根据objects里面描述的图形类型归类到不同的类里面，然后每个类型再分别渲染.

思路讲得差不多，下面章节会讲述怎么渲染，以及对于每个类怎么做编辑。

avatar
文章
阅读
粉丝