# 绘制线段和多边形

**Repository Path**: tianyu0-0/draw

## Basic Information

- **Project Name**: 绘制线段和多边形
- **Description**: 研究通过canvas和svg两种方式来绘制线段，多边形，以及扩展需求，实现一次画多个图形，节点可拖动的功能。
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 0
- **Created**: 2020-08-04
- **Last Updated**: 2024-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 绘制线段和多边形

## 项目介绍

研究通过canvas和svg两种方式来绘制线段，多边形，以及扩展需求，实现一次画多个图形，节点可拖动的功能。

## 项目展示

![Image 项目展示](./img/1.png)
![Image 项目展示](./img/2.png)
![Image 项目展示](./img/3.png)
![Image 项目展示](./img/4.png)

## 开发操作

### 初始化
```
npm install
```

### 建立服务
```
npm run serve
```

### 打包
```
npm run build
```

## 项目简介

主要是实现绘制线段，多边形功能  

- Canvas.vue
用canvas实现绘制多边形

- CanvasPro.vue
主要是可以一次画多个区域。

- CanvasDraggable.vue
在CanvasPro.vue的基础上增加了节点可拖动的功能。

- Svg.vue
用Svg实现绘制多边形

- SvgPro.vue
用Svg实现绘制多边形,可以一次画多个多边形。

- LineDraggable.vue
用canvas实现绘制线段，并可以绘制多个且节点可拖动。

- ConsecutiveLineDraggable.vue
用canvas实现绘制连续线段，并可以绘制多个且节点可拖动。

## 项目日志

### 2020.08.04

写了一个canvas绘制多边形的demo,主要代码在src/views/Canvas.vue里.  
这个dome主要是解决公司业务逻辑有关部分.  

### 2020.08.05

postcss-px2rem 插件的使用, 主要是将px转成rem, 不需要自己手动写.  

使用 postcss-px2rem  需要自己在vue.config.js配置一下.  

对了,打包的时候发现打包路径不对, 也需要在vue.config.js配置一下.  

写了一个svg的绘制多边形的demo, 主要代码在src/views/Svg.vue里.  
和上面canvas的demo, 逻辑基本一样.  

### 2020.08.06

优化svg绘制的demo

### 2020.10.27

增加CanvasPro页面，主要是可以一次画多个区域。

### 2020.10.28

增加CanvasDraggable页面，主要是增加了节点可拖动的功能。

### 2020.11.11

原先提交坐标数据为当前图片外框相对坐标，现在修改为以图片原始宽高为坐标系。即不管图片定义的宽高为多少，均以图片原始宽高为准，生成或者提交的坐标做等比换算。

### 2021.03.05

增加SvgPro.vue页面，实现用Svg实现绘制多边形,可以一次画多个多边形。

### 2021.08.02

CanvasDraggable页面优化每个节点显示原点，方便查看节点和拖拽。  

新增LineDraggable页面，主要是用来绘制线段，多个绘制并节点可拖动。

### 2021.09.26

新增ConsecutiveLineDraggable页面，实现连续线段，其他功能和LineDraggable页面一样。