sl-sfy-safety/src/views/page-config/component/mapContainer/LabelItem.vue

<template>
  <v-image ref="pointRef" :config="getPointCurvConfig(props.shop.posType, curvImage)" />
  <v-image :config="getCirConfig(props.shop.posType, cirImage)" />
  <v-image ref="rectRef" :config="getRectCurConfig(props.shop.posType, rectImage)" />
  <v-text :config="getTextConfig(props.shop)" />
  <v-image :config="shineConfig(props.shop.posType, shineImage)" />
</template>

<script setup lang="ts">
  import { ref, onMounted, nextTick, watch } from 'vue';
  import rectBlock from '@/assets/test/2-rect.svg';
  import pointCurv from '@/assets/test/1-curv2.svg';
  import shine from '@/assets/test/2-shining.svg';
  import circle from '@/assets/test/1-cir.svg';
  import Konva from 'konva';
  import { MapWorkShopInfoItem } from '../../stores/useMapEditor';
  import {
    getRGBANum,
    getPointCurvConfig,
    getCirConfig,
    getRectCurConfig,
    getTextConfig,
    shineConfig,
  } from './labelConfig';

  const props = defineProps<{ shop: MapWorkShopInfoItem }>();

  const curvImage = ref<HTMLImageElement>(new Image());
  const rectImage = ref<HTMLImageElement>(new Image());
  const shineImage = ref<HTMLImageElement>(new Image());
  const cirImage = ref<HTMLImageElement>(new Image());
  const rectRef = ref<Konva.Image>();
  const pointRef = ref<Konva.Image>();

  const nodeUpdateFilter = (node: Konva.Node) => {
    node.cache();
    const rgba = getRGBANum(props.shop.bgColor);
    node.red(rgba[0]);
    node.green(rgba[1]);
    node.blue(rgba[2]);
    node.alpha(rgba[3]);
  };

  watch(
    () => props.shop,
    () => {
      nextTick(() => {
        nodeUpdateFilter(pointRef.value!.getNode());
        nodeUpdateFilter(rectRef.value!.getNode());
      });
    },
    { deep: true },
  );

  onMounted(() => {
    const svgImg = new Image();
    svgImg.onload = () => {
      curvImage.value = svgImg;
      nextTick(() => {
        nodeUpdateFilter(pointRef.value?.getNode());
      });
    };
    svgImg.src = pointCurv;

    const rectImg = new Image();
    rectImg.onload = () => {
      rectImage.value = rectImg;
      nextTick(() => {
        nodeUpdateFilter(rectRef.value?.getNode());
      });
    };
    rectImg.src = rectBlock;

    const shineImg = new Image();
    shineImg.onload = () => {
      shineImage.value = shineImg;
    };
    shineImg.src = shine;

    const cirImg = new Image();
    cirImg.onload = () => {
      cirImage.value = cirImg;
    };
    cirImg.src = circle;

    rectRef.value?.getNode().filters([Konva.Filters.RGBA]);
    pointRef.value?.getNode().filters([Konva.Filters.RGBA]);
  });
</script>

<style scoped></style>