qingdao-employment-service/pages/index/components/AIMatch.vue

<template>
  <view class="container">
    <view id="matchCanvas" class="match-canvas" @click="handleCanvasClick"></view>
  </view>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import * as PIXI from "pixi.js";

const appRef = ref(null);
const tagsContainer = ref(null); // 标签容器
const emit = defineEmits(["tag-click"]);

// 名称、颜色、大小、位置（角度、半径）
const mockTags = [
  {
    name: "医生",
    bgColor: 0x0069fe,
    fontColor: 0xffffff,
    size: 17,
    opacity: 1.0,
    angle: 0,
    radius: 0,
  },
  {
    name: "工程师",
    bgColor: 0x87e2ec,
    fontColor: 0xffffff,
    size: 14,
    opacity: 1,
    angle: -Math.PI / 2, // 12点方向
    radius: 68,
    tailRotation: Math.PI / 2, // 拖尾向下
  },
  {
    name: "建筑师",
    bgColor: 0xffebeb,
    fontColor: 0xff6969,
    size: 11.5,
    opacity: 1,
    angle: -Math.PI / 4.2, // 1点方向
    radius: 125,
    tailRotation: (3 * Math.PI) / 4, // 拖尾向左下
  },
  {
    name: "律师",
    bgColor: 0x21ea85,
    fontColor: 0xffffff,
    size: 15,
    opacity: 1,
    angle: -Math.PI / 10, // 2点方向
    radius: 130,
    tailRotation: (3 * Math.PI) / 4, // 拖尾向左下
  },
  {
    name: "记者",
    bgColor: 0xebf3ff,
    fontColor: 0x1d71ef,
    size: 12,
    opacity: 1,
    angle: Math.PI / 120, // 3点方向
    radius: 130,
    tailRotation: Math.PI, // 拖尾向左
  },
  {
    name: "程序员",
    bgColor: 0xffd4b6,
    fontColor: 0xffffff,
    size: 14.5,
    opacity: 1,
    angle: Math.PI / 9, // 4点方向
    radius: 120,
    tailRotation: (5 * Math.PI) / 4, // 拖尾向左上
  },
  {
    name: "摄影师",
    bgColor: 0xd8e5fe,
    fontColor: 0x1d71ef,
    size: 11,
    opacity: 1,
    angle: Math.PI / 3, // 5点方向
    radius: 75,
    tailRotation: (3 * Math.PI) / 2, // 拖尾向上
  },
  {
    name: "设计师",
    bgColor: 0xff9400,
    fontColor: 0xffffff,
    size: 14,
    opacity: 1,
    angle: (2 * Math.PI) / 3, // 7点方向
    radius: 92,
    tailRotation: (7 * Math.PI) / 4, // 拖尾向右上
  },
  {
    name: "心理咨询师",
    bgColor: 0xebf3ff,
    fontColor: 0x1d71ef,
    size: 10.5,
    opacity: 1,
    angle: (5.4 * Math.PI) / 6, // 8点方向
    radius: 110,
    tailRotation: 0, // 拖尾向右
  },
  {
    name: "护士",
    bgColor: 0xff6969,
    fontColor: 0xffffff,
    size: 15,
    opacity: 1,
    angle: (6.3 * Math.PI) / 5.9, // 10点方向
    radius: 110,
    tailRotation: Math.PI / 4, // 拖尾向右下
  },
  {
    name: "会计",
    bgColor: 0xfce9c9,
    fontColor: 0xfbc55f,
    size: 13,
    opacity: 1,
    angle: (7.2 * Math.PI) / 5.9, // 11点方向
    radius: 120,
    tailRotation: Math.PI / 4, // 拖尾向右下
  },
];

