教育类网站开发费用,做网站的基本步骤,宝塔 wordpress优化,网站如何被手机端收录图纸 图纸标记后的效果图 最近做的一个qms项目里面#xff0c;需要前端在图纸上实现标记及标记后的内容还要能够回显#xff0c;然后后端通过标记的点#xff0c;去读取标记图纸的内容#xff0c;如一些公式、数据之类的#xff0c;目前实现的功能有 在图纸上面进行矩形…图纸 图纸标记后的效果图 最近做的一个qms项目里面需要前端在图纸上实现标记及标记后的内容还要能够回显然后后端通过标记的点去读取标记图纸的内容如一些公式、数据之类的目前实现的功能有 在图纸上面进行矩形标记、已保存的标记回显、单个标记点清除、一键清除所有标记、保存标记图片 一开始听领导说小段啊咱们做的这个项目模块有个功能图纸标记的功能需要前端做下大概就是在图纸上面框住或者圈住一部分然后传给后端后端根据你传过去的数据去读取标记的内容实现一些其他的业务逻辑。。我一开始是懵逼的这是啥呀又搞骚操作唉打工人一切向钱看齐想办法吧正好前端同时之前做过类似的demo可以借鉴同时加上自己的一些琢磨功能是基本实现目前还没和后端对接。 说一下思路我研究了下目前在图片上面做一些操作的大多是通过canvas实现的canvas的默认背景是黑色的然后下载后的图片背景就是乌黑黑的一片加一些自己画的线然后就想着把图纸作为canvas的背景图片这样下载后的背景图片就是图纸挺好的哈哈剩下的具体代码实现的逻辑都在贴在下面的代码示例里面了
以下是操作视频 图纸标记组件视频 代码如下
templatedivdiva-button clickclearBtn stylemargin-right:15px;清除当前标记/a-buttona-button clickclearAllBtn stylemargin-right:15px;清除所有标记/a-buttona-button clicksaveBtn typeprimary stylemargin-right:15px;保存标记/a-buttona-button clicksaveImage typeprimary下载标记图片/a-button/divdiv stylemargin:10px 0a-form :modelformInfo refformRef namebasic :label-col{ span: 6 }:wrapper-col{ span: 18 }a-row :gutter20a-col :span8a-form-item label标记名称 namerectNamea-input v-model:valuerectName placeholder请输入标记名称 allowClear/a-input/a-form-item/a-col/a-row/a-form/divdiv idcanvasDivcanvas refcanvas contextmenu.preventcanvasRight mousedownstartMark clickcanvasClick mousemovedraw mouseupendMark/canvas/div/div
/templatescript
import cardPng from //assets/images/card.png;export default {data() {return {isMarking: false,//是否开始在标记的标识startX:0,//点击时初始位置x轴startY:0,//点击时初始位置y轴markedRectangles: [{x:162, y:253, width:46, height:76,name:过渡板},{x:70, y:253, width:47, height:70,name:电磁阀},{x:447, y:928, width:114, height:39,name:软管},], // 存储已标记矩形的数组rectObj:,//记录最后一次的矩形rectName:,//标记名称};},mounted() {//设置canvas背景this.loadCanvas();window.addEventListener(resize, this.loadCanvas);},beforeDestroy() {window.removeEventListener(resize, this.loadCanvas);},methods: {canvasRight(e){e.preventDefault();// 阻止默认的右键菜单},//下载标记并且保存的canvas图片saveImage(){this.drawBackground();//重绘canvas及回显保存的标记若是标记未保存则不会在下载的图片里面显示const img this.canvas.toDataURL(image/png);const link document.createElement(a);link.href img;link.download canvas.png;console.log(img,img)console.log(link,link)link.click();},canvasClick(event){// cavans点击事件监听console.log(event,event)const canvas this.$refs.canvas;const ctx canvas.getContext(2d);const rect canvas.getBoundingClientRect();const x event.clientX - rect.left;const y event.clientY - rect.top;// 遍历已标记的矩形检查点击位置若是在标记数组的矩形范围内则从数组中进行比对进行标记名称回显for (let i this.markedRectangles.length - 1; i 0; i--) {const markedRect this.markedRectangles[i];if (x markedRect.x x markedRect.x markedRect.width y markedRect.y y markedRect.y markedRect.height){this.rectObjmarkedRect;this.rectNamemarkedRect.name;}}},//绘制canvas、添加背景图片、把标记数组里面的点回显drawBackground(){this.canvas.width this.image.width;this.canvas.height this.image.height;this.ctx.drawImage(this.image, 0, 0);this.ctx.strokeStyle #99eb1e;//改变画线的颜色和宽度this.ctx.lineWidth 2;this.markedRectangles.forEach((item,index){item.resetidnew Date().getTime()index;})console.log(this.markedRectangles,markedRectangles)for(let i0;ithis.markedRectangles.length;i){this.ctx.strokeRect(this.markedRectangles[i].x, this.markedRectangles[i].y, this.markedRectangles[i].width, this.markedRectangles[i].height)//起点/终点/宽度/高度}},//赋值初始值x轴的点、y轴的点startMark(event) {this.isMarking true;//开始标记记录此时开始标记的初始点const rect this.canvas.getBoundingClientRect();this.startX event.offsetX;this.startY event.offsetY;},//标记中draw(event) {if (this.isMarking) {//获取最后标记的位置拿最后标记的位置的x轴值、y轴值与初始位置的x轴值与y轴值进行计算获取标记矩形的宽高const rect this.canvas.getBoundingClientRect();const x event.offsetX - this.startX;const y event.offsetY - this.startY;//canvas绘制时会把背景图清掉需要再次调用下添加背景图的方法this.drawBackground();this.ctx.strokeRect(this.startX, this.startY, x, y);this.rectObj{x:this.startX, y:this.startY,width: x,height:y};//把最后的标记矩形的位置及宽高记录若是保存此时的标记会用到}},//标记结束endMark() {this.isMarking false;//重置标记标识为false},// 初始化canvasloadCanvas(){this.canvas this.$refs.canvas;this.ctx this.canvas.getContext(2d);this.image new Image();this.image.src cardPng; // 替换为你的图片路径let canvasDivdocument.getElementById(canvasDiv);this.image.onload () {this.drawBackground();};},saveBtn(){// 保存时若是此时的矩形存在则添加到标记数组里面console.log(this.rectObj,rectObj)if(this.rectObj!){let thatthis;//防止同一个标记被保存多次for(let i0;ithis.markedRectangles.length;i){if(this.markedRectangles[i].x!that.rectObj.xthis.markedRectangles[i].y!that.rectObj.ythis.markedRectangles[i].width!that.rectObj.widththis.markedRectangles[i].height!that.rectObj.height){if(this.rectName){that.rectObj.namethis.rectName;that.markedRectangles.push(that.rectObj)that.$message.success(该标记已保存)that.rectObj;return false}else{this.$message.warning(请输入标记名称)}}}}else{this.$message.warning(暂无标记可以保存)return false}console.log(this.markedRectangles,markedRectangles)},//清除标记clearBtn(){//重绘canvas// 若是有resetid则是已保存过的若是没有resetid则是后来新增的if(this.rectObj!){if(this.rectObj.resetid){// this.rectObj;this.$confirm(确定删除?, 提示, {okText: 确定,cancelText: 取消,type: warning}).then(() {for(let i0;ithis.markedRectangles.length;i){if(this.markedRectangles[i].xthis.rectObj.xthis.markedRectangles[i].ythis.rectObj.ythis.markedRectangles[i].widththis.rectObj.widththis.markedRectangles[i].heightthis.rectObj.height){this.rectName;this.rectObj;this.markedRectangles.splice(i, 1); // 从数组中移除this.$message.success(标记已清除)this.drawBackground();return false}}}).catch(() {this.$message({type: warning,message: 已取消删除}); });}else{this.drawBackground();this.rectObj;this.$message.warning(标记已清除)return false}}else{this.$message.warning(暂无标记可以清除)}},//一键清除所有标记clearAllBtn(){//把标记数组清空同时重绘canvasif(this.markedRectangles.length0){this.markedRectangles[];this.drawBackground();}else{this.$message.warning(暂无标记可以清除)return false}},}
};
/script
style scoped
#canvasDiv{width:800px;height: auto;
}
/style
