首页 > 其他分享 >如何在Vue里打开CAD,DWG文件”

如何在Vue里打开CAD,DWG文件”

时间:2022-10-05 11:03:44浏览次数:100  
标签:vue MxFun mxdraw 点击 Vue DWG 安装 Mx CAD


Node环境安装

 这里以一个Vue3工程为例子,首先安装Node​​下载 | Node.js​​请根据电脑操作系统安装对应的安装包

步骤 1 : 双击下载后的安装包,如下所示:

如何在Vue里打开CAD,DWG文件”_vue.js

步骤 2 : 点击上图的Run(运行),将出现如下界面:

如何在Vue里打开CAD,DWG文件”_javascript_02

步骤 3 : 勾选接受协议选项,点击 next(下一步) 按钮 :

如何在Vue里打开CAD,DWG文件”_vscode_03

步骤 4 : Node.js默认安装目录为  C:\Program Files\nodejs\, 你可以修改目录,并点击 next(下一步):

如何在Vue里打开CAD,DWG文件”_css_04

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next(下一步) 

如何在Vue里打开CAD,DWG文件”_前端_05

步骤 6 :点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步):

如何在Vue里打开CAD,DWG文件”_前端_06

安装过程:

如何在Vue里打开CAD,DWG文件”_javascript_07

点击 Finish(完成)按钮退出安装向导。 

如何在Vue里打开CAD,DWG文件”_vue.js_08

2.Node安装完成后需要配置环境变量 

如何在Vue里打开CAD,DWG文件”_前端_09

  

检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path", 输出如下结果:

如何在Vue里打开CAD,DWG文件”_前端_10

我们可以看到环境变量中已经包含了 C:\Program Files\nodejs\ 

如果没有,我们就需要把我们前面安装Node 步骤四中安装目录设置为环境变量:

找到我的电脑 =》鼠标右键选择=》 选择属性=》 找到高级系统设置=》 环境变量=》 变量path=》 点击编辑=》将node安装目录填上并确定

如何在Vue里打开CAD,DWG文件”_前端_11

 

 

如何在Vue里打开CAD,DWG文件”_css_12

 

如何在Vue里打开CAD,DWG文件”_javascript_13

如何在Vue里打开CAD,DWG文件”_javascript_14

如何在Vue里打开CAD,DWG文件”_css_15

最后检查一下Node.js版本看是否安装成功

 

如何在Vue里打开CAD,DWG文件”_vue.js_16

编辑器 vscode

也可以是代码其他编辑器,这里以vscode为例

1.安装vscode​​Visual Studio Code - Code Editing. Redefined

如何在Vue里打开CAD,DWG文件”_javascript_17

https://code.visualstudio.com/​

2.安装vetur 插件点击install安装

如何在Vue里打开CAD,DWG文件”_前端_18

3.vscode 命令行权限不足的问题: 例如执行vue、yarn等命令报错 在安装了@vue/cli提示vue不是内部命令这种情况,应该以管理员身份运行powerell命令行

4.如果在powerell也无法运行对应的命令就是没有设置对应的环境变量,比如yarn安装了,并且用yarn下载了@vue/cli 那么 vue不是内部命令就是yarn或者vue没有配置对应的环境变量,这里yarn环境配置 默认位置 :C:\Users\Mx\AppData\Local\Yarn\bin

配置完成后再重新安装@vue/cli就行了

如何在Vue里打开CAD,DWG文件”_vue.js_19

执行命令 设置权限

get-ExecutionPolicy
set-ExecutionPolicy RemoteSigned

选择并输入Y或者A,然后再重新启动vscode打开命令行就好。

如何在Vue里打开CAD,DWG文件”_vue.js_20

项目应用构建

基于Vue-cli构建Vue单页面应用程序

1.打开命令行安装vue-cli脚手架工具(已安装跳过此步骤)

npm install -g @vue/cli
# OR(或)
yarn global add @vue/cli
# 通过查看版本检查是否安装成功
vue --version


2.命令行运行命名创建新项目


# 创建名为mxdraw-test-vue3 的一个新Vue项目
vue create mxdraw-test-vue3
# 如果选择default则会直接创建项目,创建项目包括babel\eslin这些工具,比如Router/Vuex等其他依赖需要自己手动安装
? P1ease pick a preset:
# 默认选项
Default (vue 3)([vue 3] babel, eslint)
# 手动选择功能
Manually select features

如果选择Manually select features(手动安装)则会进入下一步选项:(这里推荐大家进行手动配置)

? Check the features needed for your project :
(*) Choose vue version # 选择vue版本
(*) Babel # 代码编译
(*) TypeScript # ts
( ) Progressive Web App (PWA)Support # 支持渐进式网页应用程序
(*) Router # vue路由
( ) vuex # 状态管理模式
( ) css Pre-processors # css预处理
(*) Linter ; Formatter # 代码风格、格式校验
( ) Unit Testing # 单元测试
( ) E2E Testing # 端对端测试

 TypeScript 选项配置

