# image-maker

**Repository Path**: aleckstygit/image-maker

## Basic Information

- **Project Name**: image-maker
- **Description**: 图形生成工具，随意生成png图标，各种控件，各种布局
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-07
- **Last Updated**: 2025-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 按钮生成器使用说明

## 简介
按钮生成器是一个命令行工具,用于生成自定义样式的按钮图片和复杂界面组件（如计算器界面）,支持设置背景色、边框、渐变、文字样式和图标等功能,同时提供网格布局系统用于构建复杂界面,还支持生成C语言布局文件。目前已配置为单一可执行文件，无需额外的DLL文件依赖。

## 功能特点
- 支持自定义按钮尺寸、圆角半径
- 支持纯色背景和渐变背景
- 可设置边框宽度和颜色
- 支持文字内容、对齐方式、字体、大小和样式
- 可添加图标并设置位置和大小
- 支持内边距(padding)和外边距(margin)调整
- 支持从JSON配置文件加载参数
- SVG图标颜色自动替换为前景色
- 支持背景图片设置及按钮外框剪切
- 支持CSS-like配置文件解析
- 支持网格布局系统
- 支持复杂界面组件生成(如计算器界面)
- 支持生成C语言布局文件及相关UI元素图片
- 多种形状支持，包括圆角矩形、多边形、平行四边形、扇形、五角星、环形、心形、月牙形、十字形等

## 安装说明
1. 确保已安装.NET 8.0 SDK（如需从源码构建）
2. 方式一：直接使用预构建的单一可执行文件
   - 从发布页面下载ImgMk.exe文件
   - 直接运行即可，无需额外依赖
3. 方式二：从源码构建
   - 克隆或下载项目到本地
   - 运行以下命令生成单一可执行文件：
     ```
     dotnet publish -c Release -r win-x64 --self-contained true
     ```
   - 可执行文件位于`bin/Release/net8.0/win-x64/publish`目录下

## 使用方法
基本命令格式：
```
ImgMk [参数] -o 输出文件路径
```

## 参数说明
| 参数 | 全称 | 描述 | 示例 |
|------|------|------|------|
| -w | --width | 按钮宽度（像素） | -w 200 |
| -h | --height | 按钮高度（像素） | -h 60 |
| -r | --radius | 圆角半径（像素，圆角矩形形状使用） | -r 10 |
| -f | --forecolor | 文字颜色（RGB格式） | -f 255,255,255 |
| -b | --backcolor | 背景颜色（RGB格式） | -b 0,128,255 |
| -bw | --borderwidth | 边框宽度（像素） | -bw 2 |
| -bc | --bordercolor | 边框颜色（RGB格式） | -bc 0,0,0 |
| -t | --text | 按钮文字内容 | -t "点击我" |
| -a | --align | 文字对齐方式（left/center/right） | -a center |
| -fn | --fontname | 字体名称 | -fn "微软雅黑" |
| -fs | --fontsize | 文字大小 | -fs 14 |
| -ft | --fontstyle | 字体样式（多个样式用逗号分隔） | -ft bold,italic |
| -i | --icon | 图标文件路径（PNG或SVG格式） | -i icon.png 或 -i icon.svg |
| -ip | --iconpos | 图标位置（left/right/top/bottom） | -ip right |
| -is | --iconsize | 图标大小（格式：宽度,高度） | -is 24,24 |
| -p | --padding | 内边距（格式：单个数值或上,右,下,左） | -p 10 或 -p 5,7,5,7 |
| -m | --margin | 外边距（格式：单个数值或上,右,下,左） | -m 5 或 -m 2,4,2,4 |
| -gs | --gradientstart | 渐变起始颜色（RGB格式） | -gs 0,128,255 |
| -ge | --gradientend | 渐变结束颜色（RGB格式） | -ge 0,0,255 |
| -gt | --gradienttype | 渐变类型（horizontal/vertical） | -gt horizontal |
| --shadow-enabled | 启用文字阴影效果 | --shadow-enabled |
| --batch | 启用批量生成模式 | --batch |
| --buttonlist | 指定按钮列表文件路径（批量模式） | --buttonlist button.txt |
| --outputdir | 指定批量生成文件输出目录 | --outputdir ./output |
| --shadow-color | 文字阴影颜色（RGB格式） | --shadow-color 51,51,51 |
| --shadow-offset-x | 阴影X轴偏移量 | --shadow-offset-x 2 |
| --shadow-offset-y | 阴影Y轴偏移量 | --shadow-offset-y 2 |
| --shadow-blur | 阴影模糊半径（值越大模糊效果越强） | --shadow-blur 3 |
| -c | --config | 配置文件路径（CSS-like格式,支持多配置块定义） | -c styles.cfg |
| -gb | --groundbmp | 背景图片路径（将被按钮外框剪切） | -gb background.png |
| -o | --output | 输出文件路径（必需） | -o button.png |
| -lay | --xml-layout | 指定XML布局文件路径 | -lay layout.xml |
| --c-layout | 启用C语言布局文件生成 | --c-layout |
| --c-layout-dir | 指定C语言布局文件和元素图片输出目录 | --c-layout-dir ./c_layout_output |
| -sh | --shape | 形状类型 | -sh Polygon |
| --shape-sides | 多边形边数（仅Polygon形状使用） | --shape-sides 5 |
| --shape-params | 形状参数，格式："param1=value1;param2=value2" | --shape-params "outerRadius=50;innerRadius=20" |
| --custom-path | 自定义路径（仅CustomPath形状使用，SVG路径格式） | --custom-path "M50,0 L100,50 L50,100 L0,50 Z"

