功能#

• 生成圆形、方形和菱形网点。
• 从 SVG 或透明 PNG 文件导入自定义图案单元。
• 组合均匀、线性、径向、波浪、环形和噪声标量场，控制网点大小。
• 使用方形或交错网格，独立设置间距和旋转角度。
• 通过随机种子为每个图案单元添加可复现的位置、旋转和大小变化。
• 添加保留原始色彩的 PNG、JPEG 或 WebP 图片图层。
• 在画布上移动、旋转、拉伸或等比例缩放图片图层。
• 将图片恢复为原始宽高比和适合画布的尺寸。
• 调整图层顺序、复制、隐藏、锁定图层，并设置混合模式。
• 导出 SVG，或以 1 倍、2 倍、4 倍尺寸导出透明 PNG。
• 保存和重新打开包含完整资源的 JSON 项目文件。
• 撤销、重做编辑操作，并自动保存到浏览器本地存储。

快速开始#

建议使用 Node.js 22.12 或更高版本，以及 npm。

1
npm install
2
npm run dev

打开终端中显示的本地地址，默认地址为 http://127.0.0.1:5173/。

构建生产版本：

1
npm run build

生成的静态站点位于 dist/ 目录，可使用任意静态 Web 服务器托管。

基本使用流程#

1. 从预设开始，或新建项目。
2. 选中半色调图层，设置图案、网格、大小、颜色和标量场。
3. 导入 SVG 或透明 PNG，作为自定义重复图案。
4. 根据需要开启随机变化，让各个图案单元呈现不同的视觉效果。
5. 添加图片图层，预览半色调与原始素材或背景的组合效果。
6. 将结果导出为 SVG 或 PNG，或保存为可继续编辑的 JSON 项目文件。

图片图层#

图片图层保留原始颜色和 Alpha 透明通道，可为绑定的半色调图层提供透明度来源，也可设置为不参与最终导出。

选中未锁定的图片图层后：

• 拖动图片可移动位置。
• 拖动边缘控制点可改变宽度或高度。
• 拖动角点可等比例缩放。
• 按住 Shift 拖动边缘控制点可等比例缩放。
• 拖动过程中按 Escape 可恢复调整前的尺寸。
• 在属性面板中精确设置位置、尺寸、旋转角度、不透明度和混合模式。
• 使用 重置尺寸，可恢复原始宽高比和适合画布的尺寸，同时保留当前位置和旋转角度。

导入的图片会保存在项目文件中，因此重新打开项目时无需提供原始文件。

自定义图案#

SVG 图案单元在导出 SVG 时仍保留为矢量图形。透明 PNG 图案单元使用其 Alpha 通道作为蒙版，并以图层颜色着色。

为获得稳定的 SVG 导入效果，建议将文字转换为路径，并避免使用外部图片、外部样式表、滤镜和不受支持的蒙版。如果不希望 PNG 的整个矩形区域成为图案的一部分，请先确保图片具有透明背景。

使用限制#

• 画布尺寸：每边 64～4096 像素。
• 图层总数上限：8 个。
• 每个半色调图层的标量场上限：8 个。
• 每个项目保存的资源上限：32 个。
• 候选网格单元上限：50,000 个。
• 自定义图案文件大小上限：5 MB。
• 原始图片上限：20 MB，且总像素不超过 1600 万。
• PNG 导出上限：最长边 8192 像素，且总像素不超过 1600 万。