（一）云设计：DXF图纸解析之Nodejs + SVG

本诫命·富树人

CG | GC

1. 概述

本文主要介绍以下三个部分：

了解DXF数据格式
使用nodejs解析DXF数据
使用SVG渲染数据

本专栏代码仓库地址：

本文代码仓库地址：

2. DXF数据格式

DXF是 AutoCAD (Drawing Interchange Format或者Drawing Exchange Format) 绘图交换文件。DXF 是 Autodesk （欧特克）公司开发的用于AutoCAD与其它软件之间进行CAD数据交换的CAD数据文件格式。

DXF是一种开放的矢量数据格式，可以分为两类：ASCII格式和二进制格式；ASCII具有可读性好的特点，但占用的空间较大；二进制格式则占用的空间小、读取速度快。由于AutoCAD是最流行的CAD系统，DXF也被广泛使用，成为事实上的标准。绝大多数CAD系统都能读入或输出DXF文件。

DXF文件是由很多的“代码”和“值”组成的“数据对”构造而成，这里的代码称为“ 组码 ”（group code），指定其后的值的类型和用途。每个组码和值必须为单独的一行的。

DXF文件被组织成为多个“段”（section），每个段以组码“0”和字符串“SECTION”开头，紧接着是组码“2”和表示段名的字符串（如HEADER）。段的中间，可以使用组码和值定义段中的元素。段的结尾使用组码“0”和字符串“ENDSEC”来定义。

DXF-Drawing Exchange File（图形交换文件），这是一种ASCII文本文件,它包含对应的DWG文件的全部信息,不是ASCII码形式,可读性差,但用它形成图形速度快.不同类型的计算机（如PC及其兼容机与SUN工作站具体不同的CPU用总线）哪怕是用同一版本的文件,其DWG文件也是不可交换的. 为了克服这一缺点,AutoCAD提供了DXF类型文件,其内部为ASCII码,这样不同类型的计算机可通过交换DXF文件来达到交换图形的目的,由于DXF文件可读性好,用户可方便地对它进行修改,编程,达到从外部图形进行编辑和修改的目的。

DXF文件由标题段、表段、块段、实体段和文件结束段5部分组成，其内容如下。

☆标题段（HEADER）标题段记录AutoCAD系统的所有标题变量的当前值或当前状态。标题变量记录了AutoCAD系统的当前工作环境，如SNAP捕捉当前状态、栅格间距式样、当前图层层名及线型、颜色等。

☆表段（TABLES）表段共包含4个表，每个表又包含可变数目的表项。这些表在文件中出现的顺序是线型表（LTYPE）、图层表（LAYER）、字样表（STYLE）、视图表（VIEW）。

☆块段（BLOCK）块段记录了所用块的块名，当前图层层名、块的种类、块的插入基点及组成该块的所有成员。块的种类分为图形块、带有属性的块和无名块三种。无名块包括用HATCH命令生成的剖面线和用DIM命令所完成的尺寸标准。

☆实体段（ENTITIES）实体段记录了每个实体的名称、所在图层及其名字、线型、颜色等。

☆文件结束段（EOF OF FILE）DXF文件的结束标志。

3. DXF数据解析

3.1 dxf数据格式

解析dxf相对比较简单，js、node、python都可以解析，github随便找一找，分别试一试效果。

解析之后的数据，大概张这个样子：