## 使用示例

### 形状使用示例

#### 配置文件中的形状示例
```css
/* 多边形按钮（五边形） */
polygon_button {
    width: 100;
    height: 100;
    shape: Polygon;
    shape-sides: 5;
    back-color: 255,107,107;
    text: "五边形";
    fore-color: 255,255,255;
    font-size: 14;
}

/* 平行四边形按钮 */
parallelogram_button {
    width: 120;
    height: 40;
    shape: Parallelogram;
    shape-params: "skewX=30";
    back-color: 78,205,196;
    text: "平行四边形";
    fore-color: 255,255,255;
}

/* 扇形按钮（半圆） */
sector_button {
    width: 100;
    height: 50;
    shape: Sector;
    shape-params: "startAngle=0;endAngle=180";
    back-color: 69,183,209;
    text: "扇形";
    fore-color: 255,255,255;
}

/* 五角星按钮 */
star_button {
    width: 100;
    height: 100;
    shape: Star;
    shape-params: "outerRadius=50;innerRadius=20";
    back-color: 255,209,102;
    text: "★";
    font-size: 36;
    fore-color: 255,255,255;
}

/* 环形按钮 */
ring_button {
    width: 100;
    height: 100;
    shape: Ring;
    shape-params: "innerRadius=30";
    back-color: 106,5,114;
    border-width: 0;
    text: "环形";
    fore-color: 255,255,255;
}

/* 心形按钮 */
heart_button {
    width: 100;
    height: 100;
    shape: Heart;
    shape-params: "scale=1.0";
    back-color: 255,82,82;
    text: "♥";
    font-size: 48;
    fore-color: 255,255,255;
}

/* 自定义路径按钮（三角形） */
custom_shape_button {
    width: 100;
    height: 100;
    shape: CustomPath;
    custom-path: "M50,0 L100,100 L0,100 Z";
    back-color: 38,166,154;
    text: "自定义";
    fore-color: 255,255,255;
}

/* 月牙形状按钮 */
crescent_button {
    width: 100;
    height: 100;
    shape: Crescent;
    shape-params: "offset=0.3;rotation=0";
    back-color: 156,39,176;
    text: "月牙";
    fore-color: 255,255,255;
}

/* 十字形状按钮 */
cross_button {
    width: 100;
    height: 100;
    shape: Cross;
    shape-params: "armWidthRatio=0.2;rotation=0";
    back-color: 233,30,99;
    text: "十字";
    fore-color: 255,255,255;
}

/* 箭头形状按钮 */
arrow_button {
    width: 100;
    height: 60;
    shape: Arrow;
    shape-params: "direction=right;arrowSize=20";
    back-color: 25,118,210;
    text: "箭头";
    fore-color: 255,255,255;
}

/* 气泡形状按钮 */
bubble_button {
    width: 120;
    height: 80;
    shape: Bubble;
    shape-params: "direction=bottom;tailSize=15";
    back-color: 76,175,80;
    text: "气泡";
    fore-color: 255,255,255;
    font-size: 14;
}

/* 波浪形状按钮 */
wave_button {
    width: 120;
    height: 60;
    shape: Wave;
    shape-params: "waveCount=3;amplitude=5";
    back-color: 33,150,243;
    text: "波浪";
    fore-color: 255,255,255;
}
```

