konvajs 和 高德地图 在vue2 dialog弹框中使用

konvajs 在 element dialog弹框中, 弹框加载出来, konvajs => canvas 却没有加载出来

原因: konvajs在普通页面上可以直接加载, 在弹框中, 想要加载出来, 则需要使用 dialog的两个事件, 打开弹框后调用和,离开弹框调用

    <!-- 详情:  @opened="onDialogOpened" dialog弹框打开后才会执行,避免konvajs未加载, @closed="onDialogClosed" 重置 -->

<template>
    <div>
      <el-button @click="openDialog">打开弹框</el-button>
      <!-- 详情  @opened="onDialogOpened" dialog弹框打开后才会执行,避免konvajs未加载, @closed="onDialogClosed" 重置 -->
      <el-dialog v-model:visible="dialogVisible" title="KonvaJS 弹框示例" width="50%" @opened="onDialogOpened">
        <div>
          <div ref="container" style="width: 500px; height: 500px;"></div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import Konva from 'konva';
  
  export default {
    data() {
      return {
        dialogVisible: false,
        stage: null
      };
    },
    methods: {
      openDialog() {
        this.dialogVisible = true;
      },
  
      createKonvaStage() {
        const container = this.$refs.container;
        if (container) {
          this.stage = new Konva.Stage({
            container: container,
            width: 300,
            height: 300
          });
  
          const layer = new Konva.Layer();
          const rect = new Konva.Rect({
            x: 50,
            y: 50,
            width: 100,
            height: 100,
            fill: 'red',
            draggable: true
          });
  
          layer.add(rect);
          this.stage.add(layer);
        }
      },
  
      onDialogOpened() {
        this.createKonvaStage();
      }
    }
  };
  </script>
  
  <style scoped>
  /* 添加样式以适应您的需求 */
  </style>

地图等比换算 

const mapId = this.form.mapId;
      await getToolsMap(mapId).then((response) => {
        console.log("地图详情", response);
        //
        this.fenceForm.mapDir = response.mapDir; // 地图地址
        console.log("地图图片地址", this.fenceForm.mapDir);

        /**
          换算比例 米 / 最大米 = 像素 / 最大像素
          m / mmax = px / pxmax
          m = (px / pxMax) * mMax = px / (pxMax / mMax)
          px = (m / mMax) * pxMax = m * (pxMax / mMax)
        */
        //px to m  = m to px
        this.circle_PxToM_X = response.mapPixelX / response.mapMeterX;
        this.circle_PxToM_Y = response.mapPixelY / response.mapMeterY;

        console.log(
          "换算比例, x , y",
          this.circle_PxToM_X,
          this.circle_PxToM_Y
        );
      });

高德地图也是如此 (父传递子组件,子监听),不过我高德地图用的是监听解决的, 后边konvajs发现dialog有事件可以解决

这里就不过多演示了

  // 监听 map地图 的变化, dialog中
  watch(dialogVisible, (newValue) => {
    if (newValue === true) {
      mapFun()
    } else {
      showInputCircle.value = false // 默认隐藏
      // console.log(showInputCircle.value);
  
      path.value = [] // 多边形编辑
      inputCircleValue.value = 1000 // 圆 半径
      // lng.value = '' // 圆 经度
      // lat.value = '' // 圆 维度
      // const lng = ref('113.625317') //经度 默认
      // const lat = ref('34.746308') //维度 默认
  
      map?.destroy()
      // console.log('地图已关闭')
    }
  })

补充：其实我们可以在弹框打开方法的后边，执行一次调用 方法， 前提是我们不能提前注册 地图 和 konvajs

dialog 文本居中 (dialog)

     <el-dialog
      :visible.sync="openDetail"
      width="80%"
      append-to-body
      @opened="onDialogOpened"
      @closed="onDialogClosed"
      :fullscreen="fullscreen"
    >

    <!-- 标题居中,全屏按钮 -->
      <template slot="title">
        <div style="display: flex; align-items: center;justify-content: space-between;">
          <span
            style="
              font-size: 20px;
              color: #38b48b;
              font-weight: bold;
              text-align: center;
            "
          >
            {{ title }}
          </span>
          <div style="margin-right: 32px;">
            <el-button
              icon="el-icon-full-screen"
              @click="toggleFullScreen"
            ></el-button>
          </div>
        </div>
      </template>










<el-dialog
      :title="title"
      :visible.sync="openDetail"
      width="80%"
      append-to-body
      @opened="onDialogOpened"
      @closed="onDialogClosed"
      :fullscreen="fullscreen"
    >
      <!-- 标题居中,全屏按钮 -->
      <template slot="title">
        <div
          style="
            display: flex;
            align-items: center;
            /* justify-content: space-between; */
          "
        >
          <span
            style="
              font-size: 20px;
              /* color: #38b48b; */
              color: #606266;
              font-weight: bold;
              width: 100%;
              text-align: center;
            "
          >
            {{ title }}
          </span>
          <div style="text-align: right">
            <el-button
              icon="el-icon-full-screen"
              @click="toggleFullScreen"
            ></el-button>
          </div>
        </div>
      </template>
      <!--  -->
      <!-- konvajs 绘制 -->