建站哪家好要认定兴田德润,做网站设计赚钱吗,深圳网站,企业网站建设推广合同1.mxdraw简介 mxdraw是一个HTML5 Canvas JavaScript框架#xff0c;它在THREE.js的基础上扩展开发#xff0c;为用户提供了一套在前端绘图更为方便#xff0c;快捷#xff0c;高效率的解决方案#xff0c;mxdraw的实质为一个前端二维绘图平台。你可以使用mxdraw在画布上绘…1.mxdraw简介 mxdraw是一个HTML5 Canvas JavaScript框架它在THREE.js的基础上扩展开发为用户提供了一套在前端绘图更为方便快捷高效率的解决方案mxdraw的实质为一个前端二维绘图平台。你可以使用mxdraw在画布上绘制图形给图形添加事件移动、缩放和旋转图形等。
2.快速使用 安装mxdraw 使用包管理器未避免影响后续使用建议始终安装最新版的mxdraw库 npm install mxdrawlatest
也可使用 script 标签引入
script srchttps://unpkg.com/mxdraw/dist/mxdraw.umd.js/script3.基础使用 mxdraw.js依赖canvas标签打开画布但由于canvas会根据父元素的宽高来自动调整大小为保证绘制不失真需要固定canvas父级的宽高且在父元素上设置属性overflow:hidden。在页面中创建好画布后可根据自身需求执行不同的绘制函数创建画布的示例代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlemxdraw基础使用示例/titlescript srchttps://unpkg.com/mxdraw/dist/mxdraw.umd.js/script
/head
script typemoduleMx.loadCoreCode().then(() {// 创建控件对象Mx.MxFun.createMxObject({canvasId: mxdraw, // canvas元素的idcallback: (mxobj, dom) {//图纸展示控件创建完成后的回调函数 回调参数mxDraw和domconsole.log(mxobj, dom);mxobj.on(openFileComplete, (iRet) {// 绘制直线let line new Mx.MxDbLine();line.pt1 new THREE.Vector3(0, 0, 0);line.pt2 new THREE.Vector3(100, 100, 0);mxobj.addMxEntity(line);// 绘制圆let circle new Mx.MxDbCircleShape()circle.center new THREE.Vector3(50, 50, 0)circle.xRadius circle.yRadius 20circle.isClosedToCenter falsemxobj.addMxEntity(circle)// 绘制文本let text new Mx.MxDbText()text.position new THREE.Vector3(50, 50, 0)text.height Mx.MxFun.screenCoordLong2Doc(50)text.text 测试文本mxobj.addMxEntity(text)mxobj.zoomW(line.pt1, line.pt2);});},});})
/scriptbodydiv styleheight: 80vh; overflow: hidden;canvas idmxdraw/canvas/div
/body/html4.下载云图开发包
下载地址https://www.mxdraw.com/download.html
下载完后进行解压启动服务
启动MxCAD如下图演示效果 5.找到目标项目文件夹 distMxCAD APP 在线打包后的前端资源 MxCAD: MxCAD APP 插件的二次开发项目(用户可在该基础上开发功能) MxCADiframe: 通过 iframe 嵌入 MxCAD APP 的示例 demo 6.MxCAD APP 插件的二次开发项目
进入 MxCAD 目录, 运行npm install安装依赖调用npm run dev命令运行 MxCAD APP在线CAD 7.配置说明 Mxcad App 项目文件夹下的 dist 目录是打包后的前端资源我们可以通过修改该目录下的 mxUiConfig.json 配置文件修改项目UI设置
如下图调用cmd命令可进行功能操作 打开文件命令: “cmd”: “OpenDwg”, 另存为mxweb文件命令:“cmd”: “Mx_SaveAs” 绘制圆弧命令: “cmd”: “Mx_Arc”, 等等。
8.具体相关api属性可参考mxCAD在线文档
