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 --> <!-- 爱山东jssdk -->
<!-- <script type="text/javascript" src="https://isdapp.shandong.gov.cn/jmopen/jssdk/index.js"></script> --> <!-- <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> </head>
<!-- <body> --> <!-- <body> -->
<div id="app"><!--app-html--></div> <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> <template>
<view class="container"> <view class="container" id="pixi-box" ref="pixiContainerRef"></view>
<view id="matchCanvas" class="match-canvas" @click="handleCanvasClick"></view>
</view>
</template> </template>
<script setup> <script setup>
import { onMounted, onUnmounted, ref } from "vue"; import { onMounted, onUnmounted, ref, nextTick } from 'vue';
import * as PIXI from "pixi.js"; const emit = defineEmits(['tag-click']);
const appRef = ref(null); // DOM Ref
const tagsContainer = ref(null); // 标签容器 const pixiContainerRef = ref(null);
const emit = defineEmits(["tag-click"]);
// 名称、颜色、大小、位置（角度、半径） // PIXI 变量
let app = null;
let tagsContainer = null;
let activeTagInstances = [];
// 配置数据
const mockTags = [ const mockTags = [
{ name: '医生', bgColor: 0x0069fe, fontColor: 0xffffff, size: 17, opacity: 1.0, angle: 0, radius: 0 },
{ {
name: "医生", name: '工程师',
bgColor: 0x0069fe,
fontColor: 0xffffff,
size: 17,
opacity: 1.0,
angle: 0,
radius: 0,
},
{
name: "工程师",
bgColor: 0x87e2ec, bgColor: 0x87e2ec,
fontColor: 0xffffff, fontColor: 0xffffff,
size: 14, size: 14,
opacity: 1, opacity: 1,
angle: -Math.PI / 2, // 12点方向 angle: -Math.PI / 2,
radius: 68, radius: 68,
tailRotation: Math.PI / 2, // 拖尾向下 tailRotation: Math.PI / 2,
}, },
{ {
name: "建筑师", name: '建筑师',
bgColor: 0xffebeb, bgColor: 0xffebeb,
fontColor: 0xff6969, fontColor: 0xff6969,
size: 11.5, size: 11.5,
opacity: 1, opacity: 1,
angle: -Math.PI / 4.2, // 1点方向 angle: -Math.PI / 4.2,
radius: 125, radius: 125,
tailRotation: (3 * Math.PI) / 4, // 拖尾向左下 tailRotation: (3 * Math.PI) / 4,
}, },
{ {
name: "律师", name: '律师',
bgColor: 0x21ea85, bgColor: 0x21ea85,
fontColor: 0xffffff, fontColor: 0xffffff,
size: 15, size: 15,
opacity: 1, opacity: 1,
angle: -Math.PI / 10, // 2点方向 angle: -Math.PI / 10,
radius: 130, radius: 130,
tailRotation: (3 * Math.PI) / 4, // 拖尾向左下 tailRotation: (3 * Math.PI) / 4,
}, },
{ {
name: "记者", name: '记者',
bgColor: 0xebf3ff, bgColor: 0xebf3ff,
fontColor: 0x1d71ef, fontColor: 0x1d71ef,
size: 12, size: 12,
opacity: 1, opacity: 1,
angle: Math.PI / 120, // 3点方向 angle: Math.PI / 120,
radius: 130, radius: 130,
tailRotation: Math.PI, // 拖尾向左 tailRotation: Math.PI,
}, },
{ {
name: "程序员", name: '程序员',
bgColor: 0xffd4b6, bgColor: 0xffd4b6,
fontColor: 0xffffff, fontColor: 0xffffff,
size: 14.5, size: 14.5,
opacity: 1, opacity: 1,
angle: Math.PI / 9, // 4点方向 angle: Math.PI / 9,
radius: 120, radius: 120,
tailRotation: (5 * Math.PI) / 4, // 拖尾向左上 tailRotation: (5 * Math.PI) / 4,
}, },
{ {
name: "摄影师", name: '摄影师',
bgColor: 0xd8e5fe, bgColor: 0xd8e5fe,
fontColor: 0x1d71ef, fontColor: 0x1d71ef,
size: 11, size: 11,
opacity: 1, opacity: 1,
angle: Math.PI / 3, // 5点方向 angle: Math.PI / 3,
radius: 75, radius: 75,
tailRotation: (3 * Math.PI) / 2, // 拖尾向上 tailRotation: (3 * Math.PI) / 2,
}, },
{ {
name: "设计师", name: '设计师',
bgColor: 0xff9400, bgColor: 0xff9400,
fontColor: 0xffffff, fontColor: 0xffffff,
size: 14, size: 14,
opacity: 1, opacity: 1,
angle: (2 * Math.PI) / 3, // 7点方向 angle: (2 * Math.PI) / 3,
radius: 92, radius: 92,
tailRotation: (7 * Math.PI) / 4, // 拖尾向右上 tailRotation: (7 * Math.PI) / 4,
}, },
{ {
name: "心理咨询师", name: '心理咨询师',
bgColor: 0xebf3ff, bgColor: 0xebf3ff,
fontColor: 0x1d71ef, fontColor: 0x1d71ef,
size: 10.5, size: 10.5,
opacity: 1, opacity: 1,
angle: (5.4 * Math.PI) / 6, // 8点方向 angle: (5.4 * Math.PI) / 6,
radius: 110, radius: 110,
tailRotation: 0, // 拖尾向右 tailRotation: 0,
}, },
{ {
name: "护士", name: '护士',
bgColor: 0xff6969, bgColor: 0xff6969,
fontColor: 0xffffff, fontColor: 0xffffff,
size: 15, size: 15,
opacity: 1, opacity: 1,
angle: (6.3 * Math.PI) / 5.9, // 10点方向 angle: (6.3 * Math.PI) / 5.9,
radius: 110, radius: 110,
tailRotation: Math.PI / 4, // 拖尾向右下 tailRotation: Math.PI / 4,
}, },
{ {
name: "会计", name: '会计',
bgColor: 0xfce9c9, bgColor: 0xfce9c9,
fontColor: 0xfbc55f, fontColor: 0xfbc55f,
size: 13, size: 13,
opacity: 1, opacity: 1,
angle: (7.2 * Math.PI) / 5.9, // 11点方向 angle: (7.2 * Math.PI) / 5.9,
radius: 120, radius: 120,
tailRotation: Math.PI / 4, // 拖尾向右下 tailRotation: Math.PI / 4,
}, },
]; ];
onMounted(async () => { onMounted(async () => {
if (appRef.value) return; await nextTick();
// 初始化 PIXI 应用 setTimeout(() => {
const canvas = document.getElementById("matchCanvas"); initPixi();
const sw = canvas.clientWidth; }, 100);
const sh = canvas.clientHeight; window.addEventListener('resize', handleResize);
const app = new PIXI.Application({ });
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, backgroundAlpha: 0,
antialias: true,
autoDensity: true,
width: sw,
height: sh,
backgroundColor: 0xf5f7fa, backgroundColor: 0xf5f7fa,
antialias: true,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
}); });
appRef.value = app;
canvas.appendChild(app.view); container.appendChild(app.view);
// 标签容器 tagsContainer = new PIXI.Container();
const container = new PIXI.Container(); app.stage.addChild(tagsContainer);
tagsContainer.value = container;
app.stage.addChild(container);
// 存储已放置标签的信息 renderScene(width, height);
const placedTags = []; };
for (let i = 0; i < mockTags.length; i++) { const renderScene = (sw, sh) => {
const { angle, radius, tailRotation, ...tagData } = mockTags[i]; tagsContainer.removeChildren();
const x = sw / 2 + radius * Math.cos(angle); activeTagInstances = [];
const y = sh / 2 + radius * Math.sin(angle);
const tag = createTag(tagData, x, y, placedTags, app, i);
// 上下浮动动画 const baseSize = 375;
const originalY = tag.y; const scaleFactor = (Math.min(sw, sh) / baseSize) * 0.9;
let floatOffset = Math.random() * Math.PI * 2;
let floatSpeed = 0.01 + Math.random() * 0.02;
let floatRange = 2 + Math.random() * 2;
// 拖尾效果 mockTags.forEach((data, index) => {
if (radius > 0) { const scaledRadius = data.radius * (scaleFactor < 1 ? 1 : scaleFactor * 0.8);
const tail = createCometTail(tagData.bgColor, tailRotation, tag);
// 使用 addChildAt 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.addChildAt(tail, 0);
// 拖尾动画 tag.updateTail = () => tail.updateAnim();
}
activeTagInstances.push(tag);
});
// 动画循环
app.ticker.add(() => { app.ticker.add(() => {
if (tail.updateTail) { const screenH = app.screen.height;
tail.updateTail();
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 = { const createTag = (tagData, index) => {
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(); const tagGroup = new PIXI.Container();
tagGroup.x = x; tagGroup.eventMode = 'static';
tagGroup.y = y; tagGroup.cursor = 'pointer';
tagGroup.on('pointertap', () => emit('tag-click', tagData));
// 创建文本测量宽度
const text = new PIXI.Text(tagData.name, { const text = new PIXI.Text(tagData.name, {
fontFamily: "Arial", fontFamily: ['PingFang SC', 'Microsoft YaHei', 'Arial'],
fontSize: tagData.size, fontSize: tagData.size,
fill: tagData.fontColor, fill: tagData.fontColor,
padding: 4,
resolution: 2,
}); });
text.anchor.set(0.5); text.anchor.set(0.5);
const padding = 10; const paddingH = 26;
const charWidth = tagData.size * 1.5; const paddingV = 10;
const charHeight = tagData.size * 1.3; let bgWidth = text.width + paddingH;
const textWidth = tagData.name.length * charWidth; let bgHeight = text.height + paddingV;
let width = textWidth + padding * 2; if (index === 0) bgWidth = Math.max(bgWidth, tagData.size * 4.5);
if (index == 0) width = tagData.size * 4.5 + 10;
const height = charHeight + padding;
// 背景
const bg = new PIXI.Graphics(); const bg = new PIXI.Graphics();
bg.beginFill(tagData.bgColor, tagData.opacity ?? 1); 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(); bg.endFill();
tagGroup.addChild(bg);
// 添加文本 tagGroup.addChild(bg);
tagGroup.addChild(text); tagGroup.addChild(text);
return tagGroup; 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,
}; };
// 检查点击位置是否在缩小后的标签边界内 const createCometTail = (bgColor, tailRotation, parentWidth) => {
if (x >= innerBounds.x && x <= innerBounds.x + innerBounds.width && y >= innerBounds.y && y <= innerBounds.y + innerBounds.height) { const tailGroup = new PIXI.Container();
// 找到对应标签 const graphics = new PIXI.Graphics();
const tagData = mockTags[i]; tailGroup.addChild(graphics);
emit("tag-click", tagData);
break; 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(() => { tailGroup.updateAnim();
if (appRef.value) { return tailGroup;
appRef.value.destroy(true, true); };
appRef.value = null;
} 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> </script>
<style scoped> <style scoped>
.container { .container {
width: 100%; width: 100%;
} height: 500rpx;
.match-canvas { position: relative;
width: 100%; overflow: hidden;
height: 400rpx; /* 可根据需求调整高度 */
} }
</style> </style>

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

File diff suppressed because one or more lines are too long