# image-scale

**Repository Path**: tiandashu/image-scale

## Basic Information

- **Project Name**: image-scale
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-25
- **Last Updated**: 2025-08-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 云南省地图 - UniApp 项目

这是一个基于 UniApp 开发的云南省地图应用，支持地图缩放、移动和图片裁剪功能。

## 功能特性

### 🗺️ 地图功能

- **云南省地图展示**：使用云南省行政区划图作为背景
- **城市标记**：显示云南省 16 个主要城市和自治州
- **地图交互**：
  - 单指拖拽移动地图
  - 双指缩放地图
  - 点击城市标记查看信息
  - 重置地图到中心位置

### ✂️ 图片裁剪功能

- 集成了 [wx-cropper](https://github.com/IFmiss/wx-cropper) 微信小程序图片裁剪组件
- 支持自由裁剪和固定比例裁剪
- 可调整裁剪区域大小

## 技术栈

- **框架**：UniApp
- **语言**：Vue.js + JavaScript
- **组件**：@dw/wx-cropper
- **平台**：微信小程序

## 安装和配置

### 1. 安装依赖

```bash
npm install @dw/wx-cropper
```

### 2. 组件配置

在 `pages.json` 中配置组件：

```json
{
	"path": "pages/index/index",
	"style": {
		"usingComponents": {
			"my-cropper": "@dw/wx-cropper"
		}
	}
}
```

### 3. 组件使用

```vue
<my-cropper
	wx:if="{{showCropper}}"
	:imageSrc="mapImage"
	:cutRatio="cutRatio"
	:cropperRatio="cropperRatio"
	:cropperWidth="cropperWidth"
	:minCropperW="minCropperW"
	@close="hideCut" />
```

## 组件参数说明

### wx-cropper 组件参数

| 参数           | 类型   | 说明                       | 示例             |
| -------------- | ------ | -------------------------- | ---------------- |
| `imageSrc`     | String | 需要裁剪的图片地址         | `/static/bg.png` |
| `cutRatio`     | Number | 初始化的裁剪比例           | `0` (不固定比例) |
| `cropperRatio` | Number | 组件裁剪显示区域的最大比例 | `1`              |
| `cropperWidth` | Number | 裁剪区域的宽度             | `720`            |
| `minCropperW`  | Number | 裁剪区域最小宽度           | `100`            |

### 事件

| 事件名  | 说明                       | 参数                    |
| ------- | -------------------------- | ----------------------- |
| `close` | 关闭裁剪器或完成裁剪时触发 | `{path, width, height}` |

## 使用说明

### 地图操作

1. **移动地图**：单指在屏幕上拖拽
2. **缩放地图**：双指捏合或展开
3. **查看城市**：点击地图上的城市标记
4. **重置位置**：点击右侧"重置"按钮

### 图片裁剪

1. **开始裁剪**：点击右侧"裁剪"按钮
2. **调整裁剪区域**：拖拽裁剪框边缘或角落
3. **完成裁剪**：点击确认按钮
4. **取消裁剪**：点击取消按钮

## 城市标记

应用包含云南省以下城市和自治州的标记：

### 省会城市

- 🏛️ 昆明市

### 地级市

- 🏢 保山市
- 🏢 临沧市
- 🏢 玉溪市
- 🏢 普洱市
- 🏢 曲靖市
- 🏢 昭通市

### 自治州

- 🗼 大理白族自治州
- 🗼 丽江市
- 🗼 迪庆藏族自治州
- 🗼 怒江傈僳族自治州
- 🗼 西双版纳傣族自治州
- 🗼 德宏傣族景颇族自治州
- 🗼 楚雄彝族自治州
- 🗼 红河哈尼彝族自治州
- 🗼 文山壮族苗族自治州

## 开发说明

### 项目结构

```
scale-image/
├── pages/
│   └── index/
│       └── index.vue      # 主页面
├── static/
│   ├── bg.png            # 云南省地图图片
│   ├── bg.jpg            # 备用地图图片
│   └── test.png          # 测试图片
├── pages.json            # 页面配置
├── package.json          # 依赖配置
└── README.md             # 项目说明
```

### 自定义配置

#### 修改地图图片

在 `pages/index/index.vue` 中修改 `mapImage` 路径：

```javascript
data() {
  return {
    mapImage: '/static/your-map-image.png'
  }
}
```

#### 调整城市标记位置

修改 `buildings` 数组中的坐标：

```javascript
buildings: [
	{ name: '昆明市', x: 300, y: 200, type: 'capital' },
	// 添加更多城市...
]
```

#### 配置裁剪参数

```javascript
data() {
  return {
    cutRatio: 0,        // 0=不固定比例, 1=1:1, 2=2:1
    cropperRatio: 1,    // 裁剪区域最大比例
    cropperWidth: 720,  // 裁剪区域宽度
    minCropperW: 100    // 最小裁剪宽度
  }
}
```

## 注意事项

1. **图片格式**：支持 PNG、JPG 等常见图片格式
2. **图片大小**：建议图片大小不超过 2MB
3. **裁剪功能**：仅在微信小程序环境下可用
4. **性能优化**：大图片建议进行压缩处理

## 参考资源

- [wx-cropper GitHub](https://github.com/IFmiss/wx-cropper) - 微信小程序图片裁剪组件
- [UniApp 官方文档](https://uniapp.dcloud.io/) - UniApp 开发文档
- [微信小程序开发文档](https://developers.weixin.qq.com/miniprogram/dev/framework/) - 微信小程序开发指南

## 许可证

MIT License