万花筒对称图片生成：用楔形镜像复刻光的几何游戏
从万花筒的光学原理到 Canvas 楔形镜像算法，了解如何把一张普通照片拆解、旋转、镜面复制，重组为径向对称的对称艺术。
从童年玩具到视觉语言：对称的魅力
万花筒（Kaleidoscope）一词由希腊语「kalos」（美丽）、「eidos」（形式）与「skopein」（观看）组合而来，字面意思就是「观察美丽的形态」。它的核心是一组以特定角度排列的反射镜：当彩色碎片落在镜筒底端，光线在镜面之间来回反射，便在观察者眼中拼出一幅永远对称、永远变化的图案。
这种径向对称之所以让人愉悦，与自然界大量存在的对称结构密切相关——雪花、花朵、海星、甚至人类自身的左右对称。当一张随意拍摄的照片被强制纳入这种秩序，混乱的像素便获得了节奏感，这正是万花筒工具最迷人的地方：它不改变素材本身，只是换了一种观看的方式。
楔形镜像：Canvas 里的反射镜
本工具用 HTML5 Canvas 复刻了万花筒的光学逻辑，核心是「楔形镜像法」：
- 取样：从原图中心（或你指定的九宫格位置）裁出一块正方形区域作为「碎片源样」。
- 分扇：把输出画布想象成一个圆盘，按「对称段数」切成若干个等角的扇形楔形。
- 旋转 + 镜像：每一段绕画布中心旋转一个固定角度；其中偶数段再做一次垂直翻转（scale 1, -1），形成镜面反射——这正是真实万花筒相邻镜面「相接处严丝合缝」的关键。
- 裁剪绘制：在每个楔形内用 clip 限定绘制范围，再把源样绘制进去，所有楔形拼合即得到完整花纹。
三个主参数对应三种创作意图：对称段数决定花纹的「瓣数」与密集度（4 瓣粗犷、12 瓣繁复）；旋转角度让整组花纹绕中心转动，寻找最舒服的相位；缩放控制源样在楔形内的放大倍率，数值越大花纹越疏朗、越少重复。点击「随机化」则一次性给这三个参数一个惊喜组合。
一块对称图能用在哪
径向对称的图案天然适合做「底纹」和「焦点」：
- 社媒封面与头像：居中对称的图形在方形头像框里极其稳定，万花筒纹理又能保证每张都独一无二。
- 壁纸与背景：低饱和、深背景的对称图是手机锁屏、PPT 背景、直播贴片的优质素材。
- 涂色本与线稿素材：把源样换成线描图，生成的对称稿可导出后用于手工涂色或转印。
- 品牌视觉点缀：电商主图、活动海报中作为装饰性几何元素，比纯色块更有记忆点。
常见问题
万花筒工具和普通的图片滤镜有什么区别？
普通滤镜（如调色、模糊）是对整张图做统一的像素运算，结果是确定性的。万花筒工具做的是几何重组：它把图像切成扇形、旋转并镜面复制，重组出原本不存在的对称结构。也就是说，它改变的是图像的「空间秩序」而非「颜色外观」，所以同一张照片在不同段数、旋转、缩放下会呈现完全不同的图案。
对称段数设多少比较好？
段数决定花纹的「瓣数」。4 或 6 段适合想要简洁、有设计感的大色块；8 段是最均衡的默认选择，既丰富又不杂乱；10 或 12 段会产生细腻密集的纹理，适合做壁纸或背景。建议从 8 段开始，再按素材特点增减。
为什么有的图生成出来比较空、不够好看？
万花筒效果高度依赖源样的色彩与细节密度。如果原图是大面积纯色（如蓝天、白墙），楔形里没有可重复的信息，花纹就会显得空。解决方法是：换一张色彩丰富、有线条或色块的照片；或在「取样位置」里选择原图中细节最多的区域（而非默认中心）；也可以调小缩放让源样在楔形内重复更多次，增加层次。
生成的图片是什么格式？背景能透明吗？
导出为 PNG 格式。背景默认是深黑，你也可以用控制面板里的「背景填充」取色器换成任意纯色（比如白色或品牌色）。当前版本不支持透明背景，因为楔形拼合需要在不透明底上绘制；若后续要抠图合成，建议把背景设为纯白或纯黑，便于在其他工具中处理。
手机拍的照片能用吗？会泄露隐私吗？
完全可以，手机照片通常分辨率足够。更重要的是：本工具完全在浏览器本地运行，图片不会被上传到任何服务器，关掉页面后内存中的图像数据即被释放，隐私安全。处理大图时程序会自动限制源样与画布的最大边长，保证预览流畅不卡顿。
导出的图分辨率高吗？能印刷吗？
预览画布为兼顾流畅度会限制在约 760 像素边长，并按设备像素比（dpr）高清渲染，导出即该分辨率。对于社媒封面、头像、屏幕壁纸完全足够；若要用于印刷，建议先用较高分辨率的原图生成，必要时在导出后做适当放大。本工具不做云端放大，以保证本地处理的即时性与隐私性。