390 lines
9.6 KiB
Vue
390 lines
9.6 KiB
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>
|