{ "header": { "$ACADVER": "AC1027", "$ACADMAINTVER": 55, "$DWGCODEPAGE": "ANSI_1252", "$REQUIREDVERSIONS": 0, "$INSBASE": { "x": 0, "y": 0, "z": 0 "$EXTMIN": { "x": 146.8403717847312, "y": 141.8294137695975, "z": -5.934454319554902 "$EXTMAX": { "x": 762.6679804989191, "y": 545.821967323924, "z": 6.065545680445099 "tables": { "lineType": { "handle": "5", "ownerHandle": "0", "lineTypes": { "Continuous": { "name": "Continuous", "description": "Solid line", "patternLength": 0 "HIDDEN2": { "name": "HIDDEN2", "description": "Hidden (.5x) _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _", "pattern": [ 0.125, -0.0625 "patternLength": 0.1875 "CENTER": { "name": "CENTER", "description": "____ _ ____ _ ____ _ ____ _ ____ _ ____ _ ____", "pattern": [ 1.25, -0.25, 0.25, -0.25 "patternLength": 2 "layer": { "handle": "2", "ownerHandle": "0", "layers": { "FG-Dim": { "name": "FG-Dim", "visible": true, "color": 16711680 "FG-Dtl-Hatch": { "name": "FG-Dtl-Hatch", "visible": true, "color": 8421504 "FG-Dtl-Hidden": { "name": "FG-Dtl-Hidden", "visible": false, "color": 16711680 "Vport": { "name": "Vport", "visible": false, "color": 65535 "FG-Logo": { "name": "FG-Logo", "visible": true, "color": 16711680 "blocks": { "*U34": { "handle": "2269", "ownerHandle": "2268", "layer": "0", "name": "*U34", "type": 3, "position": { "x": 0, "y": 0, "z": 0 "name2": "*U34", "xrefPath": "", "entities": [ "type": "LINE", "vertices": [ "x": 0.1875, "y": 0, "z": 0 "x": -0.1875, "y": 0, "z": 0 "handle": "226C", "ownerHandle": "2268", "layer": "0" "type": "LINE", "vertices": [ "x": 0, "y": 0.1875, "z": 0 "x": 0, "y": 0.6811772682290212, "z": 0 "handle": "226F", "ownerHandle": "2268", "layer": "0" "entities": [ "type": "LINE", "vertices": [ "x": 516.4647237971784, "y": 330.7069626367825, "z": 0 "x": 516.1834738922776, "y": 330.8693422367825, "z": 0 "handle": "1805", "ownerHandle": "1F", "layer": "FG-Dtl-Fastener" "type": "LWPOLYLINE", "vertices": [ "x": 520.4823233451135, "y": 335.7037165715653, "bulge": 0.495500738389451 "x": 520.4823233451135, "y": 335.385455702, "bulge": -0.7180232138070655 "x": 520.4641507323038, "y": 335.3315861367825 "x": 520.09745368689, "y": 335.3315861367825, "bulge": 0.2818610536572053 "x": 519.9994740971791, "y": 335.3915861367824 "x": 519.9334740971784, "y": 335.3915861367824 "x": 519.9334740971784, "y": 335.6975861367825 "x": 519.9994740971791, "y": 335.6975861367825, "bulge": 0.2818610536572062 "x": 520.09745368689, "y": 335.7575861367824 "x": 520.4641507323034, "y": 335.7575861367824, "bulge": -0.7180232138063462 "handle": "13E1", "ownerHandle": "1F", "layer": "SHAPE", "shape": true "type": "CIRCLE", "handle": "17EA", "ownerHandle": "1F", "layer": "FG-Dtl-Fastener", "center": { "x": 516.1834740971784, "y": 329.0445861367825, "z": 0 "radius": 0.1875 "type": "ARC", "handle": "17F6", "ownerHandle": "1F", "layer": "FG-Dtl-Fastener", "center": { "x": 516.1834740971784, "y": 330.4508361367829, "z": 0 "radius": 0.28125, "startAngle": 0, "angleLength": 3.141592653589793, "endAngle": 3.141592653589793 }

测试图纸：

3.2 dxf node

仓库地址：

按照README.md的说明文档，运行examples/dxf.html，界面如图：

然后选取本地的dxf文件，测试一下效果：

读取dxf源文件数据如下

0 SECTION HEADER $ACADVER AC1021 $ACADMAINTVER $DWGCODEPAGE ANSI_936 $LASTSAVEDBY $INSBASE $EXTMIN 4204.521198905189 2673.92609677303 $EXTMAX 30545.94139064468 17697.92609677312 $LIMMIN $LIMMAX 420.0 297.0 $ORTHOMODE $REGENMODE $FILLMODE $QTEXTMODE $MIRRTEXT $LTSCALE $ATTMODE $TEXTSIZE $TRACEWID $TEXTSTYLE Standard $CLAYER wall_label $CELTYPE ByLayer $CECOLOR $CELTSCALE $DISPSILH $DIMSCALE $DIMASZ $DIMEXO 0.625 $DIMDLI $DIMRND $DIMDLE $DIMEXE $DIMTP $DIMTM $DIMTXT $DIMCEN $DIMTSZ $DIMTOL $DIMLIM $DIMTIH $DIMTOH $DIMSE1 $DIMSE2 $DIMTAD $DIMZIN $DIMBLK $DIMASO $DIMSHO $DIMPOST $DIMAPOST $DIMALT $DIMALTD $DIMALTF 0.03937007874016 $DIMLFAC $DIMTOFL $DIMTVP $DIMTIX $DIMSOXD $DIMSAH $DIMBLK1 $DIMBLK2 $DIMSTYLE ISO-25 $DIMCLRD $DIMCLRE $DIMCLRT $DIMTFAC $DIMGAP 0.625 $DIMJUST $DIMSD1 $DIMSD2 $DIMTOLJ $DIMTZIN $DIMALTZ $DIMALTTZ $DIMUPT $DIMDEC $DIMTDEC $DIMALTU $DIMALTTD $DIMTXSTY Standard $DIMAUNIT $DIMADEC $DIMALTRND $DIMAZIN $DIMDSEP $DIMATFIT $DIMFRAC $DIMLDRBLK $DIMLUNIT $DIMLWD $DIMLWE $DIMTMOVE $DIMFXL $DIMFXLON $DIMJOGANG 0.7853981633974483 $DIMTFILL $DIMTFILLCLR $DIMARCSYM $DIMLTYPE $DIMLTEX1 $DIMLTEX2 $LUNITS $LUPREC $SKETCHINC $FILLETRAD $AUNITS $AUPREC $MENU $ELEVATION $PELEVATION $THICKNESS $LIMCHECK $CHAMFERA $CHAMFERB $CHAMFERC $CHAMFERD $SKPOLY $TDCREATE 2459318.735248693 $TDUCREATE 2459318.401915359 $TDUPDATE 2459326.780903160 $TDUUPDATE 2459326.447569827 $TDINDWG 0.0083276273 $TDUSRTIMER 0.0083275810 $USRTIMER $ANGBASE $ANGDIR $PDMODE $PDSIZE $PLINEWID $SPLFRAME $SPLINETYPE $SPLINESEGS $HANDSEED $SURFTAB1 $SURFTAB2 $SURFTYPE $SURFU $SURFV $UCSBASE $UCSNAME $UCSORG $UCSXDIR $UCSYDIR $UCSORTHOREF $UCSORTHOVIEW $UCSORGTOP $UCSORGBOTTOM $UCSORGLEFT $UCSORGRIGHT $UCSORGFRONT $UCSORGBACK $PUCSBASE $PUCSNAME $PUCSORG $PUCSXDIR $PUCSYDIR $PUCSORTHOREF $PUCSORTHOVIEW $PUCSORGTOP $PUCSORGBOTTOM $PUCSORGLEFT $PUCSORGRIGHT $PUCSORGFRONT $PUCSORGBACK $USERI1 $USERI2 $USERI3 $USERI4 $USERI5 $USERR1 $USERR2 $USERR3 $USERR4 $USERR5 $WORLDVIEW $SHADEDGE $SHADEDIF $TILEMODE $MAXACTVP $PINSBASE $PLIMCHECK $PEXTMIN $PEXTMAX $PLIMMIN $PLIMMAX $UNITMODE $VISRETAIN $PLINEGEN $PSLTSCALE $TREEDEPTH $CMLSTYLE Standard $CMLJUST $CMLSCALE $PROXYGRAPHICS $MEASUREMENT $CELWEIGHT $ENDCAPS $JOINSTYLE $LWDISPLAY $INSUNITS $HYPERLINKBASE $STYLESHEET $XEDIT $CEPSNTYPE $PSTYLEMODE $FINGERPRINTGUID {8CA3AAAC-A2AC-4C14-9644-E9314772EF24} $VERSIONGUID {7DB1333B-17D4-4BF3-A461-5AD554022626} $EXTNAMES $PSVPSCALE $OLESTARTUP $SORTENTS $INDEXCTL $HIDETEXT $XCLIPFRAME $HALOGAP $OBSCOLOR $OBSLTYPE $INTERSECTIONDISPLAY $INTERSECTIONCOLOR $DIMASSOC $PROJECTNAME $CAMERADISPLAY $LENSLENGTH $CAMERAHEIGHT $STEPSPERSEC $STEPSIZE $3DDWFPREC $PSOLWIDTH $PSOLHEIGHT $LOFTANG1 1.570796326794896 $LOFTANG2 1.570796326794896 $LOFTMAG1 $LOFTMAG2 $LOFTPARAM $LOFTNORMALS $LATITUDE 37.795 $LONGITUDE -122.394 $NORTHDIRECTION $TIMEZONE -8000 $LIGHTGLYPHDISPLAY $TILEMODELIGHTSYNCH $CMATERIAL $SOLIDHIST $SHOWHIST $DWFFRAME $DGNFRAME $REALWORLDSCALE $INTERFERECOLOR $INTERFEREOBJVS $INTERFEREVPVS $CSHADOW $SHADOWPLANELOCATION ENDSEC SECTION CLASSES CLASS ACDBDICTIONARYWDFLT AcDbDictionaryWithDefault ObjectDBX Classes CLASS DICTIONARYVAR AcDbDictionaryVar ObjectDBX Classes CLASS TABLESTYLE AcDbTableStyle ObjectDBX Classes CLASS MATERIAL AcDbMaterial ObjectDBX Classes CLASS VISUALSTYLE AcDbVisualStyle ObjectDBX Classes CLASS SCALE AcDbScale ObjectDBX Classes CLASS MLEADERSTYLE AcDbMLeaderStyle ACDB_MLEADERSTYLE_CLASS CLASS CELLSTYLEMAP AcDbCellStyleMap ObjectDBX Classes CLASS EXACXREFPANELOBJECT ExAcXREFPanelObject EXAC_ESW CLASS NPOCOLLECTION AcDbImpNonPersistentObjectsCollection ObjectDBX Classes CLASS LAYER_INDEX AcDbLayerIndex ObjectDBX Classes CLASS SPATIAL_INDEX AcDbSpatialIndex ObjectDBX Classes CLASS IDBUFFER AcDbIdBuffer ObjectDBX Classes CLASS ACDBSECTIONVIEWSTYLE AcDbSectionViewStyle ObjectDBX Classes CLASS ACDBDETAILVIEWSTYLE AcDbDetailViewStyle ObjectDBX Classes CLASS SORTENTSTABLE AcDbSortentsTable ObjectDBX Classes