guidePage.vue 1.23 KB
<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-05-31 17:35:03
-->
<template>
  <canvas id="mxcad">
  </canvas>
</template>
<script>
  import Mx from "mxdraw"
  export default {
    mounted () {
      Mx.loadCoreCode().then(() => {
        // Mx.MxFun.setMxServer("ws://localhost:5090") // 开启socket通信 可编辑图纸
        // 创建控件对象
        Mx.MxFun.createMxObject({
          canvasId: "mxcad", // canvas元素的id
          cadFile: "./buf/$hhhh#Layout1#.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 // 是否新建文件
        })
      })
    }
  }
</script>
<style scoped lang='scss'>
  #cad-container {
    width: 100%;
    height: 100%;
  }
</style>