sdz/qingdao-employment-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flat: pixjs

Browse Source
This commit is contained in:
Apcallover
2025-11-21 10:41:34 +08:00
parent fc2d0f90ec
commit 20191c9454
4 changed files with 1456 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -26,7 +26,9 @@
<!-- 爱山东jssdk -->
<!-- <script type="text/javascript" src="https://isdapp.shandong.gov.cn/jmopen/jssdk/index.js"></script> -->
<script type="module" src="./static/js/sm4.min.js"></script>
<script type="text/javascript" src="./static/js/sm4.min.js"></script>
<script type="text/javascript" src="./static/js/pixi.min.js"></script>
</head>
<!-- <body> -->
<div id="app"><!--app-html--></div>

5
package.json
View File

@@ -1,5 +0,0 @@
{
"dependencies": {
"pixi.js": "^7.4.3"
}
}

504
pages/index/components/AIMatch.vue
View File

@@ -1,389 +1,365 @@
<template>
<view class="container">
<view id="matchCanvas" class="match-canvas" @click="handleCanvasClick"></view>
</view>
<view class="container" id="pixi-box" ref="pixiContainerRef"></view>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import * as PIXI from "pixi.js";
import { onMounted, onUnmounted, ref, nextTick } from 'vue';
const emit = defineEmits(['tag-click']);
const appRef = ref(null);
const tagsContainer = ref(null); // 标签容器
const emit = defineEmits(["tag-click"]);
// DOM Ref
const pixiContainerRef = ref(null);
// 名称、颜色、大小、位置（角度、半径）
// PIXI 变量
let app = null;
let tagsContainer = null;
let activeTagInstances = [];
// 配置数据
const mockTags = [
{ name: '医生', bgColor: 0x0069fe, fontColor: 0xffffff, size: 17, opacity: 1.0, angle: 0, radius: 0 },
{
name: "医生",
bgColor: 0x0069fe,
fontColor: 0xffffff,
size: 17,
opacity: 1.0,
angle: 0,
radius: 0,
},
{
name: "工程师",
name: '工程师',
bgColor: 0x87e2ec,
fontColor: 0xffffff,
size: 14,
opacity: 1,
angle: -Math.PI / 2, // 12点方向
angle: -Math.PI / 2,
radius: 68,
tailRotation: Math.PI / 2, // 拖尾向下
tailRotation: Math.PI / 2,
},
{
name: "建筑师",
name: '建筑师',
bgColor: 0xffebeb,
fontColor: 0xff6969,
size: 11.5,
opacity: 1,
angle: -Math.PI / 4.2, // 1点方向
angle: -Math.PI / 4.2,
radius: 125,
tailRotation: (3 * Math.PI) / 4, // 拖尾向左下
tailRotation: (3 * Math.PI) / 4,
},
{
name: "律师",
name: '律师',
bgColor: 0x21ea85,
fontColor: 0xffffff,
size: 15,
opacity: 1,
angle: -Math.PI / 10, // 2点方向
angle: -Math.PI / 10,
radius: 130,
tailRotation: (3 * Math.PI) / 4, // 拖尾向左下
tailRotation: (3 * Math.PI) / 4,
},
{
name: "记者",
name: '记者',
bgColor: 0xebf3ff,
fontColor: 0x1d71ef,
size: 12,
opacity: 1,
angle: Math.PI / 120, // 3点方向
angle: Math.PI / 120,
radius: 130,
tailRotation: Math.PI, // 拖尾向左
tailRotation: Math.PI,
},
{
name: "程序员",
name: '程序员',
bgColor: 0xffd4b6,
fontColor: 0xffffff,
size: 14.5,
opacity: 1,
angle: Math.PI / 9, // 4点方向
angle: Math.PI / 9,
radius: 120,
tailRotation: (5 * Math.PI) / 4, // 拖尾向左上
tailRotation: (5 * Math.PI) / 4,
},
{
name: "摄影师",
name: '摄影师',
bgColor: 0xd8e5fe,
fontColor: 0x1d71ef,
size: 11,
opacity: 1,
angle: Math.PI / 3, // 5点方向
angle: Math.PI / 3,
radius: 75,
tailRotation: (3 * Math.PI) / 2, // 拖尾向上
tailRotation: (3 * Math.PI) / 2,
},
{
name: "设计师",
name: '设计师',
bgColor: 0xff9400,
fontColor: 0xffffff,
size: 14,
opacity: 1,
angle: (2 * Math.PI) / 3, // 7点方向
angle: (2 * Math.PI) / 3,
radius: 92,
tailRotation: (7 * Math.PI) / 4, // 拖尾向右上
tailRotation: (7 * Math.PI) / 4,
},
{
name: "心理咨询师",
name: '心理咨询师',
bgColor: 0xebf3ff,
fontColor: 0x1d71ef,
size: 10.5,
opacity: 1,
angle: (5.4 * Math.PI) / 6, // 8点方向
angle: (5.4 * Math.PI) / 6,
radius: 110,
tailRotation: 0, // 拖尾向右
tailRotation: 0,
},
{
name: "护士",
name: '护士',
bgColor: 0xff6969,
fontColor: 0xffffff,
size: 15,
opacity: 1,
angle: (6.3 * Math.PI) / 5.9, // 10点方向
angle: (6.3 * Math.PI) / 5.9,
radius: 110,
tailRotation: Math.PI / 4, // 拖尾向右下
tailRotation: Math.PI / 4,
},
{
name: "会计",
name: '会计',
bgColor: 0xfce9c9,
fontColor: 0xfbc55f,
size: 13,
opacity: 1,
angle: (7.2 * Math.PI) / 5.9, // 11点方向
angle: (7.2 * Math.PI) / 5.9,
radius: 120,
tailRotation: Math.PI / 4, // 拖尾向右下
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({
await nextTick();
setTimeout(() => {
initPixi();
}, 100);
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
if (app) {
app.destroy(true, { children: true, texture: true, baseTexture: true });
app = null;
}
});
const getContainerDOM = () => {
const refVal = pixiContainerRef.value;
if (!refVal) return document.getElementById('pixi-box');
if (refVal.$el) return refVal.$el;
return refVal;
};
const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
const initPixi = () => {
const container = getContainerDOM();
if (!container) return;
const width = container.clientWidth || 300;
const height = container.clientHeight || 300;
if (app) return;
app = new PIXI.Application({
width: width,
height: height,
backgroundAlpha: 0,
antialias: true,
autoDensity: true,
width: sw,
height: sh,
backgroundColor: 0xf5f7fa,
antialias: true,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
});
appRef.value = app;
canvas.appendChild(app.view);
container.appendChild(app.view);
// 标签容器
const container = new PIXI.Container();
tagsContainer.value = container;
app.stage.addChild(container);
tagsContainer = new PIXI.Container();
app.stage.addChild(tagsContainer);
// 存储已放置标签的信息
const placedTags = [];
renderScene(width, height);
};
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 renderScene = (sw, sh) => {
tagsContainer.removeChildren();
activeTagInstances = [];
// 上下浮动动画
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;
const baseSize = 375;
const scaleFactor = (Math.min(sw, sh) / baseSize) * 0.9;
// 拖尾效果
if (radius > 0) {
const tail = createCometTail(tagData.bgColor, tailRotation, tag);
// 使用 addChildAt
mockTags.forEach((data, index) => {
const scaledRadius = data.radius * (scaleFactor < 1 ? 1 : scaleFactor * 0.8);
let x = sw / 2 + scaledRadius * Math.cos(data.angle);
let y = sh / 2 + scaledRadius * Math.sin(data.angle);
const tag = createTag(data, index);
tagsContainer.addChild(tag);
const safeW = tag.width / 2 + 10;
const safeH = tag.height / 2 + 10;
// 强制修正 x 和 y，使其不超出屏幕
x = clamp(x, safeW, sw - safeW);
y = clamp(y, safeH, sh - safeH);
tag.x = x;
tag.y = y;
// 4. 保存元数据
tag.userData = {
originalX: x,
originalY: y,
angle: data.angle,
radius: scaledRadius,
floatOffset: Math.random() * Math.PI * 2,
floatSpeed: 0.01 + Math.random() * 0.02,
floatRange: 2 + Math.random() * 2,
safeH: safeH,
};
if (data.radius > 0) {
const tail = createCometTail(data.bgColor, data.tailRotation, tag.width);
tag.addChildAt(tail, 0);
// 拖尾动画
tag.updateTail = () => tail.updateAnim();
}
activeTagInstances.push(tag);
});
// 动画循环
app.ticker.add(() => {
if (tail.updateTail) {
tail.updateTail();
const screenH = app.screen.height;
activeTagInstances.forEach((tag) => {
const meta = tag.userData;
if (meta) {
// 计算新的浮动位置
meta.floatOffset += meta.floatSpeed;
let nextY = meta.originalY + Math.sin(meta.floatOffset) * meta.floatRange;
// 再次进行边界检查
if (nextY < meta.safeH) nextY = meta.safeH;
if (nextY > screenH - meta.safeH) nextY = screenH - meta.safeH;
tag.y = nextY;
if (tag.updateTail) tag.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 createTag = (tagData, index) => {
const tagGroup = new PIXI.Container();
tagGroup.x = x;
tagGroup.y = y;
tagGroup.eventMode = 'static';
tagGroup.cursor = 'pointer';
tagGroup.on('pointertap', () => emit('tag-click', tagData));
// 创建文本测量宽度
const text = new PIXI.Text(tagData.name, {
fontFamily: "Arial",
fontFamily: ['PingFang SC', 'Microsoft YaHei', 'Arial'],
fontSize: tagData.size,
fill: tagData.fontColor,
padding: 4,
resolution: 2,
});
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;
const paddingH = 26;
const paddingV = 10;
let bgWidth = text.width + paddingH;
let bgHeight = text.height + paddingV;
let width = textWidth + padding * 2;
if (index == 0) width = tagData.size * 4.5 + 10;
if (index === 0) bgWidth = Math.max(bgWidth, tagData.size * 4.5);
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.drawRoundedRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, bgHeight / 2);
bg.endFill();
tagGroup.addChild(bg);
// 添加文本
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;
}
const createCometTail = (bgColor, tailRotation, parentWidth) => {
const tailGroup = new PIXI.Container();
const graphics = new PIXI.Graphics();
tailGroup.addChild(graphics);
const baseLength = 45;
const startWidth = parentWidth * 0.6;
const endWidth = 20;
let breathPhase = Math.random() * Math.PI * 2;
const breathSpeed = 0.04;
tailGroup.updateAnim = () => {
breathPhase += breathSpeed;
const breathScale = 0.85 + 0.15 * Math.sin(breathPhase);
graphics.clear();
const currentLength = baseLength * breathScale;
const cos = Math.cos(tailRotation);
const sin = Math.sin(tailRotation);
const perpX = -sin;
const perpY = cos;
const p1 = { x: perpX * (startWidth / 2), y: perpY * (startWidth / 2) };
const p2 = { x: -perpX * (startWidth / 2), y: -perpY * (startWidth / 2) };
const endCX = cos * currentLength;
const endCY = sin * currentLength;
const p3 = { x: endCX - perpX * (endWidth / 2), y: endCY - perpY * (endWidth / 2) };
const p4 = { x: endCX + perpX * (endWidth / 2), y: endCY + perpY * (endWidth / 2) };
const segments = 8;
for (let i = 0; i < segments; i++) {
const t1 = i / segments;
const t2 = (i + 1) / segments;
const alpha = 0.4 * (1 - t1);
const sp1 = { x: p1.x + (p4.x - p1.x) * t1, y: p1.y + (p4.y - p1.y) * t1 };
const sp2 = { x: p2.x + (p3.x - p2.x) * t1, y: p2.y + (p3.y - p2.y) * t1 };
const ep1 = { x: p1.x + (p4.x - p1.x) * t2, y: p1.y + (p4.y - p1.y) * t2 };
const ep2 = { x: p2.x + (p3.x - p2.x) * t2, y: p2.y + (p3.y - p2.y) * t2 };
graphics.beginFill(bgColor, alpha);
graphics.moveTo(sp1.x, sp1.y);
graphics.lineTo(sp2.x, sp2.y);
graphics.lineTo(ep2.x, ep2.y);
graphics.lineTo(ep1.x, ep1.y);
graphics.endFill();
}
};
onUnmounted(() => {
if (appRef.value) {
appRef.value.destroy(true, true);
appRef.value = null;
}
tailGroup.updateAnim();
return tailGroup;
};
const handleResize = () => {
const container = getContainerDOM();
if (!app || !container) return;
const w = container.clientWidth || 300;
const h = container.clientHeight || 300;
app.renderer.resize(w, h);
activeTagInstances.forEach((tag) => {
const meta = tag.userData;
if (!meta) return;
let newX = w / 2 + meta.radius * Math.cos(meta.angle);
let newY = h / 2 + meta.radius * Math.sin(meta.angle);
const safeW = tag.width / 2 + 10;
const safeH = tag.height / 2 + 10;
meta.originalX = clamp(newX, safeW, w - safeW);
meta.originalY = clamp(newY, safeH, h - safeH);
meta.safeH = safeH; // 更新安全高度
tag.x = meta.originalX;
});
};
</script>
<style scoped>
.container {
width: 100%;
}
.match-canvas {
width: 100%;
height: 400rpx; /* 可根据需求调整高度 */
height: 500rpx;
position: relative;
overflow: hidden;
}
</style>

1108
static/js/pixi.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long