#### 命令行中的形状示例
```
# 创建五边形按钮
ImgMk -w 100 -h 100 -sh Polygon --shape-sides 5 -b 255,107,107 -t "五边形" -f 255,255,255 -o polygon_button.png

# 创建星形按钮
ImgMk -w 100 -h 100 -sh Star --shape-params "outerRadius=50;innerRadius=20" -b 255,209,102 -t "★" -fs 36 -f 255,255,255 -o star_button.png

# 创建月牙形状按钮
ImgMk -w 100 -h 100 -sh Crescent --shape-params "offset=0.3;rotation=0" -b 156,39,176 -t "月牙" -f 255,255,255 -o crescent_button.png

# 创建十字形状按钮
ImgMk -w 100 -h 100 -sh Cross --shape-params "armWidthRatio=0.2;rotation=0" -b 233,30,99 -t "十字" -f 255,255,255 -o cross_button.png

# 创建箭头形状按钮
ImgMk -w 100 -h 60 -sh Arrow --shape-params "direction=right;arrowSize=20" -b 25,118,210 -t "箭头" -f 255,255,255 -o arrow_button.png

# 创建气泡形状按钮
ImgMk -w 120 -h 80 -sh Bubble --shape-params "direction=bottom;tailSize=15" -b 76,175,80 -t "气泡" -f 255,255,255 -o bubble_button.png

# 创建波浪形状按钮
ImgMk -w 120 -h 60 -sh Wave --shape-params "waveCount=3;amplitude=5" -b 33,150,243 -t "波浪" -f 255,255,255 -o wave_button.png
```

### 1. 基本按钮
```
ImgMk -w 200 -h 60 -r 10 -f 255,255,255 -b 0,128,255 -t "点击我" -a center -m 5 -o basic_button.png
```

### 2. 带边框和渐变背景的按钮
```
ImgMk -w 220 -h 70 -r 15 -f 255,255,255 -gs 0,128,255 -ge 0,0,255 -gt horizontal -bw 2 -bc 0,0,128 -t "立即下载" -fs 16 -ft bold -o gradient_button.png
```

### 3. 带图标和自定义字体的按钮
```
ImgMk -w 240 -h 70 -r 10 -f 255,255,255 -b 255,69,0 -t "添加到购物车" -fn "微软雅黑" -fs 14 -ft bold -i cart.png -ip left -is 24,24 -p 15 -o icon_button.png
```

### 4. 使用配置文件生成按钮
```
# 使用CSS-like配置文件生成多个按钮
ImgMk -c styles.cfg -o output.png
# 将生成 output.png (default配置) 和 output_custom.png (custom配置)
```

### 5. 带背景图片的按钮
```
ImgMk -w 200 -h 60 -r 10 -t "背景图片示例" -gb bg.png -o background_button.png
```
```
ImgMk -w 240 -h 70 -r 10 -f 255,255,255 -b 255,69,0 -t "添加到购物车" -fn "微软雅黑" -fs 14 -ft bold -i cart.png -ip left -is 24,24 -p 15 -o icon_button.png
```

### 6. 配置文件示例 (styles.cfg)
```css
/* 默认配置块 - 生成 output.png */
default {
    width: 200;
    height: 60;
    radius: 10;
    fore-color: 255,255,255;
    back-color: 0,128,255;
    text: "点击我";
    align: center;
    padding: 10;
    margin: 5;
    shadow-enabled: true;
    shadow-color: #333333;
    shadow-offset-x: 2;
    shadow-offset-y: 2;
    shadow-blur: 3;
}

/* 自定义配置块 - 生成 output_custom.png */
custom {
    width: 220;
    height: 70;
    radius: 15;
    gradientstart: 0,128,255;
    gradientend: 0,0,255;
    gradienttype: horizontal;
    borderwidth: 2;
    bordercolor: 0,0,128;
    text: "立即下载";
    fontsize: 16;
    fontstyle: bold;
    shadow-enabled: true;
    shadow-color: #000000;
    shadow-offset-x: 1;
    shadow-offset-y: 1;
    shadow-blur: 3;
}
```

