zdt.vue 1.09 KB
<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-09-14 16:06:51
-->
<template>
  <div style="width:90%;height:100%;">
    <canvas id="mxcad" style="width:90%;height:80%; position: relative;top:0">
    </canvas>
  </div>
</template>
<script>
  import Mx from "mxdraw"
  export default {
    mounted () {
      // 动态加载 js库核心代码
      Mx.loadCoreCode().then(() => {
        // Mx.MxFun.setMxServer("ws://localhost:5090") // 开启socket通信 可编辑图纸
        // 创建控件对象
        Mx.MxFun.createMxObject({
          canvasId: "mxcad", // canvas元素的id
          cadFile: "buf/hhhh.dwg", // http方式(预览): 加载public/demo文件夹下转换后的图纸
          callback: (mxDraw, {
            canvas,
            canvasParent
          }) => {
            // 可以拿到canvas元素和它的父级元素
            // 拿到图层数据
            mxDraw.addEvent('uiSetLayerData', (listLayer) => {
              console.log(listLayer)
            })
          },
          isNewFile: true // 是否新建文件
        })
      })
    }
  }
</script>