# 选择使用哪个版本的vue框架
? Choose a version of Vue.js that you want to start the project with
2.x # vue2.x
3.x # vue3.x
# 询问的是是否使用class风格的组件语法,如果在项目中想要保持使用TypeScript的class风格的话,建议大家选择y。
? Use class-style component syntax? (Y/n)
# 使用Babel与TypeScript一起用于自动检测的填充?这里一定要选择y
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

 Router 选项配置

# 路由是否使用history模式?如果项目中存在要求就使用history(即:y),但是一般还是推荐大家使用ha模式,毕竟history模式需要依赖运维。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

 CSS Pre-processors css 选项配置

# 选择一种CSS预处理类型,根据各个项目的要求使用对应css编译处理
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus

 Linter / Formatter 选项配置

# TSLint只有在选择TypeScript时才会存在。
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only # 只进行报错提醒
ESLint + Airbnb config # 不严谨模式
ESLint + Standard config # 正常模式
ESLint + Prettier # 严格模式
TSLint (deprecated) # TypeScript格式验证工具
# 选择校验时机,一般都会选择保存时校验,好及时做出调整
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) Lint on save # 保存时检测
( ) Lint and fix on commit # 修复和提交时检测

 Unit Testing 选项配置

# 选择单元测试解决方案,普遍用到最多的是Mocha + chai
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
Jest

E2E Testing E2E(End To End)选项配置

# 选择端对端测试的类型
? Pick a E2E testing solution: (Use arrow keys)
> Cypress (Chrome only)
Nightwatch (WebDriver-based)

 额外选项

# 选择Babel,PostCSS, ESLint等自定义配置的存放位置。这里建议大家选择第一个
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files # 存放在专用配置文件中
In package.json # 存放在package.json中
# 是否保存当前选择的配置项,如果当前配置是经常用到的配置,建议选择y存储一下当前配置项
? Save this as a preset for future projects? (y/N)
# 选择n之后则会直接开始创建项目了,选择y之后则会输入一个存储当前配置项的名称:
? Save preset as:

3.运行项目

cd mxdraw-test-vue3
yarn serve

详细说明请参考 ​​[vue-cli文档指南]

如何在Vue里打开CAD,DWG文件”_javascript_17

https://cli.vuejs.org/zh/guide/prototyping.html​

vue框架使用请参考​​[Vue.js 中文文档]​

安装 npm

yarn add mxdraw 或 npm install mxdraw

用法

1.引入

import Mx from "mxdraw"

2.加载

<canvas id="mxcad">
</canvas>

3.javascript

import Mx from "mxdraw"
// 动态加载 js库核心代码
Mx.loadCoreCode().then(()=> {
// Mx.MxFun.setMxServer("ws://localhost:5090") // 开启socket通信 可编辑图纸
// 创建控件对象
Mx.MxFun.createMxObject({
canvasId: "mxcad", // canvas元素的id
cadFile: "/demo/buf/$hhhh.dwg.mxb1.wgh", // http方式(预览): 加载public/demo文件夹下转换后的图纸
// cadFile: "test2.dwg", // socket通信方式请直接提供图纸名称 如:text.dwg
callback: (mxDraw, {
canvas,
canvasParent
}) => {
// 可以拿到canvas元素和它的父级元素
console.log(canvas, canvasParent)
console.log(mxDraw)
// 拿到图层数据
mxDraw.addEvent('uiSetLayerData', (listLayer) => {
console.log(listLayer)
})
},
isNewFile: true // 是否新建文件
})
})

如何实现一个画线的功能命令?

1.实现画线功能

参考资料: 

* ​​[MrxDbgUiPrPointClass | getPoint]​​ 构建取点对象

*  ​​[status]​​ MrxDbgUiPrBaseReturn表示对应状态

* ​​[McEdGetPointWorldDrawObjectClass | pWorldDraw] ​​用于构建一个动态绘制回调对象

* ​​[MxThreeJS]​​ three.js 基础封装的一些功能

* ​​[pt1 | pt2 | lastPt]​​ THREE.Vector3 数据类型

javascript

