Glyph WidgetsGlyph Widgets
关于联系隐私条款在Ko-fi上支持

© 2026 Glyph Widgets. 保留所有权利。

·

100% 客户端处理

无缝图案生成器

最后更新:2026年3月11日

上传平铺图像,在可配置画布上生成无缝平铺预览。调整平铺缩放、旋转、间距,并选择多种平铺模式。导出为 PNG 或复制 CSS 背景代码片段。100% 客户端处理。

功能

  • ▶通过拖放或点击浏览上传瓷砖图像
  • ▶在可配置画布上实时无缝平铺预览
  • ▶瓷砖缩放从25%到400%可调
  • ▶旋转控制从0到360度
  • ▶瓷砖间隙和间距控制(0-50px)
  • ▶多种平铺模式:普通网格、半砖偏移、对角线、镜像
  • ▶自定义画布大小最高4096x4096像素
  • ▶导出为PNG或复制CSS背景代码片段
  • ▶画布背景颜色选择器
  • ▶100%客户端处理——图像永不离开您的浏览器
  • ▶Tile opacity and 16 blend modes for compositing control
  • ▶Randomization: per-tile offset and rotation with seeded PRNG for organic patterns
  • ▶Custom canvas size up to 4096x4096 pixels
  • ▶Export as PNG or copy CSS background snippet
  • ▶Background color picker for the canvas
  • ▶100% client-side processing — images never leave your browser

如何使用此工具

1

上传瓷砖图像

拖放或点击上传您想用作重复瓷砖的图像。支持的格式包括PNG、JPG、SVG和WebP。

2

选择平铺模式

从普通网格、半砖偏移(如砖砌)、对角偏移或镜像平铺中选择,以更改瓷砖的排列方式。

3

调整设置

使用控件微调瓷砖缩放、旋转角度、间隙间距、画布尺寸和背景颜色。

4

预览图案

画布会随着设置更改实时更新,精确显示平铺图案的效果。

5

导出

将图案下载为PNG图像,或复制CSS背景代码片段以用于您的网页项目。

基于Canvas的瓷砖渲染

该工具使用HTML5 Canvas API在可配置的画布上反复绘制您的瓷砖图像。每个瓷砖都被单独定位和变换,以最大程度地控制图案布局。

平铺模式

  • -普通网格模式将瓷砖放置在无偏移的规则网格中。
  • -半砖模式将每隔一行移动半个瓷砖宽度,形成砖砌图案。
  • -对角线模式对每行应用渐进偏移,形成倾斜平铺效果。
  • -镜像模式在相邻瓷砖上交替进行水平和垂直翻转,创建对称图案。

缩放与旋转

缩放控件将每个瓷砖从原始大小的25%调整到400%。旋转在每个瓷砖的中心周围应用变换,允许0到360度的任意角度。两种变换都使用Canvas变换操作以实现清晰渲染。

CSS导出

CSS导出会创建一个单瓷砖画布,以当前的缩放和旋转设置渲染瓷砖,将其转换为数据URI,并生成带有适当background-repeat和background-size值的background-image CSS属性。

客户端处理

所有图像处理都完全在您的浏览器中使用Canvas API进行。您的图像永远不会上传到任何服务器,确保完全隐私。工具加载后可离线使用。

常见问题

您可以上传任何浏览器支持的图像格式,包括PNG、JPG、JPEG、SVG、WebP、GIF和BMP。建议使用PNG格式的透明瓷砖。

相关工具

平铺来源

图案预览

预览网格:

上传平铺图像或选择内置形状以查看图案预览

控制

#ffffff
×

颜色控制

Pattern Randomization is a Supporter feature.

Saved Presets is a Supporter feature.

Tool History is a Supporter feature.

Tool Notes is a Supporter feature.

分享