项目有个需求二维图展示dxf文件,主要是可以显示CAD里面的标注。
其实在数据格式化还是比较好实现的只需要下载依赖使用就可以了。问题主要出在了three-dxf。引入各种报错。
在网上也找到了关于在vue项目中使用的例子,拿过来搬过去依然是报错不断。附上链接原vue集成项目地址
此时心态已经裂开了。研究了几天。
网上关于这个问题的例子比较少。下面就来看下实现过程吧
先看效果:中文,标注,都显示出来了
第一步下载依赖。
npm i dxf-parser@1.1.2
截止到我现在使用的是1.1.2版本。看起来也很久没更新了。估计是不更新了吧
第二步 引入js文件
在public目录下添加JS文件,这个文件就是项目地址中public目录里面的threedxf文件夹里面的js,放到你的public中即可
此时基本就算是完成了,看下使用吧
js部分
//引入JS文件依赖
import DxfParser from "dxf-parser";
import { Viewer } from "/public/threedxf/three-dxf.js";
export default {
name: "ThreeDXF",
data() {
return {
dxfLoading: false,
};
},
mounted() {},
methods: {
onFileSelected(evt) {//选择文件事件
let self = this;
var file = evt.target.files[0];
var reader = new FileReader();
reader.onprogress = self.updateProgress;
reader.onloadend = self.onSuccess;//选择文件完成后调用onSuccess方法
reader.onabort = self.abortUpload;
reader.onerror = self.errorHandler;
reader.readAsText(file);
},
errorHandler(evt) {
switch (evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert("File Not Found!");
break;
case evt.target.error.NOT_READABLE_ERR:
alert("File is not readable");
break;
case evt.target.error.ABORT_ERR:
break;
default:
alert("An error occurred reading this file.");
}
},
onSuccess(evt) {
this.dxfLoading = true;
var fileReader = evt.target;
if (fileReader.error) return console.log("error onloadend!?");
var parser = new DxfParser();
var dxf = parser.parseSync(fileReader.result);//使用dxf-parse格式化参数
document.getElementById("dxf-view").innerHTML = "";//这里获取元素,用于three画布展示
let width = this.$refs.dxfView.offsetWidth;
let height = this.$refs.dxfView.offsetHeight;
Viewer(
dxf,
document.getElementById("dxf-view"),
width,
height,
this.LoadingClose
);//最终使用Viewer方法把格式化的参数,元素,宽高。回调传入即可
},
LoadingClose() {
this.dxfLoading = false;
},
handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = "copy";
},
},
};
HTML部分
<div class="container">
<div role="form">
<div class="form-group">
<label for="exampleInputFile">选择一个DXF文件</label>
<input
type="file"
accept=".dxf"
id="dxf"
name="file"
@change="onFileSelected"
/>
<div class="progress progress-striped" style="width: 300px">
<div
id="file-progress-bar"
class="progress-bar progress-bar-success"
role="progressbar"
style="width: 0"
></div>
</div>
<div id="file-description" class="help-block"></div>
</div>
</div>
<div class="code-editor-wrapper" v-loading="dxfLoading">
<div id="dxf-view" ref="dxfView" class="dxfView"></div>
</div>
</div>
CSS部分
.code-editor-wrapper {
/* margin: 56px auto 0 auto; */
width: 25vw !important;
height: 50vh;
border: 1px solid #000;
}
.dxfView {
width: 25vw;
height: 50vh;
background: #fff;
}
来看下运行效果吧
有标注,显示中文。暂时是完成了我的需求
最后附上项目地址项目地址