import Mx from "mxdraw"
// 画线的函数
function BR_Line() {
// 构建取点对象
const getPoint = new Mx.MrxDbgUiPrPoint();
// 构建动态绘制对象
const worldDrawComment = new Mx.McEdGetPointWorldDrawObject();
// 开始动态拖动 行为: 鼠标点击画布时只执行一次回调函数,后续点击无效
getPoint.go((status) => {
if (status !== 0) {
return;
}
// 获取鼠标在画布上的第一个点
const pt1 = getPoint.value();
// 将第一个点作为起始点
let lastPt = pt1.clone();
// 设置动态绘制的回调函数
worldDrawComment.setDraw((currentPoint, pWorldDraw) => {
// 绘制当前鼠标移动点到起始点的线段
pWorldDraw.drawLine(currentPoint, lastPt);
});
// 设置取点对象交互过程中的动态绘制调用对象
getPoint.setUserDraw(worldDrawComment)

// 开启动态拖动,连续取点,直到ESC退出。 行为: 鼠标点击一下执行一次回调函数
getPoint.goWhile((status) => {
if (status === 0) {
// 获取第二个点的位置
const pt2 = getPoint.value();
// 拿到Three的场景对象
let sence = Mx.MxFun.getCurrentDraw().getScene();
// 创建一条 从起始点到 当前点击位置的线段
let line = Mx.MxThreeJS.createLine(lastPt, pt2, 0xffffff);

// 将线段添加到场景中
sence.add(line);
// 将第二点作为起始点
lastPt = pt2
}
});
});
}

参考资料: 2.注册使用命名

* ​​[MxFun.addCommand]​​ 注册命名方法

* ​​[MxFun.sendStringToExecute]​​ 执行命名方法

* ​​[MxFun.isRunningCommand]​​检查是否有命令在运行

javascript

import Mx from "mxdraw"
// 注册命名
Mx.MxFun.addCommand("BR_Line", ()=> {
if(Mx.MxFun.isRunningCommand()) {
return
}
BR_Line()
})
// 执行命令
Mx.MxFun.sendStringToExecute("BR_Line")

更多Api使用说明请参考​​[Mx模块集]​​对应模块中的Api接口说明

按需引入配置

使用​​babel​​​插件​​babel-plugin-import​​ 实现按需引入

需要安装 ​​npm i babel-plugin-import-D​​​ 然后找到或创建项目根目录的​​ .babelrc​​文件新增如下内容:

json

{
"plugins": [
[
"import", {
"libraryName": "mxdraw",
"libraryDirectory": "dist/lib/MxModule",
"camel2UnderlineComponentName": false,
"camel2DaComponentName": false
}
]
]
}

javascript基于​​babel-plugin-import​​ 按需引入

import { MxFun } from "mxdraw"

或者直接通过​​import MxFun from "mxdraw/dist/lib/MxModule/MxFun"​​ 这样的方式直接引入对应模块

标签:vue,MxFun,mxdraw,点击,Vue,DWG,安装,Mx,CAD
From: https://blog.51cto.com/u_10455293/5732398

相关文章

  • vue nextTick的用法
    一、什么是vue.nextTick()定义:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。所以就衍生出了这个获取更新后的DOM......
  • 说说你对Vue的keep-alive的理解
    什么是keep-alive在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件。也就是说,keep......
  • OpenCASCADE BRep Precision
    [email protected]: Severalgeometricrepresentationsmaybeattachedtoatopological(B-Rep)object.Theserepresentationsare......
  • quick-vue3-admin
    quick-vue3-admin是一款免费开源快速搭建中后台系统框架。本框架基于vite2+element-plus等最新主流技术并封装了通用的组件方便开发者提高工作效率。后期也会通过版本升......
  • 【vue3+ts后台管理】项目搭建
    文章目录​​项目创建​​​​引入element-plus​​​​完整引入​​​​按需引入​​​​【vue3+typescript】Vue3+TS电商后台系统项目实战​​项目创建首先执行​​vuecr......
  • vue入门学习
    视频链接vue是什么?一套用于构建用户界面的渐进式javascript框架。构建用户界面指给他数据,构造用户看到的页面。渐进式指可以适应简单的,然后逐渐往里面加东西变成复杂的......
  • vue源码中的渲染过程是怎样的
    4.1VirtualDOM4.1.1浏览器的渲染流程当浏览器接收到一个Html文件时,JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度,它首先会将html文件解析成一个DOM树,与此......
  • 从vue源码中学习观察者模式
    摘要:源码解读设计模式系列文章将陆陆续续进行更新中~摘要:源码解读设计模式系列文章将陆陆续续进行更新中~观察者模式首先话题下来,我们得反问一下自己,什么是观察者模式?......
  • 从vue源码中学习观察者模式
    摘要:源码解读设计模式系列文章将陆陆续续进行更新中~摘要:源码解读设计模式系列文章将陆陆续续进行更新中~观察者模式首先话题下来,我们得反问一下自己,什么是观察者模式......
  • 手摸手,带你用vue撸后台 系列三(实战篇)
      完整项目地址:​​vue-element-admin​​系列文章:​​手摸手,带你用vue撸后台系列一(基础篇)​​​​手摸手,带你用vue撸后台系列二(登录权限篇)​​​​手摸手,带你用......