CANVAS在自定义地图（背景）打点，并支持拖拽

大家好，我是讯享网，很高兴认识大家。

<html>
   <canvas id="can2" style="border:1px solid red;"></canvas>
   <img src="./1.jpg" alt="" id="bgi" style="width:100px;height:100px;">
   <script type="text/javascript">
       class newC{
           constructor(ops){
               / ops
               * canDOM canvasDOM对象
               * pointW 插入标记宽
               * pointY 插入标记高
               * bgiDOM 背景图片DOM对象
               * */
               this.can = ops.canDOM

               this.points = new Array()
               this.bgiDOM = ops.bgiDOM
               this.can.width = this.bgiDOM.naturalWidth
               this.can.height = this.bgiDOM.naturalHeight
               this.pointW = ops.pointW
               this.pointY = ops.pointY
               this.ctx = this.can.getContext("2d")
               this.addClickEvent()
               this.isMove = false; //鼠标按下point移动时，为true，
               this.moveIndex = 0
           }
           //画布点击事件添加
           addClickEvent(){
               let t = this;
               this.can.onmousedown = function(ev){

                   let e = ev||event;
                   let x = e.clientX;
                   let y = e.clientY;
                   x = x - t.pointW /2
                   y = y - t.pointY / 2
                   let index = t.isClickPoint({x,y})
                   if(index > -1) {
                       //移动逻辑
                       t.isMove = true;
                       t.moveIndex = index;
                   } else {
                       //添加逻辑
                       let txt=prompt("请输入巡查点名称：","")
                       txt ? t.points.push({topX: x , topY: y, title: txt }) : '' ;
                   }
                   t.ctx.clearRect(0,0,t.can.width,t.can.height);
                   t.draw()
               }
               this.can.onmousemove = function (ev){
                   if(!t.isMove) return;
                   let e = ev||event;
                   let x = e.clientX;
                   let y = e.clientY;
                   x = x - t.pointW /2
                   y = y - t.pointY / 2
                   t.points[t.moveIndex].topX = x
                   t.points[t.moveIndex].topY = y
                   t.ctx.clearRect(0,0,t.can.width,t.can.height);
                   t.draw()
               }
               this.can.onmouseup = function(){
                   t.isMove = false;
               }
           }
           //检测是否点在point上，如果是，则走移动逻辑，否则走创建point逻辑
           isClickPoint(ev){
           return this.points.findIndex(item => ev.x > item.topX && ev.y > item.topY && ev.x < item.topX + this.pointW && ev.y < item.topY + this.pointY)
           }
           //重绘背景
           drawbgi(){
               let t = this;
               this.ctx.drawImage(this.bgiDOM,0,0,this.can.width,this.can.height,0,0,t.can.width,t.can.height)
           }
           //重绘tip
           drawPoint(point){
               this.ctx.fillStyle = "red";
              this.ctx.fillRect(point.topX,point.topY,this.pointW, this.pointY);
           }
           //重绘小旗及文字
           drawPoint2(point){
               let t = this;
               let x = point.topX
               let y = point.topY
               let w = t.pointW
               let h = t.pointY
               let ctx = t.ctx
               ctx.font="italic small-caps bold 12px arial";
               ctx.lineCap="round";
               ctx.strokeStyle="red";
               ctx.fillStyle="red";
               ctx.lineWidth=2;
               ctx.fillText(point.title,point.topX, point.topY-5);
               ctx.beginPath()
               ctx.moveTo(x, y );
               ctx.lineTo(x + w, y);
               ctx.lineTo(x + w,y + h);
               ctx.lineTo(x,y+h)
               ctx.moveTo(x,y);
               ctx.lineTo(x,y+2*h)
               ctx.stroke();
           }

           //重绘
           draw(){
               this.drawbgi()
               this.points.forEach(item => {
                   this.drawPoint2(item)
               })
           }
       }
       document.getElementById("bgi").onload = function(){

           let z = new newC({
                       canDOM:document.getElementById("can2"),
                       pointW:30,
                       pointY:20,
                       bgiDOM:document.getElementById("bgi")
           })
           z.draw()
       }

</script>

</html>

CANVAS在自定义地图（背景）打点，并支持拖拽

相关推荐