onMounted(async () => {
  if (appRef.value) return;
  // 初始化 PIXI 应用
  const canvas = document.getElementById("matchCanvas");
  const sw = canvas.clientWidth;
  const sh = canvas.clientHeight;
  const app = new PIXI.Application({
    backgroundAlpha: 0,
    antialias: true,
    autoDensity: true,
    width: sw,
    height: sh,
    backgroundColor: 0xf5f7fa,
  });
  appRef.value = app;

  canvas.appendChild(app.view);

  // 标签容器
  const container = new PIXI.Container();
  tagsContainer.value = container;
  app.stage.addChild(container);

  // 存储已放置标签的信息
  const placedTags = [];

  for (let i = 0; i < mockTags.length; i++) {
    const { angle, radius, tailRotation, ...tagData } = mockTags[i];
    const x = sw / 2 + radius * Math.cos(angle);
    const y = sh / 2 + radius * Math.sin(angle);
    const tag = createTag(tagData, x, y, placedTags, app, i);

    // 上下浮动动画
    const originalY = tag.y;
    let floatOffset = Math.random() * Math.PI * 2;
    let floatSpeed = 0.01 + Math.random() * 0.02;
    let floatRange = 2 + Math.random() * 2;

    // 拖尾效果
    if (radius > 0) {
      const tail = createCometTail(tagData.bgColor, tailRotation, tag);
      // 使用 addChildAt
      tag.addChildAt(tail, 0);
      // 拖尾动画
      app.ticker.add(() => {
        if (tail.updateTail) {
          tail.updateTail();
        }
      });
    }

    // 上下浮动动画
    app.ticker.add(() => {
      floatOffset += floatSpeed;
      tag.y = originalY + Math.sin(floatOffset) * floatRange;
    });

    container.addChild(tag);
    placedTags.push({
      ...tagData,
      bounds: tag.getBounds(),
      angle,
      radius,
      tailRotation,
      tagInstance: tag, // 保存标签实例
    });
  }
});
// 创建拖尾
function createCometTail(bgColor, tailRotation, tag) {
  const tailGroup = new PIXI.Container();

  // 拖尾位置
  tailGroup.x = 0;
  tailGroup.y = 0;

  const tail = new PIXI.Graphics();
  tailGroup.addChild(tail);

  // 拖尾参数
  const baseLength = 45; // 基础长度
  const startWidth = tag.width * 0.9; // 起始宽度（长边）
  const endWidth = 35; // 末端宽度（短边）

  // 拖尾动画参数
  let breathPhase = Math.random() * Math.PI * 2;
  const breathSpeed = 0.04;

  // 更新拖尾呼吸动画
  tailGroup.updateTail = () => {
    breathPhase += breathSpeed;
    const breathScale = 0.85 + 0.15 * Math.sin(breathPhase);
    tail.clear();

    // 绘制梯形拖尾
    const currentLength = baseLength * breathScale;
    // 计算拖尾的四个顶点
    // 长边在标签中心  水平方向
    const startLeft = { x: -startWidth / 2, y: 0 };
    const startRight = { x: startWidth / 2, y: 0 };

    // 短边在拖尾方向 保持水平
    const endCenter = {
      x: Math.cos(tailRotation) * currentLength,
      y: Math.sin(tailRotation) * currentLength,
    };

    const endLeft = {
      x: endCenter.x - endWidth / 2,
      y: endCenter.y,
    };

    const endRight = {
      x: endCenter.x + endWidth / 2,
      y: endCenter.y,
    };

    // 使用分段绘制实现渐变
    const segments = 6;
    for (let i = 0; i < segments; i++) {
      const progress = i / segments;
      const nextProgress = (i + 1) / segments;

      // 计算分段的位置 - 保持长边水平
      const segmentStartLeft = {
        x: startLeft.x * (1 - progress) + endLeft.x * progress,
        y: startLeft.y * (1 - progress) + endLeft.y * progress,
      };
      const segmentStartRight = {
        x: startRight.x * (1 - progress) + endRight.x * progress,
        y: startRight.y * (1 - progress) + endRight.y * progress,
      };
      const segmentEndLeft = {
        x: startLeft.x * (1 - nextProgress) + endLeft.x * nextProgress,
        y: startLeft.y * (1 - nextProgress) + endLeft.y * nextProgress,
      };
      const segmentEndRight = {
        x: startRight.x * (1 - nextProgress) + endRight.x * nextProgress,
        y: startRight.y * (1 - nextProgress) + endRight.y * nextProgress,
      };

      // 透明度渐变
      const segmentAlpha = 0.4 * (1 - progress);

      tail.beginFill(bgColor, segmentAlpha);
      tail.moveTo(segmentStartLeft.x, segmentStartLeft.y);
      tail.lineTo(segmentEndLeft.x, segmentEndLeft.y);
      tail.lineTo(segmentEndRight.x, segmentEndRight.y);
      tail.lineTo(segmentStartRight.x, segmentStartRight.y);
      tail.lineTo(segmentStartLeft.x, segmentStartLeft.y);
      tail.endFill();
    }
  };

  // 绘制
  tailGroup.updateTail();

  return tailGroup;
}

