Seamless Pattern Maker：瓷砖与重复图案
上传瓷砖图像，用缩放、旋转、间距和4种模式预览无缝图案。导出为PNG，100%本地处理。
什么是 Seamless Pattern Maker？
Seamless Pattern Maker 获取单个瓷砖图像，并将其渲染到可配置的画布上，以预览和导出无缝平铺图案。您可以控制缩放、旋转、间距，并从四种平铺模式中选择——普通网格、半砖偏移、对角线和镜像——精确查看瓷砖重复时的效果。满意后，将结果导出为大型PNG图像，或复制随时可粘贴的CSS background-image 代码片段。所有处理都在您的浏览器本地完成，不会将文件上传到任何服务器。
主要功能
- 通过拖放或点击上传瓷砖图像：上传区域支持拖放和点击浏览。超过10MB的文件将被拒绝并显示错误消息。加载的瓷砖尺寸显示在预览缩略图下方。
- 实时无缝平铺预览：每次调整设置时，画布会立即重新绘制。画布渲染足够的瓷砖以填充整个预览区域，包括边缘处的额外瓷砖以处理旋转溢出。
- 可调节瓷砖缩放（5%至400%）：以5%为增量的范围滑块，相对于原始像素尺寸放大或缩小瓷砖。在100%时，瓷砖以其原始尺寸渲染。
- 旋转控制（0至360度）：在绘制前围绕中心点旋转每个瓷砖。可与任何平铺模式配合使用。
- 瓷砖间距：-50至50像素的滑块控制间距。正值在瓷砖之间添加填充背景色的空间；负值使瓷砖重叠以产生分层效果。
- 四种平铺模式：普通 — 无偏移的标准网格。半砖 — 交替行偏移半个瓷砖宽度，像砌砖一样。半落 — 交替列偏移半个瓷砖高度，产生垂直交错图案。镜像 — 交替列水平翻转，交替行垂直翻转，创造万花筒般的对称效果。
- 可配置的画布尺寸：宽度和高度字段接受100–4096像素。预览画布和导出的PNG使用这些精确尺寸。
- 导出为PNG：将渲染的画布下载为
pattern-[宽度]x[高度].png。 - 复制CSS背景代码片段：生成单瓷砖画布，并将三个CSS属性复制到剪贴板：
background-image、background-repeat和background-size。
如何使用 Seamless Pattern Maker
第一步：上传瓷砖图像
将图像文件拖到上传区域，或点击浏览文件。您的浏览器原生支持的任何图像格式都可以接受。瓷砖图像的尺寸显示在缩略图下方——例如"64 x 64px"。如果您上传超过10MB的文件，工具会显示"文件过大"错误并拒绝该文件。上传成功后，预览画布会立即使用默认设置渲染平铺图案。
好的瓷砖图像是那些能自然平铺而没有可见接缝的图像——无缝可平铺的纹理、图标图案、几何形状，或您专门为平铺设计的图像。锯齿形、圆点或织物纹样等规则图案效果特别好。
第二步：选择平铺模式
控制区域显示四个模式按钮：
- 普通：标准网格，所有瓷砖在行和列中对齐。
- 半砖：奇数行向右偏移半个瓷砖步长（含间距），与标准砖墙图案完全相同。
- 半落：奇数列向下偏移半个瓷砖步长，产生壁纸和织物图案中常见的垂直交错效果。
- 镜像：每隔一列水平翻转（
ctx.scale(-1, 1)），每隔一行垂直翻转（ctx.scale(1, -1)），在瓷砖边界处创造对称反射。
点击每种模式，立即在画布上查看效果。
第三步：调整缩放、旋转和间距
三个滑块精细调整平铺效果：
- 缩放（5%–400%）：在100%时，瓷砖以其原始像素尺寸渲染。增加到200%使瓷砖看起来更大，图案更明显；减少到50%获得密集的微图案。
- 旋转（0°–360°）：旋转瓷砖以创造对角线条纹效果或为图案添加动感。条纹瓷砖旋转45°会产生对角线条纹图案。
- 间距（-50至50像素）：正值在瓷砖之间添加填充背景色的空间。负值使相邻瓷砖重叠以产生分层效果。
第四步：配置画布尺寸和背景颜色
在两个数字输入框中输入输出画布的宽度和高度（各100–4096像素）。实时预览会缩放以适应您的屏幕，但实际画布按指定尺寸渲染。CSS背景测试使用800×600已足够。印刷就绪的导出请使用2400×2400或更大。
点击背景颜色色板，选择瓷砖之间和周围的填充颜色。
第五步：导出为PNG或复制CSS
点击PNG按钮将渲染的画布下载为 pattern-[宽度]x[高度].png。将此图像用作设计软件、游戏引擎的纹理，或作为 <img> 元素使用。
点击CSS将随时可用的CSS代码片段复制到剪贴板。代码片段将单个瓷砖渲染到单独的画布并编码为base64数据URI。复制的三个属性：
background-image: url("data:image/png;base64,...");
background-repeat: repeat;
background-size: 72px 72px;background-size 的值是缩放后的瓷砖宽度加间距，以及缩放后的瓷砖高度加间距。直接将其粘贴到您的样式表中。
实用示例
网站砖墙背景图案
上传128×64的砖块纹理瓷砖。选择"半砖"模式，设置缩放100%、间距2像素、背景颜色 #2c1810（深灰泥棕色）。将画布设置为800×600。预览显示逼真的砖墙图案。复制CSS代码片段并粘贴到 .hero-section CSS规则中。background-repeat: repeat 确保它在浏览器中无限平铺。
横幅半落条纹图案
上传40×40的条纹瓷砖（透明背景上的单色对角线条纹，保存为PNG）。选择"半落"模式，设置缩放150%、旋转45°、间距0像素。条纹与半落偏移结合，创造出密集的交错条纹图案。导出为1200×400 PNG用作横幅背景。
印刷设计万花筒瓷砖
上传一个象限有彩色图案的100×100几何瓷砖。选择"镜像"模式，缩放100%、旋转0°、间距0像素。镜像模式在2×2重复单元中水平和垂直反射瓷砖，在画布上创造四重对称图案。以2400×2400导出，获得高分辨率印刷就绪图案。
卡片组件CSS背景图案
上传小型圆点纹理瓷砖（32×32 PNG）。选择"普通"模式，缩放75%、间距6像素、背景 #f8f8f8。画布400×400。复制CSS代码片段。在您的样式表中：
.card-background {
background-image: url("data:image/png;base64,...");
background-repeat: repeat;
background-size: 30px 30px;
}无论卡片大小如何，圆点都能无缝覆盖整张卡片。
使用技巧与最佳实践
使用专门设计为无缝的瓷砖。 工具会渲染您提供的任何瓷砖；它不会自动使瓷砖在边缘处无缝衔接。如果瓷砖内容在边界处不匹配，您会看到可见的接缝线。请设计或选用已经可以无缝平铺的瓷砖。
镜像模式消除明显的重复感。 即使是非无缝瓷砖，在镜像模式中通常看起来也能接受，因为反射效果遮盖了边缘。如果您的瓷砖不是专门为平铺设计的，请先尝试镜像模式。
旋转会增加画布边缘瓷砖。 工具计算等于 2 × Math.max(瓷砖宽, 瓷砖高) 的边距，并在画布边界之外渲染瓷砖，以填补旋转造成的空隙。
CSS代码片段使用单瓷砖数据URL。 CSS导出为代码片段创建一个 (瓷砖宽 + 间距) × (瓷砖高 + 间距) 大小的新画布，而不是完整的预览画布。这样可以保持数据URL较小，让浏览器通过 background-repeat: repeat 原生处理无限平铺。
设置可通过URL共享。 工具使用 useShareableState 将您当前的设置（缩放、旋转、间距、画布尺寸、背景颜色、平铺模式）编码到URL中。将URL分享给协作者，他们将看到您的精确配置。
间距控制范围为-50至50像素。 对于勾缝效果，使用对比色背景搭配3–8像素的正间距通常很真实。超过20像素的值适合图标网格或间距较大的几何图案。
常见问题与故障排除
"文件过大"错误：工具拒绝超过10MB的文件。上传前请将瓷砖图像压缩至10MB以下。
"格式无效"错误：工具需要有效的图像文件（file.type.startsWith('image/')）。非图像文件将被拒绝。
图案显示可见接缝线：瓷砖边缘不匹配。工具渲染您上传的任何瓷砖。若要获得无缝结果，请使用专门设计为无可见边缘的平铺图像。镜像模式可以部分遮盖非无缝边缘。
上传后画布显示为空白：实时预览仅在加载瓷砖图像时渲染。如果上传成功（缩略图可见）但画布为空白，请尝试清除并重新上传。
导出时显示"未加载图像"提示：在未加载图像的情况下点击PNG或CSS。请先上传瓷砖图像。
CSS代码片段数据URL非常大：单瓷砖画布的大小与缩放设置成比例。大瓷砖在400%缩放时，CSS数据URI可能相当大。对于生产CSS，最好将瓷砖保存为单独的图像文件，并使用常规URL引用它。
隐私与安全
Seamless Pattern Maker 完全在您的浏览器内处理所有图像。瓷砖图像通过FileReader API加载，并作为内存数据存储。所有画布操作（绘制、缩放、旋转、镜像）都使用浏览器的Canvas 2D API，不进行任何服务器通信。CSS导出仅将数据复制到本地剪贴板。页面加载一次后，工具支持离线使用。
常见问题解答
Seamless Pattern Maker 是免费的吗？ 是的，完全免费。所有四种平铺模式、所有控件、PNG导出和CSS复制均无需任何费用，也无需账户。
Seamless Pattern Maker 可以离线使用吗？ 可以。初始页面加载后，所有渲染都使用浏览器中的Canvas 2D API。在图案创建或导出期间不会发出任何网络请求。
我的数据在 Seamless Pattern Maker 中安全吗？ 您的瓷砖图像永远不会离开您的设备。FileReader API将它们加载到本地浏览器内存中，所有处理和导出均在客户端执行，不会向任何服务器传输任何内容。
我可以使用哪些图像格式作为瓷砖？ 您的浏览器原生支持的任何图像格式：JPEG、PNG、WebP、GIF、SVG（作为图像元素），以及在较新浏览器上的AVIF和HEIC。动态GIF将仅使用第一帧。
瓷砖文件的最大大小是多少？ 工具强制执行10MB的文件大小限制。超过10MB的文件将触发"文件过大"错误并被拒绝。
半砖平铺模式如何工作？ 在半砖模式下，每个奇数行（行索引 % 2 === 1）将其起始X位置向右偏移 stepX / 2。这创造出水平接缝交错的经典砌砖图案，既具结构性又具视觉特色。
镜像平铺模式如何工作？ 在画布渲染期间，镜像效果逐个瓷砖应用。对于每个瓷砖，工具检查其列索引是否为奇数（水平翻转）以及行索引是否为奇数（垂直翻转）。在绘制瓷砖之前应用 ctx.scale(-1, 1) 和/或 ctx.scale(1, -1)，然后恢复画布状态。
我可以在生产中使用CSS代码片段吗？ 可以，但对于生产用途，单独的图像文件通常更佳。嵌入CSS中的数据URL无法被浏览器独立缓存，会增加样式表大小，且难以更新。生产CSS中建议将瓷砖保存为单独图像文件，并用 url("path/to/tile.png") 引用。
旋转如何影响瓷砖网格？ 旋转使用 ctx.save()、ctx.translate()、ctx.rotate() 和 ctx.restore() 逐个应用于每个瓷砖。瓷砖网格本身不旋转——只有每个位置的瓷砖图像旋转。
我可以保存图案设置吗？ 可以。设置通过 useShareableState 自动编码到URL中，因此收藏或分享URL可以保留您当前的配置。高级支持者还可以保存缩放、旋转、间距、画布尺寸、背景颜色和平铺模式的命名预设。
相关工具
- 即将推出: SVG Pattern Generator — 无需源瓷砖图像，以编程方式创建可缩放矢量图案。
- 即将推出: Placeholder Generator — 生成纯色占位图像，用作测试图案制作器的快速瓷砖输入。
- 即将推出: Noise Texture — 生成适合作为无缝瓷砖输入的程序化噪声纹理。
- 即将推出: Image Effects — 在将瓷砖图像用作图案制作器输入之前，为其应用滤镜效果。
立即试用 Seamless Pattern Maker：Glyph Widgets Seamless Pattern Maker