dxf是autoCad导出的通用看图文件, 它本质上是一种ascll码文件,可以使用three-dxf( https://github.com/gdsestimating/three-dxf ) 先将其转换成json, three-dxf是基于threejs开发的网页版看图器, 他将dxf中的图形转换成three对象, 再通过一个垂直于y轴的轨道相机实现图纸移动,缩放功能.
下面我讲一讲通过three-dxf生成出来的json格式如何解析绘制
一、json外层结构
blocks:{},
header: {},
tables: {
layer: {},
lineType: {}
},
extents:{
max:[x,y,z],
min:[x,y,z]
},
entities: []
}
这里, blocks是块定义, 用于定义组合图形; header是标题, 记录了文件的一般信息;
tables定义层与线的信息; tables.layer是图层信息(名称, 线型, 线宽, 是否可编辑,透明度等), tables.lineType是线定义(定义连续线,虚线,点划线等);extents 定义画幅长宽 , entities是实体,用于绘图
二、图层坐标系
在extents中定义了原始cad的大小，cad默认左下方为图形原点,而在前端，canvas以左上方为图形原点，所以在绘制时，在y轴要做相应的处理。
三、entities结构
entities中的常用属性:
- layer:图层名,具体定义在tables.layer中
- lineweight:若为负数，则与图层相关
- clolorIndex: 256, 默认为8位索引色
- color:取值1-255时为索引色，须转化为真彩色，已写好转换函数，若为256，则跟随图层
- type: 用于区分绘制方法，主要有六种： ARC(弧)、CIRCLE(圆)、LINE(线)、 LWPOLYLINE(多段线)、TEXT(文字)、INSERT(图形组合)
四、简单图形画法
图形绘制只取决于entities中的定义, 若图形在entities被定义为简单图形(非INSERT),可直接绘制, 若为组合图形,则需要先在blocks中找到相对应的块定义,然后再进行递归绘制(INSERT有嵌套现象)
- ARC(弧):绘制参数 startAngle,endAngle,center,radius, 这里startAngle,endAngle是弧度值
"center": {
"x": 42,
"y": 92,
"z": 0
},
"clolorIndex": 256,
"color": 256,
"endAngle": 3.14,
"radius": 38,
"startAngle": 2,
"transparency": 1,
"type": "ARC",
"visibility": 0
}
- CIRCLE(圆):绘制参数 center,radius
"center": { "x": 352.5, "y": 284.99990233196877, "z": 0 }, "clolorIndex": 256, "color": 256, "endAngle": 6.2831853071795862, "handle": "4B4", "ownerHandle": "4B0", "radius": 22, "startAngle": 0, "transparency": 1, "type": "CIRCLE", "visibility": 0 },- LINE(线):绘制参数 vertices
"clolorIndex": 256, "color": 256, "handle": "4B7", "lineweight": -1, "ownerHandle": "4B0", "thickness": 0, "transparency": 1, "type": "LINE", "vertices": [ { "x": 30.000000001862645, "y": 394.72598084015772, "z": 0 }, { "x": 30.000000000931323, "y": 72.759200379019603, "z": 0 } ], "visibility": 0 },- LWPOLYLINE(多段线): 绘制参数 vertices ,除圆之外的封闭图形, 如矩形等都是用此方法绘制
"clolorIndex": 256, "color": 256, "handle": "4B7", "lineweight": -1, "ownerHandle": "4B0", "thickness": 0, "transparency": 1, "type": "LINE", "vertices": [ { "x": 7883.5123212374747, "y": 2205.4381490654923 }, { "x": 2499.9998092651367, "y": 2205.4381490654923 }, { "x": 2499.9998092651367, "y": 20889.729460167015 }, { "x": 7883.5123212374747, "y": 20889.729460167015 } ], "visibility": 0 },- TEXT(文字): 绘制参数 text(文字内容), startPoint(起始点),textHeight(font-size)
"clolorIndex": 256, "color": 256, "handle": "4897", "layer": "PUB_TEXT", "ownerHandle": "70", "startPoint": { "x": 70010.297644199571, "y": 2057.6002742293203, "z": -4.2166394174641175e-008 }, "text": "J4", "textHeight": 340, "transparency": 1, "type": "TEXT", "visibility": 0, "xScale": 0.70588235294117652 },
五、组合图形画法
下面是一个典型的组合图形json信息
{
"blocks": {
"A$C22EE24EA": {
"entities": [
{
"angleLength": 6.2831853071795862,
"center": {
"x": 352.5,
"y": 284.99990233196877,
"z": 0
},
"clolorIndex": 256,
"color": 256,
"endAngle": 6.2831853071795862,
"handle": "4B4",
"layer": "卫生间洁具布置",
"ownerHandle": "4B0",
"radius": 22.499999999999996,
"startAngle": 0,
"transparency": 1,
"type": "CIRCLE",
"visibility": 0
},
{
"angleLength": 6.2831853071795862,
"center": {
"x": 352.5,
"y": 284.99990233196877,
"z": 0
},
"clolorIndex": 256,
"color": 256,
"endAngle": 6.2831853071795862,
"handle": "4B5",
"layer": "卫生间洁具布置",
"ownerHandle": "4B0",
"radius": 32.499999999999993,
"startAngle": 0,
"transparency": 1,
"type": "CIRCLE",
"visibility": 0
},
{
"clolorIndex": 256,
"color": 256,
"elevation": 0,
"handle": "4B6",
"hasContinuousLinetypePattern": 0,
"layer": "卫生间洁具布置",
"lineweight": -1,
"ownerHandle": "4B0",
"shape": 0,
"thickness": 0,
"transparency": 1,
"type": "LWPOLYLINE",
"vertices": [
{
"x": 705.00000000093132,
"y": 49.999902331968769
},
{
"x": 705,
"y": 494.99990233196877
},
{
"x": 695,
"y": 504.99990233196877
},
{
"x": 10,
"y": 504.99990233196877
},
{
"x": 0,
"y": 494.99990233196877
},
{
"x": 9.3132257461547852e-010,
"y": 49.999902331968769
}
],
"visibility": 0,
"width": 0
}
]
}
},
"header": {},
"tables": {
"layer": {
"家具": {
"frozen": 0,
"hidden": 0,
"is_off": 0,
"color": 65535,
"line_type": "Continuous",
"line_weight": 9,
"name": "家具",
"plottable": 1,
"transparency": 1
}
},
"lineType": {
"Continuous": {
"description": "Solid line",
"handle": "5D",
"name": "Continuous",
"ownerHandle": "5",
"patternLength": 0
}
}
},
"extents": {
"max": [
80000,
50000,
0
],
"min": [
0,
0,
0
]
},
"entities": [
{
"clolorIndex": 256,
"color": 256,
"handle": "B3C",
"layer": "家具",
"lineweight": -1,
"name": "A$C22EE24EA",
"ownerHandle": "B36",
"position": {
"x": 439402.66226565465,
"y": 58734.603154337034,
"z": 0
},
"rotation": 270,
"transparency": 1,
"type": "INSERT"
}
]
}
绘制流程: 我们先在entities的type中发现这是一个INSERT(图形组合) , 那么我们找到关键绘制参数 position(插入位置), rotation(旋转角度), name(图形块名称,形状在blocks中定义)
"tables": {
"layer": {
"家具": {
"frozen": 0,
"hidden": 0,
"is_off": 0,
"color": 65535,
"line_type": "Continuous",
"line_weight": 9,
"name": "家具",
"plottable": 1,
"transparency": 1
}
}
此处layer名称为“家具”，color为256，lineweight为-1，表明绘图时颜色与线宽跟随图层，在tables中的layer属性中定位到“家具“图层，发现线宽line_weight为9，线型line_type为Continuous，图层颜色为65535，这个颜色是十进制，转成十六进制颜色为#00FFFF，这样就完成了绘制前的准备工作.
绘制时，首先定位到blocks中找到A$C22EE24EA字段，然后在该字段中递归遍历entities对象，对所有非INSERT属性进行绘制。注意在绘制时，在blocks中出现的所有坐标都是相对坐标，要与递归入口处的绝对坐标position相加才能得到相对于图纸的坐标。