├── .editorconfig
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── canvas-drag.vue
    │   └── image
    │   │   ├── close.png
    │   │   └── 放大.png
    └── main.js
└── vue.config.js


/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 前言
 2 | 这个是Vue版本
 3 | # 效果示范
 4 | 
 5 | ![](https://user-gold-cdn.xitu.io/2020/3/7/170b100c4f06f6e7?w=379&h=603&f=gif&s=1753702)
 6 | # 线上预览
 7 | 查看效果点击 [线上预览](http://120.77.242.209/canvas/)【只支持移动端，PC端请切换到移动端】
 8 | 
 9 | # 使用方法
10 | - clone项目到本地
11 | - cd vue-canvas-drag
12 | - npm i
13 | - npm run serve
14 | 
15 | # 介绍文章
16 | - [掘金](https://juejin.im/post/5e5e5f0af265da57133b30bc)


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "canvas",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.4",
12 |     "vue": "^2.6.11"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "^4.2.0",
16 |     "@vue/cli-plugin-eslint": "^4.2.0",
17 |     "@vue/cli-service": "^4.2.0",
18 |     "@vue/eslint-config-standard": "^5.1.0",
19 |     "babel-eslint": "^10.0.3",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-import": "^2.20.1",
22 |     "eslint-plugin-node": "^11.0.0",
23 |     "eslint-plugin-promise": "^4.2.1",
24 |     "eslint-plugin-standard": "^4.0.0",
25 |     "eslint-plugin-vue": "^6.1.2",
26 |     "vue-template-compiler": "^2.6.11"
27 |   },
28 |   "eslintConfig": {
29 |     "root": true,
30 |     "env": {
31 |       "node": true
32 |     },
33 |     "extends": [
34 |       "plugin:vue/essential",
35 |       "@vue/standard"
36 |     ],
37 |     "parserOptions": {
38 |       "parser": "babel-eslint"
39 |     },
40 |     "rules": {}
41 |   },
42 |   "browserslist": [
43 |     "> 1%",
44 |     "last 2 versions"
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Akakiiiiii/vue-canvas-drag/575b6b0d3dcc856c8dc7fec6fb7c479ce9be9003/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 |   <script>
18 |   </script>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="wrap">
 3 |     <canvas-drag :imgArr="imgArr"></canvas-drag>
 4 |     <div class="upload">
 5 |       <input type="file"
 6 |           accept="image/jpeg, image/png, image/jpg"
 7 |           @change="changeImage($event)"
 8 |           class="input-opacity">
 9 |       上传图片
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import canvasDrag from './components/canvas-drag'
16 | export default {
17 |   name: 'App',
18 |   data () {
19 |     return {
20 |       url: '',
21 |       imgArr: []
22 |     }
23 |   },
24 |   methods: {
25 |     changeImage (e) {
26 |       const fileObj = new FileReader()
27 |       fileObj.readAsDataURL(e.target.files[0])
28 |       fileObj.onload = () => {
29 |         this.picReduce(fileObj.result, imgObj => {
30 |           this.imgArr.push(imgObj)
31 |         })
32 |       }
33 |     },
34 |     picReduce (picObj, callback) {
35 |       const img = new Image()
36 |       img.src = picObj
37 |       img.onload = () => {
38 |         const w = img.width
39 |         const h = img.height
40 |         const scale = this.getScale(w, h)
41 |         const maxW = w / scale
42 |         const maxH = h / scale
43 |         const imgObj = {
44 |           url: img,
45 |           width: maxW,
46 |           height: maxH
47 |         }
48 |         callback(imgObj)
49 |       }
50 |     },
51 |     getScale (width, height) {
52 |       if (width >= height) {
53 |         if (height <= 120) {
54 |           return 1
55 |         } else {
56 |           return height / 120
57 |         }
58 |       } else if (height > width) {
59 |         if (width <= 120) {
60 |           return 1
61 |         } else return width / 120
62 |       }
63 |     }
64 |   },
65 |   components: { canvasDrag }
66 | }
67 | </script>
68 | 
69 | <style>
70 | *{
71 |   margin: 0;
72 |   padding: 0;
73 | }
74 | body{
75 |   height: 100%;
76 | }
77 | .upload {
78 |   position: relative;
79 |   width: 100%;
80 |   height: 35px;
81 |   display: flex;
82 |   justify-content: center;
83 |   align-items: center;
84 |   color: #fff;
85 |   font-weight: 800;
86 |   border-radius: 50px;
87 |   background-color: rgb(22,188,121);
88 | }
89 | .input-opacity {
90 |   position: absolute;
91 |   top: 0;
92 |   width: 100%;
93 |   height: 35px;
94 |   opacity: 0;
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Akakiiiiii/vue-canvas-drag/575b6b0d3dcc856c8dc7fec6fb7c479ce9be9003/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/canvas-drag.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <canvas id="myCanvas" class="canvas" style="border:1px solid #000000;" @touchstart.prevent="start($event)"
  3 | @touchmove.prevent="move($event)"> </canvas>
  4 | </template>
  5 | 
  6 | <script>
  7 | import CloseIcon from './image/close.png'
  8 | import ScaleIcon from './image/放大.png'
  9 | var close = new Image(); var scale = new Image()
 10 | close.src = CloseIcon
 11 | scale.src = ScaleIcon
 12 | 
 13 | class DragImg {
 14 |   constructor (img, canvas) {
 15 |     this.x = 30
 16 |     this.y = 30
 17 |     this.w = img.width
 18 |     this.h = img.height
 19 |     this.url = img.url
 20 |     this.ctx = canvas
 21 |     this.rotate = 0
 22 |     this.selected = true
 23 |   }
 24 | 
 25 |   paint () {
 26 |     this.ctx.save()
 27 |     this.centerX = this.x + this.w / 2
 28 |     this.centerY = this.y + this.h / 2
 29 |     // 旋转元素
 30 |     this.ctx.translate(this.centerX, this.centerY)
 31 |     this.ctx.rotate(this.rotate * Math.PI / 180)
 32 |     this.ctx.translate(-this.centerX, -this.centerY)
 33 |     // 渲染元素
 34 |     this.ctx.drawImage(this.url, this.x, this.y, this.w, this.h)
 35 |     // 如果是选中状态，绘制选择虚线框，和缩放图标、删除图标
 36 |     if (this.selected) {
 37 |       this.ctx.setLineDash([10, 10])
 38 |       this.ctx.lineWidth = 2
 39 |       this.ctx.strokeStyle = 'red'
 40 |       this.ctx.lineDashOffset = 10
 41 |       this.ctx.strokeRect(this.x, this.y, this.w, this.h)
 42 |       this.ctx.drawImage(close, this.x - 12, this.y - 12, 24, 24)
 43 |       this.ctx.drawImage(scale, this.x + this.w - 12, this.y + this.h - 12, 24, 24)
 44 |     }
 45 |     this.ctx.restore()
 46 |   }
 47 | 
 48 |   isInWhere (x, y) {
 49 |     // 变换区域左上角的坐标和区域的高度宽度
 50 |     const transformW = 24
 51 |     const transformH = 24
 52 |     let transformX = this.x + this.w
 53 |     let transformY = this.y + this.h
 54 |     const transformAngle = Math.atan2(transformY - this.centerY, transformX - this.centerX) / Math.PI * 180 + this.rotate
 55 |     const transformXY = this.getTransform(transformX, transformY, transformAngle)
 56 |     transformX = transformXY.x; transformY = transformXY.y
 57 |     // 删除区域左上角的坐标和区域的高度宽度
 58 |     const delW = 24
 59 |     const delH = 24
 60 |     let delX = this.x
 61 |     let delY = this.y
 62 |     const delAngle = Math.atan2(delY - this.centerY, delX - this.centerX) / Math.PI * 180 + this.rotate
 63 |     const delXY = this.getTransform(delX, delY, delAngle)
 64 |     delX = delXY.x; delY = delXY.y
 65 |     // 移动区域的坐标
 66 |     const moveX = this.x
 67 |     const moveY = this.y
 68 |     if (x - transformX >= 0 && y - transformY >= 0 && transformX + transformW - x >= 0 && transformY + transformH - y >= 0) {
 69 |       // 缩放区域
 70 |       return 'transform'
 71 |     } else if (x - delX >= 0 && y - delY >= 0 && delX + delW - x >= 0 && delY + delH - y >= 0) {
 72 |       // 删除区域
 73 |       return 'del'
 74 |     } else if (x - moveX >= 0 && y - moveY >= 0 && moveX + this.w - x >= 0 && moveY + this.h - y >= 0) {
 75 |       // 移动区域
 76 |       return 'move'
 77 |     }
 78 |     // 不在选择区域里面
 79 |     return false
 80 |   }
 81 | 
 82 |   getTransform (x, y, rotate) {
 83 |     // 将角度化为弧度
 84 |     var angle = Math.PI / 180 * rotate
 85 |     // 初始坐标与中点形成的直线长度不管怎么旋转都是不会变的，用勾股定理求出然后将其作为斜边
 86 |     var r = Math.sqrt(Math.pow(x - this.centerX, 2) + Math.pow(y - this.centerY, 2))
 87 |     // 斜边乘sin值等于即可求出y坐标
 88 |     var a = Math.sin(angle) * r
 89 |     // 斜边乘cos值等于即可求出x坐标
 90 |     var b = Math.cos(angle) * r
 91 |     // 目前的xy坐标是相对于图片中点为原点的坐标轴，而我们的主坐标轴是canvas的坐标轴，所以要加上中点的坐标值才是标准的canvas坐标
 92 |     return {
 93 |       x: this.centerX + b - 12,
 94 |       y: this.centerY + a - 12
 95 |     }
 96 |   }
 97 | }
 98 | export default {
 99 |   name: 'canvas-drag',
100 |   props: {
101 |     imgArr: {
102 |       type: Array,
103 |       default () {
104 |         return []
105 |       }
106 |     }
107 |   },
108 |   data () {
109 |     return {
110 |       ctx: null,
111 |       dragArr: [],
112 |       clickedkArr: [],
113 |       c: null,
114 |       lastImg: null,
115 |       initial: null,
116 |       startTouch: null
117 |     }
118 |   },
119 |   methods: {
120 |     draw () {
121 |       this.ctx.clearRect(0, 0, this.c.width, this.c.height)
122 |       this.dragArr.forEach((item) => {
123 |         item.paint()
124 |       })
125 |     },
126 |     start (e) {
127 |       // 初始化一个数组用于存放所有被点击到的图片对象
128 |       this.clickedkArr = []
129 |       const x = e.touches[0].clientX
130 |       const y = e.touches[0].clientY
131 |       this.dragArr.forEach((item, index) => {
132 |         const place = item.isInWhere(x, y)
133 |         item.place = place
134 |         item.index = index
135 |         // 先将所有的item的selected变为flase
136 |         item.selected = false
137 |         if (place) {
138 |           this.clickedkArr.push(item)
139 |         }
140 |       })
141 |       const length = this.clickedkArr.length
142 |       if (length) {
143 |         // 我们知道cavans绘制的图片的层级是越来越高的，因此我们取这个数组的最后一项，保证取到的图片实例是层级最高的
144 |         const lastImg = this.clickedkArr[length - 1]
145 |         // 如果是删除的话就移除
146 |         if (lastImg.place === 'del') {
147 |           this.dragArr.splice(lastImg.index, 1)
148 |           // 重新绘制
149 |           this.draw()
150 |           return
151 |         }
152 |         // 将该实例的被选值设为true，下次重新绘制将绘制边框
153 |         lastImg.selected = true
154 |         // 保存这个选中的实例
155 |         this.lastImg = lastImg
156 |         // 保存这个实例的初始值，以后会用上
157 |         this.initial = {
158 |           initialX: lastImg.x,
159 |           initialY: lastImg.y,
160 |           initialH: lastImg.h,
161 |           initialW: lastImg.w,
162 |           initialRotate: lastImg.rotate
163 |         }
164 |       }
165 |       // 重新绘制
166 |       this.draw()
167 |       // 保存点击的坐标，move时要用
168 |       this.startTouch = { startX: x, startY: y }
169 |     },
170 |     move (e) {
171 |       const x = e.touches[0].clientX
172 |       const y = e.touches[0].clientY
173 |       const { initialX, initialY } = this.initial
174 |       const { startX, startY } = this.startTouch
175 |       const lastImg = this.lastImg
176 |       if (this.clickedkArr.length) {
177 |         if (this.lastImg.place === 'move') {
178 |           // 算出移动后的xy坐标与点击时xy坐标的差（即平移量）与图片对象的初始坐标相加即可
179 |           lastImg.x = initialX + (x - startX)
180 |           lastImg.y = initialY + (y - startY)
181 |         }
182 |         if (this.lastImg.place === 'transform') {
183 |           const { centerX, centerY } = lastImg
184 |           // 旋转部分
185 |           const { initialRotate } = this.initial
186 |           const angleBefore = Math.atan2(startY - centerY, startX - centerX) / Math.PI * 180
187 |           const angleAfter = Math.atan2(y - centerY, x - centerX) / Math.PI * 180
188 |           // 旋转的角度
189 |           lastImg.rotate = initialRotate + angleAfter - angleBefore
190 |           // 缩放部分
191 |           const { initialH, initialW } = this.initial
192 |           // 用勾股定理算出距离
193 |           const lineA = Math.sqrt(Math.pow(centerX - startX, 2) + Math.pow(centerY - startY, 2))
194 |           const lineB = Math.sqrt(Math.pow(centerX - x, 2) + Math.pow(centerY - y, 2))
195 |           const w = initialW + (lineB - lineA)
196 |           // 由于是等比缩放，所以乘一个宽高比例。
197 |           const h = initialH + (lineB - lineA) * (initialH / initialW)
198 |           // 定义最小宽高
199 |           lastImg.w = w <= 5 ? 5 : w
200 |           lastImg.h = h <= 5 ? 5 : h
201 |           if (w > 5 && h > 5) {
202 |             // 放大 或 缩小
203 |             lastImg.x = initialX - (lineB - lineA) / 2
204 |             lastImg.y = initialY - (lineB - lineA) / 2
205 |           }
206 |         }
207 |         this.draw()
208 |       }
209 |     }
210 |   },
211 |   watch: {
212 |     imgArr (arr) {
213 |       if (arr.length) {
214 |         const newImg = arr.slice(-1)[0]
215 |         const item = new DragImg(newImg, this.ctx)
216 |         this.dragArr.push(item)
217 |         console.log(this.dragArr)
218 |         this.draw()
219 |       }
220 |     }
221 |   },
222 |   mounted () {
223 |     const c = document.getElementById('myCanvas')
224 |     this.c = c
225 |     const { width, height } = window.screen
226 |     c.width = width - 2
227 |     c.height = height * 0.75
228 |     this.ctx = c.getContext('2d')
229 |   }
230 | }
231 | </script>
232 | 
233 | <!-- Add "scoped" attribute to limit CSS to this component only -->
234 | <style scoped>
235 | </style>
236 | 


--------------------------------------------------------------------------------
/src/components/image/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Akakiiiiii/vue-canvas-drag/575b6b0d3dcc856c8dc7fec6fb7c479ce9be9003/src/components/image/close.png


--------------------------------------------------------------------------------
/src/components/image/放大.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Akakiiiiii/vue-canvas-drag/575b6b0d3dcc856c8dc7fec6fb7c479ce9be9003/src/components/image/放大.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | 
2 | module.exports = {
3 |   publicPath: './'
4 | }
5 | 


--------------------------------------------------------------------------------