思路:
将坐标转换成svg面板内的坐标
鼠标按下获取坐标并生成圆标记->鼠标移动动态获取坐标并给折线,实现线随鼠标移动->设置右键点击事件取消绘图即取消之前两种事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:780px;
height:400px;
margin:0 auto;
}
</style>
</head>
<body>
<div style="border:solid 1px orange;" class='box'>
<svg id='svg' width='100%' height='100%'
xmlns="http://www.w3.org/2000/svg">
</svg>
</div>
<script>
window.onload=function(){
let svgNS="http://www.w3.org/2000/svg";
var div=document.querySelector('.box');
let svg=document.querySelector('#svg');
function createTag(tag,obj){
var oTag=document.createElementNS(svgNS,tag);
for(var attr in obj){
oTag.setAttribute(attr,obj[attr]);
}
return oTag;
}
var zx=createTag('polyline',{'stroke':'blue','fill':'none','stroke-width':'2'})
var point='';
var flag=0;
svg.onmousedown=function(e){
var zx=createTag('polyline',{'stroke':'blue','fill':'none','stroke-width':'2'})
var x1=e.clientX-div.offsetLeft;
var y1=e.clientY-div.offsetTop;
if(point=='')
{
point=x1+','+y1;
}else{
point=point+','+x1+','+y1;
}
zx.setAttribute('points',point);
var circle=createTag('circle',{'cx':x1,'cy':y1,'r':'10','fill':'none','stroke':'red'})
svg.appendChild(zx);
svg.appendChild(circle);
flag=1;
}
svg.onmousemove=function(e){
if(flag==1){
console.log(1);
var x2=e.clientX-div.offsetLeft;
var y2=e.clientY-div.offsetTop;
zx.setAttribute('points',point+','+x2+","+y2);
svg.appendChild(zx);
}
}
svg.oncontextmenu=function(){
svg.onmousemove=null;
svg.onmousedown=null;
}
}
</script>
</body>
</html>
