zdt.vue 1.22 KB
<!--
  功能:初始化功能描述
  作者:calliope
-->
<template>
  <canvas id="mxcad">
  </canvas>
</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: "./cad.dwg", // 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 // 是否新建文件
        })
      })
    }
  }
</script>
<style scoped lang='scss'>
  #cad-container {
    width: 100%;
    height: 100%;
  }
</style>