// 创建标签
function createTag(tagData, x, y, placedTags, app, index) {
  const tagGroup = new PIXI.Container();
  tagGroup.x = x;
  tagGroup.y = y;

  // 创建文本测量宽度
  const text = new PIXI.Text(tagData.name, {
    fontFamily: "Arial",
    fontSize: tagData.size,
    fill: tagData.fontColor,
  });
  text.anchor.set(0.5);

  const padding = 10;
  const charWidth = tagData.size * 1.5;
  const charHeight = tagData.size * 1.3;
  const textWidth = tagData.name.length * charWidth;

  let width = textWidth + padding * 2;
  if (index == 0) width = tagData.size * 4.5 + 10;

  const height = charHeight + padding;

  // 背景
  const bg = new PIXI.Graphics();
  bg.beginFill(tagData.bgColor, tagData.opacity ?? 1);
  bg.drawRoundedRect(-width / 2, -height / 2, width, height, 20);
  bg.endFill();
  tagGroup.addChild(bg);

  // 添加文本
  tagGroup.addChild(text);

  return tagGroup;
}

//点击事件
const handleCanvasClick = (event) => {
  if (!appRef.value || !tagsContainer.value) return;

  const canvas = document.getElementById("matchCanvas");
  const rect = canvas.getBoundingClientRect();

  let clientX, clientY;

  if (event.touches && event.touches.length > 0) {
    // 移动端事件
    clientX = event.touches[0].clientX;
    clientY = event.touches[0].clientY;
  } else {
    // PC端事件
    clientX = event.clientX;
    clientY = event.clientY;
  }

  // 点击位置相对于Canvas的坐标
  const x = clientX - rect.left;
  const y = clientY - rect.top;

  for (let i = 0; i < mockTags.length; i++) {
    const tag = tagsContainer.value.children[i];
    if (!tag) continue;

    // 获取标签边界
    const bounds = tag.getBounds();

    // 缩小点击范围 上下左右各3
    const shrinkAmount = 3;
    const innerBounds = {
      x: bounds.x + shrinkAmount,
      y: bounds.y + shrinkAmount,
      width: bounds.width - shrinkAmount * 2,
      height: bounds.height - shrinkAmount * 2,
    };

    // 检查点击位置是否在缩小后的标签边界内
    if (x >= innerBounds.x && x <= innerBounds.x + innerBounds.width && y >= innerBounds.y && y <= innerBounds.y + innerBounds.height) {
      // 找到对应标签
      const tagData = mockTags[i];
      emit("tag-click", tagData);
      break;
    }
  }
};
onUnmounted(() => {
  if (appRef.value) {
    appRef.value.destroy(true, true);
    appRef.value = null;
  }
});
</script>

<style scoped>
.container {
  width: 100%;
}
.match-canvas {
  width: 100%;
  height: 400rpx; /* 可根据需求调整高度 */
}
</style>