--- highlight: a11y-dark theme: channing-cyan --- 书接上回，针对构造函数内部的绘制方法，基本上介绍完毕，本章最后介绍一下vue页面与canvas的数据传输方式以及管线信息修改的方式。主要还是两部分，vue界面以及js。 ### VUE界面及样式 ```js ``` 效果图如下： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42ea957de3364e23bc7499f15b090049~tplv-k3u1fbpfcp-watermark.image?) ### canvas事件 ```js const canvasDraw = { init(element) { canvas = document.getElementById(element) ctx = canvas.getContext('2d') const w = 1200, h = 800; canvas.width = w * devicePixelRatio; canvas.height = h * devicePixelRatio; canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; calculationFlow(); canvas.onmousedown = (e) => canvasMousedown(e); canvas.onmouseup = () => { canvas.onmousemove = null; window.onmousemove = null; canvas.style.cursor= "crosshair" } return canvas }, // 回传鼠标抬起事件 canvasMouseUp: () => { return allElementCollection[current_select_element_index] }, // 更改绘制类型 drawTypeChange(element) { equipment_select = element draw_element_type = element.drawType }, // 修改管线类型（冷热水） changePipelineType: (type) => { pipeline_water_type = type }, // 修改信息提交 canvasModifyInfo: (params, flag) => { const shape = allElementCollection[current_select_element_index] if (flag.includes('equipmentInfo')) { image.src = require(`../assets/images/${params.iconPath}`); let icon_width = Math.ceil(image.width / params.scale), icon_height = Math.ceil(image.height / params.scale); shape.endX = shape.startX + icon_width; shape.endY = shape.startY + icon_height; } if (flag.includes('textInfo')) { ctx.font = `normal normal normal ${params.fontSize + 'px' || '16px'} Microsoft YaHei`; const measureText = ctx.measureText(params.text); const textW = measureText.width, textH = measureText.actualBoundingBoxAscent + measureText.actualBoundingBoxDescent; shape.endX = shape.startX + textW; shape.endY = shape.startY - textH; } allElementCollection[current_select_element_index][flag] = params; ctx.clearRect(0, 0, canvas.width, canvas.height); draw(); }, // 显示设备可拖动的区域范围 showEquipmentIconArea: () => { equipment_area_show = !equipment_area_show; ctx.clearRect(0, 0, canvas.width, canvas.height); draw(); }, commit: () => { // todo // 提交事件 console.log(allElementCollection) }, //回显 echoData(data) { //下方为前后端正式对接所用数据格式回显处理 // let echoData = [] // data.map(item => { // let echoItem = new PipelineFactory() // for (let i in item) { // echoItem[i] = item[i] // } // echoData.push(echoItem) // // console.log(echoItem); // }) // allElementCollection = echoData }, // 清除所有 clearAll: () => { allElementCollection = [] ctx.clearRect(0, 0, canvas.width, canvas.height); } } ``` 好了，综合前面 4 节，这个功能就全部结束了，如果这个功能对您有所帮助的话，还恳请您点赞、评论、及收藏。谢谢！最后，附上源码地址： https://gitee.com/zhuzio/online-pipeline.git ；欢迎叨扰，请邮件：1483364913@qq.com；