-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (134 loc) · 7.89 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>像素图纸拆分工具</title>
<link rel="stylesheet" href="styles.css">
<script src="changelog.js"></script>
</head>
<body>
<div class="container">
<div class="toolbar">
<div class="input-group">
<input type="file" id="imageInput" accept="image/*">
<button id="resetBtn">重置</button>
</div>
<div class="transform-controls">
<button id="zoomInBtn">放大</button>
<button id="zoomOutBtn">缩小</button>
<span>缩放: <span id="zoomLevel">100%</span></span>
</div>
<div class="process-controls">
<button id="processBtn">处理图片</button>
<button id="downloadBtn">下载结果</button>
<button id="toggleEditMode">开启编辑</button>
</div>
<div class="magnifier-controls">
<button id="toggleMagnifier">开启放大镜</button>
<span>放大倍率: </span>
<select id="magnifierZoom">
<option value="2">2x</option>
<option value="4" selected>4x</option>
<option value="8">8x</option>
</select>
</div>
<div class="about-controls">
<button id="aboutBtn">关于</button>
</div>
</div>
<div class="main-content">
<div class="drawing-tools">
<button id="pencilTool" class="tool-btn active">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E" alt="铅笔">
</button>
<button id="eraserTool" class="tool-btn">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.14 3c-.51 0-1.02.2-1.41.59L2.59 14.73c-.78.78-.78 2.05 0 2.83l3.85 3.85c.78.78 2.05.78 2.83 0L20.41 10.27c.78-.78.78-2.05 0-2.83l-3.85-3.85c-.39-.39-.9-.59-1.42-.59z'/%3E%3C/svg%3E" alt="橡皮">
</button>
<button id="pickerTool" class="tool-btn">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.71 5.63l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z'/%3E%3C/svg%3E" alt="取色器">
</button>
<button id="togglePreview" class="tool-btn">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E" alt="预览">
</button>
<button id="undoBtn" class="tool-btn" disabled>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E" alt="撤销">
</button>
<button id="redoBtn" class="tool-btn" disabled>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z'/%3E%3C/svg%3E" alt="重做">
</button>
<button id="selectTool" class="tool-btn">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2z'/%3E%3C/svg%3E" alt="选区">
<div class="tool-tooltip">选区工具<span class="shortcut-key">S</span></div>
</button>
</div>
<div class="canvas-container">
<div id="previewWindow" class="preview-window">
<div class="preview-header">原图预览</div>
<canvas id="previewCanvas"></canvas>
</div>
<canvas id="mainCanvas"></canvas>
<canvas id="guidelineCanvas"></canvas>
<canvas id="editCanvas"></canvas>
<div id="magnifier" class="magnifier">
<canvas id="magnifierCanvas"></canvas>
<div class="magnifier-crosshair"></div>
</div>
</div>
<div class="color-palette">
<div class="palette-header">色卡</div>
<div id="colorList" class="color-list"></div>
<div class="color-picker">
<div class="palette-header">调色板</div>
<div class="color-wheel-container">
<canvas id="colorWheel" width="150" height="150"></canvas>
<div class="color-preview">
<div id="selectedColor"></div>
<div class="rgb-inputs">
<div class="rgb-input">
<label>R:</label>
<input type="number" id="redInput" min="0" max="255" value="0">
</div>
<div class="rgb-input">
<label>G:</label>
<input type="number" id="greenInput" min="0" max="255" value="0">
</div>
<div class="rgb-input">
<label>B:</label>
<input type="number" id="blueInput" min="0" max="255" value="0">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="status-bar">
<span>图片尺寸: <span id="imageSize">0 x 0</span></span>
<span>网格大小: <span id="gridSize">0 x 0</span></span>
<span>选区范围: <span id="selectionArea">0,0,0,0</span></span>
<span>当前颜色: <span id="currentColor">无</span></span>
</div>
</div>
<div id="aboutModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>关于像素图纸拆分工具</h2>
<span class="close">×</span>
</div>
<div class="modal-body">
<div class="author-info">
<h3>作者信息</h3>
<p>作者：CrystalYan Liu</p>
<p>GitHub：<a href="https://github.com/IceDragonFla" target="_blank">@CrystalYan Liu</a></p>
<p>划分逻辑灵感来自：<a href="https://pixm.lat/" target="_blank">@怪兽工作台</a></p>
</div>
<div class="changelog">
<h3>更新日志</h3>
<div id="changelogContent"></div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>