<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>