第一次上传
This commit is contained in:
@@ -0,0 +1,197 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user