198 lines
6.1 KiB
Plaintext
198 lines
6.1 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SVG to PNG Converter</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
.icon-preview {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
margin: 20rpx 0;
|
|
}
|
|
.icon-item {
|
|
text-align: center;
|
|
padding: 10rpx;
|
|
background: #f9f9f9;
|
|
border-radius: 8rpx;
|
|
}
|
|
canvas {
|
|
border: 1rpx solid #ddd;
|
|
margin: 10rpx 0;
|
|
}
|
|
button {
|
|
background: #FFCC00;
|
|
color: #222;
|
|
border: none;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 6rpx;
|
|
cursor: pointer;
|
|
font-size: 14rpx;
|
|
font-weight: 500;
|
|
}
|
|
button:hover {
|
|
background: #FFD700;
|
|
}
|
|
.info {
|
|
background: #E3F2FD;
|
|
padding: 15rpx;
|
|
border-radius: 6rpx;
|
|
margin: 20rpx 0;
|
|
}
|
|
.info h3 {
|
|
margin-top: 0;
|
|
color: #1565C0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🎨 图标生成工具</h1>
|
|
|
|
<div class="info">
|
|
<h3>📋 使用说明</h3>
|
|
<p>1. 点击"生成PNG图标"按钮</p>
|
|
<p>2. 浏览器会自动下载4个PNG图标文件</p>
|
|
<p>3. 将下载的文件移动到 <code>d:/Program/vp/static/icons/</code> 目录</p>
|
|
</div>
|
|
|
|
<div class="icon-preview">
|
|
<div class="icon-item">
|
|
<canvas id="home" width="48" height="48"></canvas>
|
|
<p>home.png (未选中)</p>
|
|
</div>
|
|
<div class="icon-item">
|
|
<canvas id="home-active" width="48" height="48"></canvas>
|
|
<p>home-active.png (选中)</p>
|
|
</div>
|
|
<div class="icon-item">
|
|
<canvas id="profile" width="48" height="48"></canvas>
|
|
<p>profile.png (未选中)</p>
|
|
</div>
|
|
<div class="icon-item">
|
|
<canvas id="profile-active" width="48" height="48"></canvas>
|
|
<p>profile-active.png (选中)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick="generateAllIcons()">🎨 生成PNG图标</button>
|
|
</div>
|
|
|
|
<script>
|
|
// 绘制图标函数
|
|
function drawHomeIcon(canvas, isActive) {
|
|
const ctx = canvas.getContext('2d');
|
|
const color = isActive ? '#FFCC00' : '#999999';
|
|
const size = 48;
|
|
|
|
ctx.clearRect(0, 0, size, size);
|
|
ctx.strokeStyle = color;
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.lineJoin = 'round';
|
|
|
|
// 绘制房子轮廓
|
|
ctx.beginPath();
|
|
ctx.moveTo(24, 4);
|
|
ctx.lineTo(6, 14);
|
|
ctx.lineTo(6, 22);
|
|
ctx.arc(6, 24, 2, 0, Math.PI * 2);
|
|
ctx.lineTo(6, 24);
|
|
ctx.lineTo(42, 24);
|
|
ctx.arc(42, 22, 2, Math.PI, Math.PI * 2);
|
|
ctx.lineTo(42, 14);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
|
|
// 绘制门
|
|
ctx.beginPath();
|
|
ctx.moveTo(18, 24);
|
|
ctx.lineTo(18, 42);
|
|
ctx.lineTo(30, 42);
|
|
ctx.lineTo(30, 24);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function drawProfileIcon(canvas, isActive) {
|
|
const ctx = canvas.getContext('2d');
|
|
const color = isActive ? '#FFCC00' : '#999999';
|
|
const size = 48;
|
|
|
|
ctx.clearRect(0, 0, size, size);
|
|
ctx.strokeStyle = color;
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.lineJoin = 'round';
|
|
|
|
// 绘制头部圆圈
|
|
ctx.beginPath();
|
|
ctx.arc(24, 14, 6, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
|
|
// 绘制身体
|
|
ctx.beginPath();
|
|
ctx.moveTo(24, 24);
|
|
ctx.lineTo(24, 42);
|
|
ctx.moveTo(12, 32);
|
|
ctx.lineTo(36, 32);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 生成单个图标
|
|
function generateIcon(canvasId, filename) {
|
|
const canvas = document.getElementById(canvasId);
|
|
const url = canvas.toDataURL('image/png');
|
|
|
|
const link = document.createElement('a');
|
|
link.download = filename;
|
|
link.href = url;
|
|
link.click();
|
|
}
|
|
|
|
// 生成所有图标
|
|
function generateAllIcons() {
|
|
drawHomeIcon(document.getElementById('home'), false);
|
|
drawHomeIcon(document.getElementById('home-active'), true);
|
|
drawProfileIcon(document.getElementById('profile'), false);
|
|
drawProfileIcon(document.getElementById('profile-active'), true);
|
|
|
|
// 下载所有图标
|
|
setTimeout(() => {
|
|
generateIcon('home', 'home.png');
|
|
setTimeout(() => {
|
|
generateIcon('home-active', 'home-active.png');
|
|
setTimeout(() => {
|
|
generateIcon('profile', 'profile.png');
|
|
setTimeout(() => {
|
|
generateIcon('profile-active', 'profile-active.png');
|
|
alert('✅ 所有图标已生成并下载!\n\n请将下载的4个文件移动到:\nd:/Program/vp/static/icons/');
|
|
}, 100);
|
|
}, 100);
|
|
}, 100);
|
|
}, 100);
|
|
}
|
|
|
|
// 页面加载时预绘制图标
|
|
window.onload = function() {
|
|
drawHomeIcon(document.getElementById('home'), false);
|
|
drawHomeIcon(document.getElementById('home-active'), true);
|
|
drawProfileIcon(document.getElementById('profile'), false);
|
|
drawProfileIcon(document.getElementById('profile-active'), true);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|