### 7. 计算器界面生成示例
```
ImgMk -c calculator.css -lay layout_calculator.xml -o calculator_image.png
```

### 8. 计算器界面配置文件示例 (calculator.css)
```css
/* 计算器主界面配置 */
calculator {
  width: 320;
  height: 480;
  background-color: #1c1c1c;
  border-radius: 15;
  grid-rows: 80, 70, 70, 70, 70, 70;
  grid-columns: 80, 80, 80, 80;
  grid-horizontal-gap: 5;
  grid-vertical-gap: 5;
  grid-cells: [
    { row: 0, column: 0, column-span: 4, content: { type: "display", config: "display" } },
    { row: 1, column: 0, content: { type: "button", config: "clear", text: "AC" } },
    { row: 1, column: 1, content: { type: "button", config: "sign", text: "±" } },
    { row: 1, column: 2, content: { type: "button", config: "percent", text: "%" } },
    { row: 1, column: 3, content: { type: "button", config: "operator", text: "÷" } },
    { row: 2, column: 0, content: { type: "button", config: "number", text: "7" } },
    { row: 2, column: 1, content: { type: "button", config: "number", text: "8" } },
    { row: 2, column: 2, content: { type: "button", config: "number", text: "9" } },
    { row: 2, column: 3, content: { type: "button", config: "operator", text: "×" } },
    { row: 3, column: 0, content: { type: "button", config: "number", text: "4" } },
    { row: 3, column: 1, content: { type: "button", config: "number", text: "5" } },
    { row: 3, column: 2, content: { type: "button", config: "number", text: "6" } },
    { row: 3, column: 3, content: { type: "button", config: "operator", text: "−" } },
    { row: 4, column: 0, content: { type: "button", config: "number", text: "1" } },
    { row: 4, column: 1, content: { type: "button", config: "number", text: "2" } },
    { row: 4, column: 2, content: { type: "button", config: "number", text: "3" } },
    { row: 4, column: 3, content: { type: "button", config: "operator", text: "+" } },
    { row: 5, column: 0, column-span: 2, content: { type: "button", config: "number", text: "0" } },
    { row: 5, column: 2, content: { type: "button", config: "number", text: "." } },
    { row: 5, column: 3, content: { type: "button", config: "equals", text: "=" } }
  ];
}

/* 显示区域样式 */
display {
  background-color: #1c1c1c;
  fore-color: #ffffff;
  font-size: 48;
  align: right;
  padding-right: 15;
}

/* 数字按钮样式 */
number {
  width: 70px;
  height: 70px;
  background-color: #333333;
  border-radius: 50px;
  border-width: 0;
  text: "0";
  font-size: 32px;
  font-name: "Arial";
  fore-color: #ffffff;
  align: center;
}

/* 运算符按钮样式 */
operator {
  width: 70;
  height: 70;
  background-color: #ff9500;
  border-radius: 50;
  border-width: 0;
  text: "+";
  font-size: 32;
  font-name: "Arial";
  fore-color: #ffffff;
  align: center;
}

/* 等号按钮样式 */
equals {
  width: 70;
  height: 70;
  background-color: #ff9500;
  border-radius: 50;
  border-width: 0;
  text: "=";
  font-size: 32;
  font-name: "Arial";
  fore-color: #ffffff;
  align: center;
}

/* 清除按钮样式 */
clear {
  width: 70;
  height: 70;
  background-color: #a5a5a5;
  border-radius: 50;
  border-width: 0;
  text: "AC";
  font-size: 24;
  font-name: "Arial";
  fore-color: #000000;
  align: center;
}

/* 符号按钮样式 */
sign {
  width: 70;
  height: 70;
  background-color: #a5a5a5;
  border-radius: 50;
  border-width: 0;
  text: "±";
  font-size: 24;
  font-name: "Arial";
  fore-color: #000000;
  align: center;
}

/* 百分比按钮样式 */
percent {
  width: 70;
  height: 70;
  background-color: #a5a5a5;
  border-radius: 50;
  border-width: 0;
  text: "%";
  font-size: 24;
  font-name: "Arial";
  fore-color: #000000;
  align: center;
}
```

