'commit'
431
static/Test/GetCircle.html
Normal file
@@ -0,0 +1,431 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>人脸标注工具</title>
|
||||||
|
<style>
|
||||||
|
body { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; height: 100vh; margin: 0; overflow: hidden; background-color: #2c3e50; color: #ecf0f1; }
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
width: 250px;
|
||||||
|
background: #34495e;
|
||||||
|
border-right: 1px solid #2c3e50;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar h3 {
|
||||||
|
padding: 15px;
|
||||||
|
margin: 0;
|
||||||
|
background: #2c3e50;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid #34495e;
|
||||||
|
}
|
||||||
|
|
||||||
|
#file-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas-container {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #2c3e50; /* Match body bg */
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
background: #000;
|
||||||
|
cursor: crosshair;
|
||||||
|
box-shadow: 0 0 20px rgba(0,0,0,0.5);
|
||||||
|
border: 2px solid #95a5a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-item {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
background: #ecf0f1;
|
||||||
|
color: #2c3e50;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-item:hover {
|
||||||
|
background: #bdc3c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-item.active {
|
||||||
|
background: #3498db;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-item.annotated .status::after {
|
||||||
|
content: '✓';
|
||||||
|
color: #27ae60;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-item.active.annotated .status::after {
|
||||||
|
color: #2ecc71;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls {
|
||||||
|
margin-top: 15px;
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
align-items: center;
|
||||||
|
background: #34495e;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 8px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #95a5a6;
|
||||||
|
color: white;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover { background: #7f8c8d; }
|
||||||
|
|
||||||
|
button.primary { background: #3498db; }
|
||||||
|
button.primary:hover { background: #2980b9; }
|
||||||
|
|
||||||
|
button.danger { background: #e74c3c; }
|
||||||
|
button.danger:hover { background: #c0392b; }
|
||||||
|
|
||||||
|
button.success { background: #27ae60; }
|
||||||
|
button.success:hover { background: #219150; }
|
||||||
|
|
||||||
|
#output-area {
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
margin-top: 15px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#output {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: 'Consolas', monospace;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #ecf0f1;
|
||||||
|
color: #2c3e50;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instructions {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #bdc3c7;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="sidebar">
|
||||||
|
<h3>图片列表 (1-12)</h3>
|
||||||
|
<div id="file-list"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<div id="canvas-container">
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="instructions">
|
||||||
|
操作指南: 鼠标拖拽画圆 | A/← 上一张 | D/→ 下一张 | Del 清除当前 | 点击下方按钮导出
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="controls">
|
||||||
|
<span style="min-width: 100px;">当前: <strong id="current-file">--</strong></span>
|
||||||
|
<button onclick="prevImage()">上一张 (A)</button>
|
||||||
|
<button class="primary" onclick="nextImage()">下一张 (D)</button>
|
||||||
|
<button class="danger" onclick="clearAnnotation()">清除 (Del)</button>
|
||||||
|
<button class="success" onclick="exportData()">生成 JSON</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="output-area">
|
||||||
|
<textarea id="output" readonly placeholder="点击“生成 JSON”按钮,此处将显示结果并自动复制到剪贴板..."></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 配置
|
||||||
|
const imageFolder = './Images/';
|
||||||
|
const totalImages = 12;
|
||||||
|
const images = [];
|
||||||
|
for (let i = 1; i <= totalImages; i++) {
|
||||||
|
images.push(`${i}.jpg`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 状态
|
||||||
|
let currentIndex = 0;
|
||||||
|
const annotations = {}; // { "1.jpg": { x: 100, y: 100, r: 50 } }
|
||||||
|
|
||||||
|
// DOM 元素
|
||||||
|
const canvas = document.getElementById('canvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const fileListEl = document.getElementById('file-list');
|
||||||
|
const canvasContainer = document.getElementById('canvas-container');
|
||||||
|
|
||||||
|
let imgObj = new Image();
|
||||||
|
let isDragging = false;
|
||||||
|
let startX, startY;
|
||||||
|
let currentMouseX, currentMouseY;
|
||||||
|
|
||||||
|
// 初始化侧边栏
|
||||||
|
function renderSidebar() {
|
||||||
|
fileListEl.innerHTML = '';
|
||||||
|
images.forEach((name, idx) => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = `img-item ${idx === currentIndex ? 'active' : ''} ${annotations[name] ? 'annotated' : ''}`;
|
||||||
|
div.innerHTML = `<span>${name}</span><span class="status"></span>`;
|
||||||
|
div.onclick = () => loadImage(idx);
|
||||||
|
fileListEl.appendChild(div);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 滚动到当前项
|
||||||
|
const activeItem = fileListEl.querySelector('.active');
|
||||||
|
if (activeItem) {
|
||||||
|
activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadImage(index) {
|
||||||
|
if (index < 0) index = images.length - 1;
|
||||||
|
if (index >= images.length) index = 0;
|
||||||
|
currentIndex = index;
|
||||||
|
|
||||||
|
const filename = images[currentIndex];
|
||||||
|
document.getElementById('current-file').textContent = filename;
|
||||||
|
|
||||||
|
imgObj = new Image();
|
||||||
|
imgObj.onload = () => {
|
||||||
|
fitCanvas();
|
||||||
|
draw();
|
||||||
|
renderSidebar();
|
||||||
|
};
|
||||||
|
imgObj.onerror = () => {
|
||||||
|
alert(`无法加载图片: ${imageFolder + filename}\n请确保图片存在且路径正确。`);
|
||||||
|
};
|
||||||
|
imgObj.src = imageFolder + filename;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fitCanvas() {
|
||||||
|
if (!imgObj.width) return;
|
||||||
|
|
||||||
|
const containerWidth = canvasContainer.clientWidth;
|
||||||
|
const containerHeight = canvasContainer.clientHeight;
|
||||||
|
|
||||||
|
// 计算缩放比例,保持长宽比,并留一点边距
|
||||||
|
const scale = Math.min(
|
||||||
|
(containerWidth - 20) / imgObj.width,
|
||||||
|
(containerHeight - 20) / imgObj.height
|
||||||
|
);
|
||||||
|
|
||||||
|
// 设置 Canvas 的显示大小
|
||||||
|
canvas.style.width = (imgObj.width * scale) + 'px';
|
||||||
|
canvas.style.height = (imgObj.height * scale) + 'px';
|
||||||
|
|
||||||
|
// 设置 Canvas 的实际分辨率 (等于图片原始分辨率)
|
||||||
|
canvas.width = imgObj.width;
|
||||||
|
canvas.height = imgObj.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
// 清空画布
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
if (imgObj.width) {
|
||||||
|
ctx.drawImage(imgObj, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
const name = images[currentIndex];
|
||||||
|
const data = annotations[name];
|
||||||
|
|
||||||
|
// 绘制已保存的标注 (绿色)
|
||||||
|
if (data) {
|
||||||
|
drawCircle(data.x, data.y, data.r, '#2ecc71', 4);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绘制正在拖拽的圆 (黄色)
|
||||||
|
if (isDragging) {
|
||||||
|
const dx = currentMouseX - startX;
|
||||||
|
const dy = currentMouseY - startY;
|
||||||
|
const r = Math.sqrt(dx*dx + dy*dy);
|
||||||
|
drawCircle(startX, startY, r, '#f1c40f', 2);
|
||||||
|
|
||||||
|
// 显示当前半径
|
||||||
|
ctx.fillStyle = '#f1c40f';
|
||||||
|
ctx.font = '20px Arial';
|
||||||
|
ctx.fillText(`R: ${Math.round(r)}`, currentMouseX + 10, currentMouseY + 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawCircle(x, y, r, color, lineWidth) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, r, 0, 2 * Math.PI);
|
||||||
|
ctx.strokeStyle = color;
|
||||||
|
ctx.lineWidth = lineWidth;
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// 绘制圆心
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, lineWidth + 2, 0, 2 * Math.PI);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 鼠标坐标映射 (从屏幕坐标到 Canvas 内部坐标)
|
||||||
|
function getMousePos(evt) {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const scaleX = canvas.width / rect.width;
|
||||||
|
const scaleY = canvas.height / rect.height;
|
||||||
|
return {
|
||||||
|
x: (evt.clientX - rect.left) * scaleX,
|
||||||
|
y: (evt.clientY - rect.top) * scaleY
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 事件监听
|
||||||
|
canvas.addEventListener('mousedown', (e) => {
|
||||||
|
const pos = getMousePos(e);
|
||||||
|
startX = pos.x;
|
||||||
|
startY = pos.y;
|
||||||
|
isDragging = true;
|
||||||
|
currentMouseX = pos.x;
|
||||||
|
currentMouseY = pos.y;
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener('mousemove', (e) => {
|
||||||
|
if (!isDragging) return;
|
||||||
|
const pos = getMousePos(e);
|
||||||
|
currentMouseX = pos.x;
|
||||||
|
currentMouseY = pos.y;
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener('mouseup', (e) => {
|
||||||
|
if (!isDragging) return;
|
||||||
|
isDragging = false;
|
||||||
|
const pos = getMousePos(e);
|
||||||
|
const dx = pos.x - startX;
|
||||||
|
const dy = pos.y - startY;
|
||||||
|
const r = Math.sqrt(dx*dx + dy*dy);
|
||||||
|
|
||||||
|
// 只有当半径大于 5 像素时才保存,防止误触
|
||||||
|
if (r > 5) {
|
||||||
|
annotations[images[currentIndex]] = {
|
||||||
|
x: Math.round(startX),
|
||||||
|
y: Math.round(startY),
|
||||||
|
r: Math.round(r)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
draw();
|
||||||
|
renderSidebar();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 窗口大小改变时重新适配
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
if (imgObj.src) fitCanvas();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 按钮功能
|
||||||
|
function prevImage() { loadImage(currentIndex - 1); }
|
||||||
|
function nextImage() { loadImage(currentIndex + 1); }
|
||||||
|
|
||||||
|
function clearAnnotation() {
|
||||||
|
if (annotations[images[currentIndex]]) {
|
||||||
|
delete annotations[images[currentIndex]];
|
||||||
|
draw();
|
||||||
|
renderSidebar();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportData() {
|
||||||
|
const result = [];
|
||||||
|
images.forEach(name => {
|
||||||
|
if (annotations[name]) {
|
||||||
|
result.push({
|
||||||
|
filename: name,
|
||||||
|
...annotations[name]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result.length === 0) {
|
||||||
|
alert("还没有任何标注数据!请先在图片上拖拽画圆。");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const jsonStr = JSON.stringify(result, null, 2);
|
||||||
|
const outputEl = document.getElementById('output');
|
||||||
|
outputEl.value = jsonStr;
|
||||||
|
outputEl.select();
|
||||||
|
|
||||||
|
try {
|
||||||
|
document.execCommand('copy');
|
||||||
|
alert(`已生成 ${result.length} 条标注数据并复制到剪贴板!\n你可以直接粘贴到 Python 代码中使用。`);
|
||||||
|
} catch (err) {
|
||||||
|
alert('复制失败,请手动复制下方文本框中的内容。');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 键盘快捷键
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.target.tagName === 'TEXTAREA') return;
|
||||||
|
|
||||||
|
switch(e.key) {
|
||||||
|
case 'a':
|
||||||
|
case 'A':
|
||||||
|
case 'ArrowLeft':
|
||||||
|
prevImage();
|
||||||
|
break;
|
||||||
|
case 'd':
|
||||||
|
case 'D':
|
||||||
|
case 'ArrowRight':
|
||||||
|
nextImage();
|
||||||
|
break;
|
||||||
|
case 'Delete':
|
||||||
|
case 'Backspace':
|
||||||
|
clearAnnotation();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 启动
|
||||||
|
loadImage(0);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
static/Test/Images/1.jpg
Normal file
|
After Width: | Height: | Size: 2.4 MiB |
BIN
static/Test/Images/10.jpg
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
BIN
static/Test/Images/11.jpg
Normal file
|
After Width: | Height: | Size: 2.5 MiB |
BIN
static/Test/Images/12.jpg
Normal file
|
After Width: | Height: | Size: 2.6 MiB |
BIN
static/Test/Images/2.jpg
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
BIN
static/Test/Images/3.jpg
Normal file
|
After Width: | Height: | Size: 2.3 MiB |
BIN
static/Test/Images/4.jpg
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
BIN
static/Test/Images/5.jpg
Normal file
|
After Width: | Height: | Size: 2.4 MiB |
BIN
static/Test/Images/6.jpg
Normal file
|
After Width: | Height: | Size: 2.2 MiB |
BIN
static/Test/Images/7.jpg
Normal file
|
After Width: | Height: | Size: 2.4 MiB |
BIN
static/Test/Images/8.jpg
Normal file
|
After Width: | Height: | Size: 2.3 MiB |
BIN
static/Test/Images/9.jpg
Normal file
|
After Width: | Height: | Size: 2.3 MiB |
BIN
static/Test/Result/1.png
Normal file
|
After Width: | Height: | Size: 1.9 MiB |
BIN
static/Test/Result/10.png
Normal file
|
After Width: | Height: | Size: 3.0 MiB |
BIN
static/Test/Result/11.png
Normal file
|
After Width: | Height: | Size: 2.5 MiB |
BIN
static/Test/Result/12.png
Normal file
|
After Width: | Height: | Size: 2.4 MiB |
BIN
static/Test/Result/2.png
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
BIN
static/Test/Result/3.png
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
BIN
static/Test/Result/4.png
Normal file
|
After Width: | Height: | Size: 2.4 MiB |
BIN
static/Test/Result/5.png
Normal file
|
After Width: | Height: | Size: 1.9 MiB |
BIN
static/Test/Result/6.png
Normal file
|
After Width: | Height: | Size: 1.7 MiB |
BIN
static/Test/Result/7.png
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
BIN
static/Test/Result/8.png
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
BIN
static/Test/Result/9.png
Normal file
|
After Width: | Height: | Size: 2.5 MiB |
86
static/Test/crop_avatars.py
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
import json
|
||||||
|
import cv2
|
||||||
|
import os
|
||||||
|
import numpy as np
|
||||||
|
|
||||||
|
def crop_avatars():
|
||||||
|
# Paths
|
||||||
|
base_dir = r'd:\dsWork\aiData\static\Test'
|
||||||
|
json_path = os.path.join(base_dir, 'data.json')
|
||||||
|
images_dir = os.path.join(base_dir, 'Images')
|
||||||
|
output_dir = os.path.join(base_dir, 'Result')
|
||||||
|
|
||||||
|
# Create output directory if it doesn't exist
|
||||||
|
if not os.path.exists(output_dir):
|
||||||
|
os.makedirs(output_dir)
|
||||||
|
print(f"Created output directory: {output_dir}")
|
||||||
|
|
||||||
|
# Load JSON data
|
||||||
|
try:
|
||||||
|
with open(json_path, 'r', encoding='utf-8') as f:
|
||||||
|
data = json.load(f)
|
||||||
|
except Exception as e:
|
||||||
|
print(f"Error loading JSON file: {e}")
|
||||||
|
return
|
||||||
|
|
||||||
|
print(f"Found {len(data)} entries in data.json")
|
||||||
|
|
||||||
|
for item in data:
|
||||||
|
filename = item['filename']
|
||||||
|
x = int(item['x'])
|
||||||
|
y = int(item['y'])
|
||||||
|
r = int(item['r'])
|
||||||
|
|
||||||
|
image_path = os.path.join(images_dir, filename)
|
||||||
|
if not os.path.exists(image_path):
|
||||||
|
print(f"Image not found: {image_path}")
|
||||||
|
continue
|
||||||
|
|
||||||
|
# Read image
|
||||||
|
img = cv2.imread(image_path)
|
||||||
|
if img is None:
|
||||||
|
print(f"Failed to read image: {image_path}")
|
||||||
|
continue
|
||||||
|
|
||||||
|
height, width = img.shape[:2]
|
||||||
|
|
||||||
|
# Calculate bounding box for cropping
|
||||||
|
x1 = max(0, x - r)
|
||||||
|
y1 = max(0, y - r)
|
||||||
|
x2 = min(width, x + r)
|
||||||
|
y2 = min(height, y + r)
|
||||||
|
|
||||||
|
# Ensure valid crop dimensions
|
||||||
|
if x2 <= x1 or y2 <= y1:
|
||||||
|
print(f"Invalid crop dimensions for {filename}")
|
||||||
|
continue
|
||||||
|
|
||||||
|
# Create a mask for the circle
|
||||||
|
# Mask needs to be the size of the original image first to handle edge cases correctly
|
||||||
|
mask = np.zeros((height, width), dtype=np.uint8)
|
||||||
|
cv2.circle(mask, (x, y), r, (255), -1)
|
||||||
|
|
||||||
|
# Add alpha channel to the image
|
||||||
|
b, g, r_channel = cv2.split(img)
|
||||||
|
rgba = cv2.merge([b, g, r_channel, mask])
|
||||||
|
|
||||||
|
# Crop the RGBA image
|
||||||
|
cropped = rgba[y1:y2, x1:x2]
|
||||||
|
|
||||||
|
# Since the crop might not be a perfect square if near edges,
|
||||||
|
# but the circle is centered at x,y.
|
||||||
|
# Ideally we want the output to be a square bounding box of the circle.
|
||||||
|
# If the circle goes out of bounds, the cropped image will be smaller.
|
||||||
|
# Let's keep it simple: crop what is available. The alpha channel handles the shape.
|
||||||
|
|
||||||
|
# Save result
|
||||||
|
output_filename = os.path.splitext(filename)[0] + '.png'
|
||||||
|
output_path = os.path.join(output_dir, output_filename)
|
||||||
|
|
||||||
|
cv2.imwrite(output_path, cropped)
|
||||||
|
print(f"Saved: {output_path}")
|
||||||
|
|
||||||
|
print("Processing complete.")
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
crop_avatars()
|
||||||
74
static/Test/data.json
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"filename": "1.jpg",
|
||||||
|
"x": 1450,
|
||||||
|
"y": 1234,
|
||||||
|
"r": 597
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "2.jpg",
|
||||||
|
"x": 1487,
|
||||||
|
"y": 1307,
|
||||||
|
"r": 677
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "3.jpg",
|
||||||
|
"x": 1303,
|
||||||
|
"y": 1516,
|
||||||
|
"r": 765
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "4.jpg",
|
||||||
|
"x": 1512,
|
||||||
|
"y": 1313,
|
||||||
|
"r": 662
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "5.jpg",
|
||||||
|
"x": 1530,
|
||||||
|
"y": 1350,
|
||||||
|
"r": 666
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "6.jpg",
|
||||||
|
"x": 1413,
|
||||||
|
"y": 1338,
|
||||||
|
"r": 621
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "7.jpg",
|
||||||
|
"x": 1205,
|
||||||
|
"y": 1160,
|
||||||
|
"r": 786
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "8.jpg",
|
||||||
|
"x": 1340,
|
||||||
|
"y": 1172,
|
||||||
|
"r": 709
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "9.jpg",
|
||||||
|
"x": 1567,
|
||||||
|
"y": 1516,
|
||||||
|
"r": 721
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "10.jpg",
|
||||||
|
"x": 1542,
|
||||||
|
"y": 1007,
|
||||||
|
"r": 749
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "11.jpg",
|
||||||
|
"x": 1438,
|
||||||
|
"y": 1148,
|
||||||
|
"r": 675
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "12.jpg",
|
||||||
|
"x": 1438,
|
||||||
|
"y": 817,
|
||||||
|
"r": 645
|
||||||
|
}
|
||||||
|
]
|
||||||
595
static/Test/地狱大转盘V2.html
Normal file
@@ -0,0 +1,595 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>😈 地狱点名册 - 谁是天选之子? 😈</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Noto+Sans+SC:wght@700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary: #ff4757;
|
||||||
|
--highlight: #eccc68;
|
||||||
|
--bg: #1e272e;
|
||||||
|
--card-bg: #2f3542;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #000;
|
||||||
|
background-image: radial-gradient(circle at center, #2c3e50 0%, #000 100%);
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Noto Sans SC', sans-serif;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Creepster', cursive, 'Noto Sans SC';
|
||||||
|
color: #ff4757;
|
||||||
|
text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
text-align: center;
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% { transform: scale(1); text-shadow: 0 0 10px #ff0000; }
|
||||||
|
50% { transform: scale(1.05); text-shadow: 0 0 20px #ff0000, 0 0 40px #ff4757; }
|
||||||
|
100% { transform: scale(1); text-shadow: 0 0 10px #ff0000; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
|
||||||
|
perspective: 1000px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-card {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 4px solid transparent;
|
||||||
|
transition: all 0.1s; /* Faster transition for rapid switching */
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-card img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: grayscale(0.6) contrast(1.2);
|
||||||
|
transition: filter 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中/高亮状态 */
|
||||||
|
.avatar-card.active {
|
||||||
|
transform: scale(1.2);
|
||||||
|
border-color: var(--highlight);
|
||||||
|
box-shadow: 0 0 20px var(--highlight), 0 0 40px var(--primary);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.avatar-card.active img {
|
||||||
|
filter: grayscale(0) contrast(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 最终选中状态 */
|
||||||
|
.avatar-card.winner {
|
||||||
|
border-color: #ff4757;
|
||||||
|
box-shadow: 0 0 50px #ff4757, 0 0 100px #ff4757;
|
||||||
|
animation: shake 0.5s infinite;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 排除状态 */
|
||||||
|
.avatar-card.loser {
|
||||||
|
opacity: 0.2;
|
||||||
|
transform: scale(0.8);
|
||||||
|
filter: grayscale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
0% { transform: translate(1px, 1px) rotate(0deg) scale(1.4); }
|
||||||
|
10% { transform: translate(-1px, -2px) rotate(-1deg) scale(1.4); }
|
||||||
|
20% { transform: translate(-3px, 0px) rotate(1deg) scale(1.4); }
|
||||||
|
30% { transform: translate(3px, 2px) rotate(0deg) scale(1.4); }
|
||||||
|
40% { transform: translate(1px, -1px) rotate(1deg) scale(1.4); }
|
||||||
|
50% { transform: translate(-1px, 2px) rotate(-1deg) scale(1.4); }
|
||||||
|
60% { transform: translate(-3px, 1px) rotate(0deg) scale(1.4); }
|
||||||
|
70% { transform: translate(3px, 1px) rotate(-1deg) scale(1.4); }
|
||||||
|
80% { transform: translate(-1px, -1px) rotate(1deg) scale(1.4); }
|
||||||
|
90% { transform: translate(1px, 2px) rotate(0deg) scale(1.4); }
|
||||||
|
100% { transform: translate(1px, -2px) rotate(-1deg) scale(1.4); }
|
||||||
|
}
|
||||||
|
|
||||||
|
#actionBtn {
|
||||||
|
margin-top: 40px;
|
||||||
|
padding: 15px 60px;
|
||||||
|
font-size: 2rem;
|
||||||
|
background: linear-gradient(45deg, #ff4757, #ff6b6b);
|
||||||
|
border: none;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 0 20px rgba(255, 71, 87, 0.6);
|
||||||
|
transition: all 0.2s;
|
||||||
|
font-family: 'Creepster', 'Noto Sans SC';
|
||||||
|
text-transform: uppercase;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#actionBtn:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 0 40px rgba(255, 71, 87, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
#actionBtn:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
#actionBtn:disabled {
|
||||||
|
background: #555;
|
||||||
|
cursor: not-allowed;
|
||||||
|
box-shadow: none;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹幕/吐槽文字 */
|
||||||
|
.danmu {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: rgba(255,255,255,0.8);
|
||||||
|
white-space: nowrap;
|
||||||
|
animation: fly 6s linear forwards;
|
||||||
|
pointer-events: none;
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: 2px 2px 4px #000;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fly {
|
||||||
|
from { transform: translateX(100vw); }
|
||||||
|
to { transform: translateX(-100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 结果展示层 */
|
||||||
|
#resultOverlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: rgba(0,0,0,0.9);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 100;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#resultOverlay.show {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#resultImage {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 10px solid #ff4757;
|
||||||
|
box-shadow: 0 0 100px #ff4757;
|
||||||
|
object-fit: cover;
|
||||||
|
animation: popIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
}
|
||||||
|
|
||||||
|
#resultText {
|
||||||
|
margin-top: 30px;
|
||||||
|
font-size: 4rem;
|
||||||
|
color: #fffa65;
|
||||||
|
font-family: 'Creepster', cursive;
|
||||||
|
text-shadow: 0 0 20px #ff9f43;
|
||||||
|
text-align: center;
|
||||||
|
animation: fadeInUp 1s ease-out 0.5s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#closeResult {
|
||||||
|
margin-top: 40px;
|
||||||
|
padding: 10px 30px;
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
border-radius: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
animation: fadeInUp 1s ease-out 1s both;
|
||||||
|
}
|
||||||
|
#closeResult:hover {
|
||||||
|
background: #fff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes popIn {
|
||||||
|
0% { transform: scale(0) rotate(-180deg); }
|
||||||
|
100% { transform: scale(1) rotate(0deg); }
|
||||||
|
}
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from { opacity: 0; transform: translateY(20px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 闪光特效 */
|
||||||
|
#flashOverlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0; width: 100%; height: 100%;
|
||||||
|
background: white;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
|
@keyframes flashAnim {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 粒子画布 */
|
||||||
|
#particleCanvas {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 150;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="flashOverlay"></div>
|
||||||
|
<canvas id="particleCanvas"></canvas>
|
||||||
|
|
||||||
|
<h1>🔥 谁是今天的“天选之子”? 🔥</h1>
|
||||||
|
|
||||||
|
<div class="grid-container" id="grid">
|
||||||
|
<!-- Avatars will be injected here -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button id="actionBtn" onclick="startRoulette()">开始审判</button>
|
||||||
|
|
||||||
|
<div id="resultOverlay">
|
||||||
|
<img id="resultImage" src="" alt="Winner">
|
||||||
|
<div id="resultText">恭喜你!</div>
|
||||||
|
<button id="closeResult" onclick="resetGame()">再来一次</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 配置
|
||||||
|
const totalImages = 12;
|
||||||
|
const imagePath = './Result/';
|
||||||
|
const grid = document.getElementById('grid');
|
||||||
|
const funnyComments = [
|
||||||
|
"不会是你吧?", "感觉大事不妙...", "快跑啊!", "瑟瑟发抖", "这是什么运气?",
|
||||||
|
"千万别是我...", "救命🆘", "哈哈哈哈", "紧张时刻", "一定要挺住!",
|
||||||
|
"今晚吃鸡", "全村的希望", "这是天意", "无法逃避的命运", "别看我,看屏幕!"
|
||||||
|
];
|
||||||
|
|
||||||
|
const resultTitles = [
|
||||||
|
"💀 倒霉蛋诞生 💀",
|
||||||
|
"🤡 小丑竟是你 🤡",
|
||||||
|
"🎉 恭喜中奖 🎉",
|
||||||
|
"👑 天选之子 👑",
|
||||||
|
"😱 跑不掉了 😱",
|
||||||
|
"🎯 完美命中 🎯",
|
||||||
|
"😈 接受审判吧 😈"
|
||||||
|
];
|
||||||
|
|
||||||
|
// --- 音效管理器 (Web Audio API) ---
|
||||||
|
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||||
|
|
||||||
|
const SoundMgr = {
|
||||||
|
playTick: function() {
|
||||||
|
if (audioCtx.state === 'suspended') audioCtx.resume();
|
||||||
|
const osc = audioCtx.createOscillator();
|
||||||
|
const gain = audioCtx.createGain();
|
||||||
|
|
||||||
|
osc.type = 'square';
|
||||||
|
osc.frequency.setValueAtTime(800, audioCtx.currentTime);
|
||||||
|
osc.frequency.exponentialRampToValueAtTime(400, audioCtx.currentTime + 0.05);
|
||||||
|
|
||||||
|
gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
|
||||||
|
gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.05);
|
||||||
|
|
||||||
|
osc.connect(gain);
|
||||||
|
gain.connect(audioCtx.destination);
|
||||||
|
|
||||||
|
osc.start();
|
||||||
|
osc.stop(audioCtx.currentTime + 0.05);
|
||||||
|
},
|
||||||
|
|
||||||
|
playWin: function() {
|
||||||
|
if (audioCtx.state === 'suspended') audioCtx.resume();
|
||||||
|
|
||||||
|
const now = audioCtx.currentTime;
|
||||||
|
// 创建一个简单的胜利和弦 (C Major: C4, E4, G4, C5)
|
||||||
|
[261.63, 329.63, 392.00, 523.25].forEach((freq, i) => {
|
||||||
|
const osc = audioCtx.createOscillator();
|
||||||
|
const gain = audioCtx.createGain();
|
||||||
|
|
||||||
|
osc.type = 'triangle';
|
||||||
|
osc.frequency.value = freq;
|
||||||
|
|
||||||
|
// 延迟一点点播放,形成琶音效果
|
||||||
|
const startTime = now + i * 0.05;
|
||||||
|
|
||||||
|
gain.gain.setValueAtTime(0, startTime);
|
||||||
|
gain.gain.linearRampToValueAtTime(0.3, startTime + 0.1);
|
||||||
|
gain.gain.exponentialRampToValueAtTime(0.01, startTime + 1.5);
|
||||||
|
|
||||||
|
osc.connect(gain);
|
||||||
|
gain.connect(audioCtx.destination);
|
||||||
|
|
||||||
|
osc.start(startTime);
|
||||||
|
osc.stop(startTime + 2.0);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加一个低音轰鸣
|
||||||
|
const bassOsc = audioCtx.createOscillator();
|
||||||
|
const bassGain = audioCtx.createGain();
|
||||||
|
bassOsc.type = 'sawtooth';
|
||||||
|
bassOsc.frequency.setValueAtTime(100, now);
|
||||||
|
bassOsc.frequency.exponentialRampToValueAtTime(50, now + 1);
|
||||||
|
bassGain.gain.setValueAtTime(0.5, now);
|
||||||
|
bassGain.gain.exponentialRampToValueAtTime(0.01, now + 1.5);
|
||||||
|
bassOsc.connect(bassGain);
|
||||||
|
bassGain.connect(audioCtx.destination);
|
||||||
|
bassOsc.start(now);
|
||||||
|
bassOsc.stop(now + 1.5);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- 粒子系统 (特效) ---
|
||||||
|
const particleCanvas = document.getElementById('particleCanvas');
|
||||||
|
const pCtx = particleCanvas.getContext('2d');
|
||||||
|
let particles = [];
|
||||||
|
|
||||||
|
function resizeCanvas() {
|
||||||
|
particleCanvas.width = window.innerWidth;
|
||||||
|
particleCanvas.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', resizeCanvas);
|
||||||
|
resizeCanvas();
|
||||||
|
|
||||||
|
class Particle {
|
||||||
|
constructor(x, y) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
const angle = Math.random() * Math.PI * 2;
|
||||||
|
const speed = Math.random() * 10 + 5;
|
||||||
|
this.vx = Math.cos(angle) * speed;
|
||||||
|
this.vy = Math.sin(angle) * speed;
|
||||||
|
this.life = 1.0;
|
||||||
|
this.color = `hsl(${Math.random() * 60 + 330}, 100%, 50%)`; // Red/Orange/Yellow spectrum
|
||||||
|
this.size = Math.random() * 10 + 5;
|
||||||
|
}
|
||||||
|
update() {
|
||||||
|
this.x += this.vx;
|
||||||
|
this.y += this.vy;
|
||||||
|
this.vy += 0.2; // Gravity
|
||||||
|
this.life -= 0.02;
|
||||||
|
this.size *= 0.95;
|
||||||
|
}
|
||||||
|
draw() {
|
||||||
|
pCtx.globalAlpha = this.life;
|
||||||
|
pCtx.fillStyle = this.color;
|
||||||
|
pCtx.beginPath();
|
||||||
|
pCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||||
|
pCtx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function spawnExplosion(x, y) {
|
||||||
|
for(let i=0; i<50; i++) {
|
||||||
|
particles.push(new Particle(x, y));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function animateParticles() {
|
||||||
|
pCtx.clearRect(0, 0, particleCanvas.width, particleCanvas.height);
|
||||||
|
for (let i = particles.length - 1; i >= 0; i--) {
|
||||||
|
const p = particles[i];
|
||||||
|
p.update();
|
||||||
|
p.draw();
|
||||||
|
if (p.life <= 0) particles.splice(i, 1);
|
||||||
|
}
|
||||||
|
requestAnimationFrame(animateParticles);
|
||||||
|
}
|
||||||
|
animateParticles();
|
||||||
|
|
||||||
|
// --- 核心逻辑 ---
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
function init() {
|
||||||
|
grid.innerHTML = '';
|
||||||
|
for (let i = 1; i <= totalImages; i++) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = 'avatar-card';
|
||||||
|
div.id = `card-${i}`;
|
||||||
|
|
||||||
|
const img = document.createElement('img');
|
||||||
|
img.src = `${imagePath}${i}.png`;
|
||||||
|
img.onerror = function() { this.src = 'https://via.placeholder.com/150?text=No+Image'; }; // Fallback
|
||||||
|
|
||||||
|
div.appendChild(img);
|
||||||
|
grid.appendChild(div);
|
||||||
|
}
|
||||||
|
startDanmu();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 随机弹幕
|
||||||
|
function startDanmu() {
|
||||||
|
setInterval(() => {
|
||||||
|
if(Math.random() > 0.7) return; // 并不是每次都发
|
||||||
|
const text = funnyComments[Math.floor(Math.random() * funnyComments.length)];
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'danmu';
|
||||||
|
el.innerText = text;
|
||||||
|
el.style.top = Math.random() * 80 + 'vh';
|
||||||
|
el.style.fontSize = (Math.random() * 1.5 + 1) + 'rem';
|
||||||
|
document.body.appendChild(el);
|
||||||
|
|
||||||
|
// 动画结束后移除
|
||||||
|
setTimeout(() => { el.remove(); }, 6000);
|
||||||
|
}, 800);
|
||||||
|
}
|
||||||
|
|
||||||
|
let isSpinning = false;
|
||||||
|
let currentIndex = -1;
|
||||||
|
|
||||||
|
function startRoulette() {
|
||||||
|
if (isSpinning) return;
|
||||||
|
|
||||||
|
// 首次点击时解锁 AudioContext (浏览器限制)
|
||||||
|
if (audioCtx.state === 'suspended') audioCtx.resume();
|
||||||
|
|
||||||
|
isSpinning = true;
|
||||||
|
document.getElementById('actionBtn').disabled = true;
|
||||||
|
document.getElementById('actionBtn').innerText = "审判中...";
|
||||||
|
|
||||||
|
// 重置状态
|
||||||
|
document.querySelectorAll('.avatar-card').forEach(c => {
|
||||||
|
c.classList.remove('active', 'winner', 'loser');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 动画逻辑
|
||||||
|
let speed = 50; // 初始速度 (ms)
|
||||||
|
let steps = 0;
|
||||||
|
const minSteps = 30; // 至少跑多少步
|
||||||
|
const maxSteps = minSteps + Math.floor(Math.random() * 20); // 随机总步数
|
||||||
|
|
||||||
|
const cards = document.querySelectorAll('.avatar-card');
|
||||||
|
|
||||||
|
function step() {
|
||||||
|
// 清除上一个高亮
|
||||||
|
if (currentIndex !== -1) {
|
||||||
|
cards[currentIndex].classList.remove('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 随机选择下一个
|
||||||
|
let nextIndex;
|
||||||
|
do {
|
||||||
|
nextIndex = Math.floor(Math.random() * totalImages);
|
||||||
|
} while (nextIndex === currentIndex);
|
||||||
|
|
||||||
|
currentIndex = nextIndex;
|
||||||
|
cards[currentIndex].classList.add('active');
|
||||||
|
SoundMgr.playTick(); // 播放音效
|
||||||
|
|
||||||
|
steps++;
|
||||||
|
|
||||||
|
if (steps < maxSteps) {
|
||||||
|
// 计算下一步的速度
|
||||||
|
if (steps < minSteps * 0.7) {
|
||||||
|
speed = Math.max(50, speed - 5); // 加速
|
||||||
|
} else {
|
||||||
|
speed += (steps - minSteps * 0.7) * 4; // 减速更明显
|
||||||
|
}
|
||||||
|
setTimeout(step, speed);
|
||||||
|
} else {
|
||||||
|
// 停止
|
||||||
|
endGame(currentIndex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
step();
|
||||||
|
}
|
||||||
|
|
||||||
|
function endGame(winnerIndex) {
|
||||||
|
SoundMgr.playWin(); // 播放胜利音效
|
||||||
|
|
||||||
|
const cards = document.querySelectorAll('.avatar-card');
|
||||||
|
const winnerCard = cards[winnerIndex];
|
||||||
|
|
||||||
|
// 屏幕闪光特效
|
||||||
|
const flash = document.getElementById('flashOverlay');
|
||||||
|
flash.style.animation = 'none';
|
||||||
|
flash.offsetHeight; /* trigger reflow */
|
||||||
|
flash.style.animation = 'flashAnim 0.5s ease-out';
|
||||||
|
|
||||||
|
// 粒子爆炸特效 (在卡片位置)
|
||||||
|
const rect = winnerCard.getBoundingClientRect();
|
||||||
|
const centerX = rect.left + rect.width / 2;
|
||||||
|
const centerY = rect.top + rect.height / 2;
|
||||||
|
spawnExplosion(centerX, centerY);
|
||||||
|
|
||||||
|
// 视觉效果:其他人变暗,赢家高亮震动
|
||||||
|
cards.forEach((c, idx) => {
|
||||||
|
if (idx !== winnerIndex) {
|
||||||
|
c.classList.add('loser');
|
||||||
|
} else {
|
||||||
|
c.classList.add('winner');
|
||||||
|
c.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 延迟一点显示大图结果
|
||||||
|
setTimeout(() => {
|
||||||
|
const overlay = document.getElementById('resultOverlay');
|
||||||
|
const resultImg = document.getElementById('resultImage');
|
||||||
|
const resultText = document.getElementById('resultText');
|
||||||
|
|
||||||
|
resultImg.src = `${imagePath}${winnerIndex + 1}.png`;
|
||||||
|
resultText.innerText = resultTitles[Math.floor(Math.random() * resultTitles.length)];
|
||||||
|
|
||||||
|
overlay.classList.add('show');
|
||||||
|
isSpinning = false;
|
||||||
|
document.getElementById('actionBtn').disabled = false;
|
||||||
|
document.getElementById('actionBtn').innerText = "再来一局";
|
||||||
|
|
||||||
|
// 全屏粒子特效
|
||||||
|
spawnExplosion(window.innerWidth/2, window.innerHeight/2);
|
||||||
|
setTimeout(() => spawnExplosion(window.innerWidth/3, window.innerHeight/3), 200);
|
||||||
|
setTimeout(() => spawnExplosion(window.innerWidth*2/3, window.innerHeight*2/3), 400);
|
||||||
|
|
||||||
|
}, 1500);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetGame() {
|
||||||
|
document.getElementById('resultOverlay').classList.remove('show');
|
||||||
|
document.querySelectorAll('.avatar-card').forEach(c => {
|
||||||
|
c.classList.remove('active', 'winner', 'loser');
|
||||||
|
});
|
||||||
|
document.getElementById('actionBtn').innerText = "开始审判";
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||