> ## Documentation Index > Fetch the complete documentation index at: https://yumebox.gal.tf/llms.txt > Use this file to discover all available pages before exploring further. # 自定义应用图标 export const IconKitBuilder = () => { const WORKER_URL = "https://yumebox-iconkit.yumeyuka.moe"; const densities = [{ name: "mdpi", size: 48, foreground: 108 }, { name: "hdpi", size: 72, foreground: 162 }, { name: "xhdpi", size: 96, foreground: 216 }, { name: "xxhdpi", size: 144, foreground: 324 }, { name: "xxxhdpi", size: 192, foreground: 432 }]; function clip(context, size, shape) { context.beginPath(); if (shape === "circle") context.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2); else if (shape === "rounded") context.roundRect(0, 0, size, size, size * 0.22); else context.rect(0, 0, size, size); context.clip(); } const [image, setImage] = useState(); const [zipReady, setZipReady] = useState(typeof window !== "undefined" && Boolean(window.JSZip)); const [color, setColor] = useState("#ffffff"); const [colorInput, setColorInput] = useState("#ffffff"); const [shape, setShape] = useState("rounded"); const [shapeOpen, setShapeOpen] = useState(false); const [crop, setCrop] = useState(false); const [cropOpen, setCropOpen] = useState(false); const [padding, setPadding] = useState(0); const [zoom, setZoom] = useState(1); const [offset, setOffset] = useState({ x: 0, y: 0 }); const [busy, setBusy] = useState(false); const [error, setError] = useState(); const canvasRef = useRef(null); const fileInputRef = useRef(null); const drag = useRef(); const movedRef = useRef(false); const swatches = ["#ffffff", "#f4f1ee", "#d8d1c8", "#242322"]; useEffect(() => { const ready = () => setZipReady(true); window.addEventListener("icon-kit-jszip-ready", ready); return () => window.removeEventListener("icon-kit-jszip-ready", ready); }, []); useEffect(() => { const canvas = canvasRef.current; if (!canvas || !image) return; const context = canvas.getContext("2d"); if (!context) return; const size = 512; const available = size * (1 - padding * 2); const scale = (crop ? Math.max : Math.min)(available / image.naturalWidth, available / image.naturalHeight); const width = image.naturalWidth * scale * zoom; const height = image.naturalHeight * scale * zoom; context.clearRect(0, 0, size, size); context.save(); clip(context, size, shape); context.fillStyle = color; context.fillRect(0, 0, size, size); context.drawImage(image, (size - width) / 2 + offset.x * size, (size - height) / 2 + offset.y * size, width, height); context.restore(); }, [image, color, shape, crop, padding, zoom, offset]); function chooseFile(file) { if (!file?.type.startsWith("image/")) return setError("请选择 PNG、JPG 或 WebP 图片。"); const url = URL.createObjectURL(file); const next = new Image(); next.onload = () => { setImage(next); setZoom(1); setOffset({ x: 0, y: 0 }); setError(undefined); URL.revokeObjectURL(url); }; next.src = url; } function draw(source, size, foreground = true, extraPadding = 0) { const canvas = document.createElement("canvas"); canvas.width = size; canvas.height = size; const context = canvas.getContext("2d"); if (!context) throw new Error("无法生成 PNG"); const available = size * (1 - (padding + extraPadding) * 2); const scale = (crop ? Math.max : Math.min)(available / source.naturalWidth, available / source.naturalHeight); const width = source.naturalWidth * scale * zoom; const height = source.naturalHeight * scale * zoom; context.save(); clip(context, size, shape); context.fillStyle = color; context.fillRect(0, 0, size, size); if (foreground) context.drawImage(source, (size - width) / 2 + offset.x * size, (size - height) / 2 + offset.y * size, width, height); context.restore(); return canvas; } function blob(canvas) { return new Promise((resolve, reject) => canvas.toBlob(value => value ? resolve(value) : reject(new Error("无法生成 PNG")), "image/png")); } async function bundle() { if (!image) throw new Error("请先上传一张图标图片。"); if (!window.JSZip) throw new Error("压缩组件尚未加载，请稍后重试。"); const zip = new window.JSZip(); for (const density of densities) { zip.file(`res/mipmap-${density.name}/ic_launcher.png`, await blob(draw(image, density.size))); zip.file(`res/mipmap-${density.name}/ic_launcher_adaptive_fore.png`, await blob(draw(image, density.foreground, true, 0.15))); const background = document.createElement("canvas"); background.width = density.foreground; background.height = density.foreground; const backgroundContext = background.getContext("2d"); if (!backgroundContext) throw new Error("无法生成 PNG"); backgroundContext.fillStyle = color; backgroundContext.fillRect(0, 0, background.width, background.height); zip.file(`res/mipmap-${density.name}/ic_launcher_adaptive_back.png`, await blob(background)); } zip.file("res/mipmap-anydpi-v26/ic_launcher.xml", '\n\n \n \n'); zip.file("manifest.json", JSON.stringify({ format: "android-asset-studio-launcher-icon-v1" })); zip.file("play_store_512.png", await blob(draw(image, 512))); zip.file("1024.png", await blob(draw(image, 1024))); return zip.generateAsync({ type: "blob", compression: "DEFLATE", compressionOptions: { level: 6 } }); } async function download() { try { const url = URL.createObjectURL(await bundle()); const link = document.createElement("a"); link.href = url; link.download = "YumeBox-IconKit.zip"; link.click(); URL.revokeObjectURL(url); } catch (reason) { setError(reason instanceof Error ? reason.message : "生成 ZIP 失败。"); } } async function submit() { try { setBusy(true); setError(undefined); const form = new FormData(); form.append("bundle", await bundle(), "YumeBox-IconKit-icons.zip"); const response = await fetch(`${WORKER_URL}/v1/jobs`, { method: "POST", body: form }); if (!response.ok) throw new Error(await response.text()); const job = await response.json(); if (!job.issueUrl) throw new Error("创建构建 Issue 失败，请重试。"); window.location.assign(job.issueUrl); } catch (reason) { setError(reason instanceof Error ? reason.message : "提交失败，请重试。"); } finally { setBusy(false); } } function pointerDown(event) { if (!image) return; movedRef.current = false; drag.current = { x: event.clientX, y: event.clientY, ox: offset.x, oy: offset.y }; event.currentTarget.setPointerCapture(event.pointerId); } function pointerMove(event) { if (!drag.current) return; if (Math.abs(event.clientX - drag.current.x) > 4 || Math.abs(event.clientY - drag.current.y) > 4) movedRef.current = true; const size = event.currentTarget.getBoundingClientRect().width; setOffset({ x: drag.current.ox + (event.clientX - drag.current.x) / size, y: drag.current.oy + (event.clientY - drag.current.y) / size }); } function openFilePicker() { if (!movedRef.current) fileInputRef.current?.click(); movedRef.current = false; } function changeZoom(value) { const next = Number(value); if (Number.isFinite(next)) setZoom(Math.max(0.5, Math.min(3, next / 100))); } function changePadding(value) { const next = Number(value); if (Number.isFinite(next)) setPadding(Math.max(0, Math.min(35, next)) / 100); } function updateColor(value) { const next = value.startsWith("#") ? value : `#${value}`; if (!(/^#[0-9a-f]{0,6}$/i).test(next)) return; setColorInput(next); if ((/^#[0-9a-f]{6}$/i).test(next)) setColor(next.toLowerCase()); } const buildLabel = busy ? "创建中..." : "创建并打开构建 Issue"; const positiveStatus = busy ? "正在保存图标包并打开 GitHub Issue。" : undefined; return
{ drag.current = undefined; }} onPointerCancel={() => { drag.current = undefined; movedRef.current = false; }} onClick={openFilePicker}> {image ? :
上传图标 PNG、JPG 或 WebP
} event.stopPropagation()} onChange={event => { chooseFile(event.target.files?.[0]); event.target.value = ""; }} />

背景色

{swatches.map(swatch =>

形状

{shapeOpen && <>
setShapeOpen(false)} />
{[{ value: "square", label: "方形" }, { value: "rounded", label: "圆角" }, { value: "circle", label: "圆形" }].map(option => )}
}

裁剪方式

{cropOpen && <>
setCropOpen(false)} />
{[{ value: false, label: "完整显示" }, { value: true, label: "填充裁剪" }].map(option => )}
}

缩放

changeZoom(event.target.value.replace("%", ""))} className="h-full min-w-0 flex-1 border-0 bg-transparent px-1 text-center text-sm font-medium outline-none" />

留白

changePadding(event.target.value.replace("%", ""))} className="h-full min-w-0 flex-1 border-0 bg-transparent px-1 text-center text-sm font-medium outline-none" />
{positiveStatus &&
{positiveStatus}
} {error &&
{error}
}
; }; 使用下面的工具制作 YumeBox 的应用图标。创建构建 Issue 后提交，GitHub 会在 Issue 评论中报告构建进度并提供 APK 工件下载链接。 ## 使用