在Canvas上进行标注和自适应分辨率获取标注的绝对精准坐标并完成标注的增删改查

1.在canvas上进行标注

连接后台，需要有添加标注的后端接口

1、首先先获取鼠标的x,y

   // 获取X 和 Y
        windowToCanvas(canvas,x,y){
            var bbox = canvas.getBoundingClientRect();
            return {
                x : x - bbox.left*(canvas.width/bbox.width),
                y : y - bbox.top*(canvas.height/bbox.height)
            };
        },

2、鼠标移入canvas后，鼠标变成标注icon

 // 获取坐标
        getPostion(){
            let vm = this;
            var ww = window.innerWidth,wh = window.innerHeight;
            var canvas = document.getElementsByTagName('canvas')[0];
            canvas.style.cursor="url('/static/image/mapLabel/cur_video.ico'),auto";//修改鼠标样式
            var ctx = canvas.getContext('2d');
            var touchMove = 'mousemove';
            canvas.addEventListener(touchMove,function(){
            var nowpos = vm.windowToCanvas(canvas,event.clientX,event.clientY);
            var x=nowpos.x,y=nowpos.y;
            if(x < 0 || y < 0){
                x = 0;
                y = 0;
            }
            ctx.save();
            ctx.fontStyle='#fff';
            ctx.font='30px Helvetica';
            // 设置地图上的标识x和y
            vm.postion.X = parseInt(x*vm.width_milde);
            vm.postion.Y = parseInt(y*vm.height_milde);
            ctx.lineWidth=2;
            ctx.strokeStyle="#000";
            // 辅助线
            //draw line 1
            // ctx.beginPath();
            // ctx.moveTo(0,y);
            // ctx.lineTo(ww,y);
            //draw line 2
            // ctx.moveTo(x,0);
            // ctx.lineTo(x,wh);
            // ctx.closePath();
            // ctx.stroke();
            // ctx.restore();
            },false);
        },

3、点击canvas后，进行标注

 //点击标注
        checkPointer(){
            if(this.chooseFlag1=="tap_yes"){ 
                console.log(this.postion.X,this.postion.Y)
                var oDiv=document.createElement('div');
                oDiv.id = "drawTask";
                oDiv.style.left=this.postion.X+'px';  // 指定创建的DIV在文档中距离左侧的位置
                oDiv.style.top=this.postion.Y+'px';  // 指定创建的DIV在文档中距离顶部的位置
                //oDiv.style.border='4px solid #FF0000'; // 设置边框
                oDiv.style.position='absolute'; // 为新创建的DIV指定绝对定位
                oDiv.style.backgroundImage="url('/static/image/mapLabel/pic_videp.svg')";
                oDiv.style.backgroundRepeat='no-repeat';
                oDiv.style.width='40px'; // 指定宽度
                oDiv.style.height='20px'; // 指定高度
                document.getElementById("main").appendChild(oDiv); 

                var oTip=document.createElement('div');
                oTip.id = "drawTip";
                oTip.textContent="X: " + this.postion.X +"  " + "Y: " + this.postion.Y;
                oTip.style.width='145px'; // 指定宽度
                oTip.style.height='28px'; // 指定高度
                oTip.style.fontSize='20px';
                oTip.style.fontFamily='PingFang SC';
                oTip.style.fontWeight='normal';
                oTip.style.lineHeight='28px';
                oTip.style.fontStretch='normal';
                oTip.style.color='#ffffff';
                oTip.style.backgroundColor='#0e1b27';
                oTip.style.letterSpacing='0px';
                oTip.style.border='1px solid #0E1B27'; // 设置边框
                oTip.style.borderRadius='12px'
                oTip.style.position='absolute'; // 为新创建的DIV指定绝对定位
                oTip.style.left=this.postion.X-25+'px';  // 指定创建的DIV在文档中距离左侧的位置
                oTip.style.top=this.postion.Y-35+'px';  // 指定创建的DIV在文档中距离顶部的位置
                document.getElementById("main").appendChild(oTip); 
                //鼠标放下生成标注后
                this.onEditLabelView(this.postion.X*this.width_milde,this.postion.Y*this.height_milde,this.code);
            }else{
                //点击无效
            }
        },

4、取消绘制

//点击取消后，取消绘制后的节点样式
        deletePointerCss(){
            let a = document.getElementById("drawTask");
            if(a!=null){
                 document.getElementById("drawTask").remove();
            }
            let b = document.getElementById("drawTip");
            if(b!=null){
                document.getElementById("drawTip").remove();
            }
        },

2.删除标注

1、渲染一个删除按钮在每个标注上

数据依旧从后台获取

  <div v-show="isDeleteFlag" v-for="item in delete_icon_list" class="base_delete"
        v-bind:style="{postion:'absolute',left:(item.x-(-20))+'px',top:(item.y-15)+'px'}"
        @click="onDeleteLabelView(item.id)"
        >
        </div>

提供数据

//重置删除icon位置
        initDeleteIcon(){
            //请求所有点位信息
            let datas = $.ajax({
            url:ip:port+'/Position',
            type:'GET', //GET
            async:false,    //或false,是否异步
            data:{
            },
            dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            success:function(data,textStatus,jqXHR){
                this.point_Data_List = data.data;
                return data.data;
            },
            })
            var pointList = datas.responseJSON.data || [];//点位列表
            //循环渲染点位红叉
                let vm = this;
                for(var i = 0;i<pointList.length;i++){
                        if(pointList[i].code=='vp'){
                            continue;
                        }else if(pointList[i].floor != this.doorSelect){ //如果不是该楼层
                            continue;
                        }else{
                            pointList[i].x = pointList[i].x / vm.width_milde;
                            pointList[i].y = pointList[i].y / vm.height_milde;
                            vm.delete_icon_list.push(pointList[i])
                        }
                }
        },

点击删除按钮后
弹出删除提示删除即可

3.屏幕自适应精准位置

使用vue的watch事件

data(){
	return{
     	 width_milde:0, //宽比例
         height_milde:0,//高比例
	}
}

 watch:{
        //宽改变
        map_width:function(a,v){
            this.width_milde = 1920/a
            //this.initMap();
            this.delete_icon_list = [];
            this.initDeleteIcon();
            console.log("当前宽比例",1920/a)
            this.initWindow();
        },
        map_height:function(a,v){
            this.height_milde = 1080/a
            //this.initMap();
            this.delete_icon_list = [];
            this.initDeleteIcon();
            console.log("当前高比例",1080/a)
            this.initWindow();
        }
    },

计算出宽高比例后重新初始化canvas

  initMap(){
          this.map_width = document.body.clientWidth;
          this.map_height = document.body.clientHeight;
		}
		  container: {
                    id: "main",
                    width: this.map_width,
                    height: this.map_height
                },

当在添加标注的时候，需要乘法运算获取最准确的坐标值

 this.onEditLabelView
 (this.postion.X*this.width_milde,
 this.postion.Y*this.height_milde,
 this.code);