### 9. C语言布局文件生成示例
```
ImgMk --xml-layout layout.xml -o output.png --c-layout --c-layout-dir ./c_layout
```

### 10. XML布局文件示例 (layout.xml)
```xml
<?xml version="1.0" encoding="UTF-8"?>
<window width="300" height="200" backcolor="240,240,240">
  <text id="title" x="20" y="20" width="260" height="30" text="测试窗口" fontsize="18" align="center"/>
  <button id="confirm" x="100" y="100" width="100" height="40" text="确认" backcolor="0,128,255" forecolor="255,255,255"/>
</window>
```

### 11. 生成的C语言布局文件示例 (ui_layout.h)

> 注意：同时会生成ui_layout.c文件和各个UI元素的单独图片文件。
```c
#ifndef UI_LAYOUT_H
#define UI_LAYOUT_H

// UI元素结构体定义
typedef struct {
    const char* id;
    int x;
    int y;
    int width;
    int height;
    const char* imagePath;
    const char* className;
    const char* text;
    int visible;
} UIElement;

// UI元素数组定义
UIElement ui_elements[] = {
    { "window", 0, 0, 300, 200, "", "window", "", 1 },
    { "title", 20, 20, 260, 30, "text_测试窗口.png", "text", "测试窗口", 1 },
    { "confirm", 100, 100, 100, 40, "button_确认.png", "button", "确认", 1 }
};

// UI元素数量宏定义
#define UI_ELEMENT_COUNT (sizeof(ui_elements) / sizeof(UIElement))

#endif // UI_LAYOUT_H
```

## 注意事项
- 背景色和渐变背景只能二选一,如果同时设置,渐变背景优先
- 图标支持PNG和SVG格式
- 字体样式支持：regular、bold、italic、underline、strikeout,可组合使用
- 确保指定的字体在系统中存在
- 输出文件目录必须存在
- 配置文件中的参数会覆盖命令行参数
- 配置文件支持多配置块定义,使用`default{...}`定义默认配置,其他配置块如`custom{...}`会生成带配置名称的文件
- 输出文件名规则: 原文件名 + "_配置名" + 扩展名,默认配置不添加后缀
- SVG图标会自动使用前景色替换原有颜色
- 生成C语言布局文件时,需要提供XML布局文件,并使用--c-layout参数启用该功能
- C语言布局文件会在指定目录生成ui_layout.h、ui_layout.c文件和各个UI元素的单独图片
- 程序已配置为单一可执行文件，无需额外的DLL文件依赖
- 使用SVG图标时，建议使用简单的路径结构以确保颜色替换正确

## 常见问题
Q: 生成的图片中文字显示不完整怎么办？
A: 可以减小字体大小或增加按钮宽度,也可以调整内边距。

Q: 为什么设置了渐变但没有效果？
A: 请确保同时设置了--gradientstart和--gradientend参数,并且没有设置--backcolor参数。

Q: 如何创建复杂的界面布局？
A: 有两种方式：
   1. 使用CSS-like配置文件和grid布局系统：设置content: grid,然后配置grid-rows、grid-columns和grid-cells来构建所需的布局
   2. 使用XML布局文件：通过-lay（或--xml-layout）参数指定XML布局文件路径，在XML中定义窗口和各UI元素的属性

Q: 计算器界面生成后为什么某些按钮没有显示文本？
A: 请检查calculator.css配置文件中的grid-cells部分,确保每个单元格的content配置中都包含了正确的text属性。

Q: C语言布局文件生成后为什么没有生成元素图片？
A: 请确保使用了正确的XML布局文件,并且文件中的元素定义正确包含了id、text等必要属性。

Q: 如何在C语言项目中使用生成的布局文件？
A: 将生成的ui_layout.h、ui_layout.c文件和对应的图片资源添加到C语言项目中,然后通过遍历ui_elements数组来创建和显示UI元素。

Q: 程序运行时需要哪些依赖？
A: 程序已配置为单一可执行文件，无需额外的DLL文件依赖。所有必要的组件（包括SkiaSharp和HarfBuzzSharp等）都已打包到exe文件中。