1 /** 2 * 绘制不规则多边形 3 */ 4 5 import { Message } from 'element-ui' 6 7 export function draw_test(cav, list) { 8 // 画布初始化 9 let ctx = cav.getContext('2d') 10 ctx.strokeStyle = 'red' 11 ctx.lineWidth = 2 12 13 // 变量初始化 14 let isdraw = false // 是否在画图形 15 let endtip = false // 是否结束一个多边形的绘制 16 let coordinates = [] // 一个多边形信息 17 let point_in_area = false // 鼠标是否在区域内 18 let target_index = null // 目标索引 19 let is_select = false // 是否选中某个区域 20 let index_list = [] // 是否选中某个端点 21 let is_click = false // 是否按下鼠标 22 let click_point = {} // 按下鼠标的坐标 23 // 初始判断是否有框 24 draw_now_line(coordinates, ctx) // 把之前的点连线 25 draw_now_circle(coordinates, ctx) //画之前的点 26 if (list.length != 0) { 27 // 画所有的 28 draw_all_lines(list, ctx) 29 draw_all_circles(list, ctx) 30 fillarea(list, ctx) 31 } 32 33 // 鼠标按下 34 cav.onmousedown = e => { 35 if (e.which == 3) return 36 let x = e.offsetX 37 let y = e.offsetY 38 // 是否在端点 39 index_list = findClosestPointIndex(list, { x, y }) 40 if (index_list.length) { 41 console.log('在端点') 42 click_point = { x, y } 43 is_click = true 44 return 45 } 46 // 是否在区域内 47 if (point_in_area) { 48 ctx.clearRect(0, 0, 800, 600) 49 draw_all_lines(list, ctx) 50 draw_all_circles(list, ctx) 51 fillarea(list, ctx, target_index) 52 is_select = true 53 move_draw(list, ctx, cav, target_index, x, y) 54 return 55 } 56 is_select = false 57 if (endtip) { 58 if (list.length < 10) { 59 endtip = false //清空，重新画 60 } else { 61 Message.warning('最多可绘制20个闭合的凸多边形区域') 62 return 63 } 64 } 65 //获取鼠标按下的坐标，放入数组中 66 let insertFlag = true 67 coordinates.forEach((item, index) => { 68 if (item.x == x && item.y == y) { 69 insertFlag = false 70 } 71 }) 72 if (insertFlag) { 73 coordinates.push({ x: x, y: y }) 74 // 判断相交 75 let lineList = [] 76 coordinates.forEach((item, index) => { 77 if (index < coordinates.length - 1) { 78 lineList.push([item.x, item.y, coordinates[index + 1].x, coordinates[index + 1].y]) 79 } 80 }) 81 lineList.forEach((item, index) => { 82 if (index > 0 && index < lineList.length - 1) { 83 let flag = judgeIntersect( 84 lineList[lineList.length - 1][0], 85 lineList[lineList.length - 1][1], 86 lineList[lineList.length - 1][2], 87 lineList[lineList.length - 1][3], 88 lineList[index - 1][0], 89 lineList[index - 1][1], 90 lineList[index - 1][2], 91 lineList[index - 1][3] 92 ) 93 if (flag) { 94 coordinates.pop() 95 } 96 } 97 }) 98 } 99 draw_now_circle(coordinates, ctx) 100 fillarea(list, ctx) 101 isdraw = true //正在画多边形 102 } 103 104 // 鼠标抬起 105 cav.onmouseup = e => { 106 console.log(e) 107 is_click = false 108 click_point = {} 109 index_list = [] 110 console.log(point_in_area) 111 if (point_in_area) return 112 target_index = null 113 ctx.clearRect(0, 0, 800, 600) //清空画布 114 draw_now_line(coordinates, ctx) //把之前的点连线 115 draw_now_circle(coordinates, ctx) //画之前的点 116 if (list.length != 0) { 117 draw_all_lines(list, ctx) 118 draw_all_circles(list, ctx) 119 fillarea(list, ctx) 120 } 121 } 122 123 // 鼠标移动 124 cav.onmousemove = e => { 125 // 判断是否移动到某个区域内 126 let x = e.offsetX 127 let y = e.offsetY 128 // 判断是否在某个区域内 129 let point = { x, y } 130 if (list.length) { 131 for (let i = 0; i < list.length; i++) { 132 point_in_area = isPointInPolygon(list[i], point) 133 if (point_in_area) { 134 target_index = i 135 break 136 } 137 } 138 cav.style.cursor = point_in_area ? 'move' : 'crosshair' 139 } else { 140 point_in_area = false 141 ctx.clearRect(0, 0, 800, 600) //清空画布 142 cav.style.cursor = 'crosshair' 143 } 144 if (point_in_area) { 145 // console.log(point_in_area, target_index) 146 } else { 147 is_select = false 148 target_index = null 149 ctx.clearRect(0, 0, 800, 600) 150 draw_all_lines(list, ctx) 151 draw_all_circles(list, ctx) 152 fillarea(list, ctx) 153 } 154 // 编辑端点判断是否在端点时点击并移动 155 if (list.length) { 156 // list_index 局部变量 157 let list_index = findClosestPointIndex(list, point) 158 if (list_index.length) changeDraw(list, cav, ctx, list_index) 159 // index_list 全局变量 160 if (index_list.length) { 161 let target_data = { 162 x: click_point.x + (x - click_point.x), 163 y: click_point.y + (y - click_point.y), 164 } 165 list[index_list[0]].splice(index_list[1], 1, target_data) 166 return 167 } 168 } 169 index_list = [] 170 is_click = false 171 click_point = {} 172 //没开始画或者结束画之后不进行操作 173 if (coordinates.length == 0 || !isdraw || endtip) { 174 return 175 } 176 //获取上一个点 177 let last_x = coordinates[coordinates.length - 1].x 178 let last_y = coordinates[coordinates.length - 1].y 179 ctx.clearRect(0, 0, 800, 600) //清空画布 180 draw_now_line(coordinates, ctx) //把之前的点连线 181 draw_now_circle(coordinates, ctx) //画之前的点 182 if (list.length != 0) { 183 draw_all_lines(list, ctx) 184 draw_all_circles(list, ctx) 185 fillarea(list, ctx) 186 } 187 //获取鼠标移动时的点，画线，实现线段跟踪效果。 188 ctx.beginPath() 189 ctx.moveTo(last_x, last_y) 190 ctx.lineTo(x, y) //追踪鼠标 191 ctx.stroke() //绘制已定义的路径 追踪鼠标 192 ctx.closePath() 193 } 194 195 // 鼠标双击 196 cav.ondblclick = e => { 197 if (point_in_area) return 198 if (coordinates.length <= 2) return Message.warning('至少需要三个点，请继续绘制') 199 //双击画布，在最后一个点的时候双击，自动连线第一个点，同时宣告画结束 200 let x0 = coordinates[0].x 201 let y0 = coordinates[0].y 202 let x1 = coordinates[coordinates.length - 1].x 203 let y1 = coordinates[coordinates.length - 1].y 204 ctx.beginPath() 205 ctx.moveTo(x0, y0) 206 ctx.lineTo(x1, y1) 207 ctx.stroke() 208 ctx.closePath() 209 isdraw = false 210 endtip = true 211 list.push(coordinates) 212 ctx.fillStyle = 'transparent' 213 let bx = coordinates[0].x 214 let by = coordinates[0].y 215 ctx.beginPath() 216 ctx.moveTo(bx, by) 217 for (let k = 1; k < coordinates.length; k++) { 218 let x = coordinates[k].x 219 let y = coordinates[k].y 220 ctx.lineTo(x, y) 221 } 222 ctx.fill() 223 ctx.closePath() 224 coordinates = [] 225 } 226 227 // 鼠标右键 228 cav.oncontextmenu = e => { 229 e.preventDefault() 230 coordinates = [] 231 isdraw = false 232 endtip = true 233 clear_now_line(list, ctx) 234 } 235 236 // 键盘事件(删除区域) 237 cav.onkeydown = k => { 238 let key = k.keyCode || k.which 239 if ([8, 46].includes(key)) { 240 if (!is_select) return Message.warning('请先点击某个区域为选中状态，再删除') 241 list.splice(target_index, 1) 242 ctx.clearRect(0, 0, 800, 600) 243 if (list.length != 0) { 244 draw_all_lines(list, ctx) 245 draw_all_circles(list, ctx) 246 fillarea(list, ctx) 247 } else { 248 ctx.clearRect(0, 0, 800, 600) 249 } 250 } 251 } 252 } 253 254 /* 移动矩形 */ 255 function move_draw(list, ctx, cav, index, sX, sY) { 256 let mark = list[index] 257 let handle_move = em => { 258 let target_data = [] 259 mark.forEach(item => { 260 target_data.push({ 261 x: item.x + (em.offsetX - sX), 262 y: item.y + (em.offsetY - sY), 263 }) 264 }) 265 ctx.clearRect(0, 0, 800, 600) 266 list.splice(index, 1, target_data) 267 draw_all_lines(list, ctx) 268 draw_all_circles(list, ctx) 269 fillarea(list, ctx, index) 270 } 271 let handle_up = e => { 272 cav.removeEventListener('mousemove', handle_move) 273 } 274 // 无脑多移除几次，不然会出bug 275 cav.removeEventListener('mousemove', handle_move) // 先移除监听 276 cav.removeEventListener('mousemove', handle_move) // 先移除监听 277 cav.removeEventListener('mouseup', handle_up) // 先移除监听 278 cav.removeEventListener('mouseup', handle_up) // 先移除监听 279 cav.removeEventListener('mousemove', handle_move) // 先移除监听 280 cav.removeEventListener('mousemove', handle_move) // 先移除监听 281 cav.removeEventListener('mouseup', handle_up) // 先移除监听 282 cav.removeEventListener('mouseup', handle_up) // 先移除监听 283 cav.addEventListener('mousemove', handle_move) // 再重新监听，解决点击多次移除不干净的bug 284 cav.addEventListener('mouseup', handle_up) // 再重新监听，解决点击多次移除不干净的bug 285 } 286 287 /* 编辑多边形端点 */ 288 function changeDraw(list, cav, ctx, index_list) { 289 cav.style.cursor = 'pointer' 290 } 291 292 // 判断鼠标是否在端点 293 function findClosestPointIndex(list, points, type) { 294 let closestIndex = [] 295 let closestDistance = Infinity 296 for (let i = 0; i < list.length; i++) { 297 for (let j = 0; j < list[i].length; j++) { 298 let point = list[i][j] 299 let diffX = Math.abs(points.x - point.x) 300 let diffY = Math.abs(points.y - point.y) 301 let distance = Math.sqrt(diffX * diffX + diffY * diffY) 302 if (distance <= 2 && distance < closestDistance) { 303 closestIndex = [i, j] 304 closestDistance = distance 305 } 306 } 307 } 308 if (type == 'is') return closestIndex.length 309 return closestIndex 310 } 311 312 // 清除当前未画完成的区域 313 function clear_now_line(list, ctx) { 314 ctx.clearRect(0, 0, 800, 600) 315 if (list.length != 0) { 316 draw_all_lines(list, ctx) 317 draw_all_circles(list, ctx) 318 fillarea(list, ctx) 319 } 320 } 321 322 // 绘制选中的,颜色填充 323 function fillarea(list, ctx, index) { 324 for (var i = 0; i < list.length; i++) { 325 var cors = list[i] 326 var x0 = cors[0].x 327 var y0 = cors[0].y 328 ctx.beginPath() 329 ctx.fillStyle = i == index ? 'rgba(255,0,0,0.1)' : 'transparent' 330 ctx.moveTo(x0, y0) 331 for (var j = 1; j < cors.length; j++) { 332 var x = cors[j].x 333 var y = cors[j].y 334 ctx.lineTo(x, y) 335 } 336 ctx.fill() 337 ctx.closePath() 338 } 339 } 340 341 // 判断坐标点是否在区域内的函数 342 function isPointInPolygon(list, point) { 343 let isInside = false 344 // 射线与多边形边线的交点数量 345 let intersections = 0 346 for (let i = 0; i < list.length; i++) { 347 let coordinate1 = list[i] 348 let coordinate2 = list[(i + 1) % list.length] 349 // 判断射线与边线是否相交 350 if ( 351 coordinate1.y > point.y !== coordinate2.y > point.y && 352 point.x < 353 ((coordinate2.x - coordinate1.x) * (point.y - coordinate1.y)) / 354 (coordinate2.y - coordinate1.y) + 355 coordinate1.x 356 ) { 357 intersections++ 358 } 359 } 360 // 判断点是否在多边形内 361 if (intersections % 2 !== 0) { 362 isInside = true 363 } 364 return isInside 365 } 366 367 // 把当前绘制的多边形之前的坐标线段绘制出来 368 function draw_now_line(coordinates, ctx) { 369 for (let i = 0; i < coordinates.length - 1; i++) { 370 ctx.beginPath() 371 let x0 = coordinates[i].x 372 let y0 = coordinates[i].y 373 let x1 = coordinates[i + 1].x 374 let y1 = coordinates[i + 1].y 375 ctx.moveTo(x0, y0) 376 ctx.lineTo(x1, y1) 377 ctx.stroke() 378 ctx.closePath() 379 } 380 } 381 382 // 把当前绘制的多边形之前的端点画圆 383 function draw_now_circle(coordinates, ctx) { 384 ctx.fillStyle = 'red' 385 for (let i = 0; i < coordinates.length; i++) { 386 let x = coordinates[i].x 387 let y = coordinates[i].y 388 ctx.beginPath() //起始一条路径，或重置当前路径 389 ctx.moveTo(x, y) //把路径移动到画布中的指定点（x,y）开始坐标 390 ctx.arc(x, y, 5, 0, Math.PI * 2) //点 391 ctx.fill() //填充点 392 ctx.closePath() //创建从当前点回到起始点的路径 393 } 394 } 395 396 // 画出所有多边形 397 function draw_all_lines(list, ctx) { 398 for (let i = 0; i < list.length; i++) { 399 let cors = list[i] 400 //前后坐标连线 401 for (let j = 0; j < cors.length - 1; j++) { 402 ctx.beginPath() 403 let x0 = cors[j].x 404 let y0 = cors[j].y 405 let x1 = cors[j + 1].x 406 let y1 = cors[j + 1].y 407 ctx.moveTo(x0, y0) 408 ctx.lineTo(x1, y1) 409 ctx.stroke() 410 ctx.closePath() 411 } 412 //最后一个与第一个连线 413 let begin_x = cors[0].x 414 let begin_y = cors[0].y 415 let end_x = cors[cors.length - 1].x 416 let end_y = cors[cors.length - 1].y 417 ctx.fillStyle = 'transparent' 418 ctx.beginPath() 419 ctx.moveTo(begin_x, begin_y) 420 ctx.lineTo(end_x, end_y) 421 ctx.stroke() 422 ctx.closePath() 423 } 424 } 425 426 // 画出所有多边形的端点 427 function draw_all_circles(list, ctx, cav) { 428 ctx.fillStyle = 'red' 429 for (let i = 0; i < list.length; i++) { 430 let cors = list[i] 431 for (let j = 0; j < cors.length; j++) { 432 let x = cors[j].x 433 let y = cors[j].y 434 ctx.beginPath() 435 ctx.moveTo(x, y) 436 ctx.arc(x, y, 4, 0, Math.PI * 2) 437 ctx.fill() 438 ctx.closePath() 439 } 440 } 441 } 442 443 // 判断直线是否相交 444 function judgeIntersect(x1, y1, x2, y2, x3, y3, x4, y4) { 445 if ( 446 !( 447 Math.min(x1, x2) <= Math.max(x3, x4) && 448 Math.min(y3, y4) <= Math.max(y1, y2) && 449 Math.min(x3, x4) <= Math.max(x1, x2) && 450 Math.min(y1, y2) <= Math.max(y3, y4) 451 ) 452 ) 453 return false 454 let u, v, w, z 455 u = (x3 - x1) * (y2 - y1) - (x2 - x1) * (y3 - y1) 456 v = (x4 - x1) * (y2 - y1) - (x2 - x1) * (y4 - y1) 457 w = (x1 - x3) * (y4 - y3) - (x4 - x3) * (y1 - y3) 458 z = (x2 - x3) * (y4 - y3) - (x4 - x3) * (y2 - y3) 459 return u * v <= 0.00000001 && w * z <= 0.00000001 460 }
2、vue界面中使用
1 <template> 2 <div> 3 <div class="content"> 4 <img src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg" /> 5 <canvas id="mycanvas" ref="mycanvas" tabindex="0"></canvas> 6 </div> 7 <button @click="get_data">获取</button> 8 <button @click="reload_dom">复原</button> 9 </div> 10 </template> 11 12 <script> 13 import { draw_test } from '../utils/test_draw_box' 14 export default { 15 inject: ['reload'], 16 data() { 17 return { 18 isdraw: false, //是否在画图形 19 coordinates: [], //一个多边形的坐标信息 20 cor_index: 0, //当前多边形的索引 21 endtip: false, //是否结束一个多边形的绘制 22 // mark_list: [], //所有多边形的信息 23 mark_list: [ 24 [ 25 { 26 x: 135, 27 y: 49, 28 }, 29 { 30 x: 509, 31 y: 50, 32 }, 33 { 34 x: 230, 35 y: 198, 36 }, 37 ], 38 [ 39 { 40 x: 536, 41 y: 176, 42 }, 43 { 44 x: 318, 45 y: 344, 46 }, 47 { 48 x: 615, 49 y: 365, 50 }, 51 ], 52 [ 53 { 54 x: 64, 55 y: 357, 56 }, 57 { 58 x: 54, 59 y: 527, 60 }, 61 { 62 x: 227, 63 y: 524, 64 }, 65 { 66 x: 217, 67 y: 362, 68 }, 69 ], 70 ], //所有多边形的信息 71 PointInArea: false, 72 index: null, 73 } 74 }, 75 mounted() { 76 this.initCanvas() 77 }, 78 methods: { 79 /* 画布初始化 */ 80 initCanvas() { 81 this.$nextTick(() => { 82 // 初始化canvas宽高 83 let cav = this.$refs.mycanvas 84 cav.width = '800' 85 cav.height = '600' 86 let ctx = cav.getContext('2d') 87 ctx.strokeStyle = 'red' 88 cav.style.cursor = 'crosshair' 89 // 计算使用变量 90 let list = this.mark_list // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存 91 // 若list长度不为0, 则显示已标记框 92 draw_test(cav, list) 93 }) 94 }, 95 get_data() { 96 console.log(this.mark_list) 97 }, 98 reload_dom() { 99 this.reload() 100 }, 101 }, 102 } 103 </script> 104 <style lang="scss" scoped> 105 .content { 106 position: relative; 107 // top: 50%; 108 // left: 50%; 109 // transform: translateX(-50%) translateX(-50%); 110 margin: 0 auto; 111 width: 800px; 112 height: 600px; 113 114 img { 115 position: absolute; 116 top: 0; 117 left: 0; 118 width: 100%; 119 height: 100%; 120 z-index: 9; 121 user-select: none; 122 } 123 124 canvas { 125 position: absolute; 126 top: 0; 127 left: 0; 128 z-index: 10; 129 } 130 } 131 // .main { 132 // height: 90vh; 133 // color: black; 134 // background: white; 135 // } 136 // #mycanvas { 137 // border: 1px solid red; 138 // position: fixed; 139 // left: 0; 140 // right: 0; 141 // margin: auto; 142 // } 143 </style>
界面效果：
参考地址1，画多边形：https://blog.csdn.net/m0_63853518/article/details/128301834
参考地址2，画矩形：https://blog.csdn.net/Sunshine_YXJ/article/details/108216971?spm=1001.2014.3001.5506