在进行svg绘制的过程中,经常需要在svg画布上绘制折线,而绘制折线的核心就是polyline标签,但如何用JS动态绘制鼠标点击拖拽绘制呢?
实现的效果:
实现的代码:
<svg id='svg'></svg>
class Svg{ constructor(){ this.svgNS = 'http://www.w3.org/2000/svg'; } createTag(tag,objAttr){ var oTag = document_createElement_x_xNS(this.svgNS,tag); for(var attr in objAttr){ oTag.setAttribute(attr,objAttr[attr]); } return oTag; } }
(function(){ var svg = document.getElementById_x_x('svg'); var xmln = 'http://www.w3.org/2000/svg'; var oPolyline = null; var x = 0,y = 0,posX = 0,posY = 0,pos = [],attrObj = {},circleObj = {}; var oSvg = new Svg(); attrObj['stroke-width'] = 2; attrObj['stroke'] = 'pink'; attrObj['fill'] = 'none'; circleObj = { fill : 'red', r : 6, stroke : 'none' } var lineObj = {}; var onoff = false; svg.onmousedown = function(ev) { //获取当前的位置 onoff = true; x = ev.offsetX; y = ev.offsetY; pos.push(x,y); attrObj['points'] = pos.join(); circleObj['cx'] = x; circleObj['cy'] = y; lineObj['x1'] = x; lineObj['y1'] = y; oPolyline = oSvg.createTag('polyline',attrObj); oCircle = oSvg.createTag('circle',circleObj); this.a(oCircle); this.a(oPolyline); } svg.onmousemove = function(ev) { if(onoff) { var lines = svg.getElementsByTagName('line'); for(var i=0;i<lines.length;i++) { svg.removeChild(lines[i]); } var x = ev.clientX - this.getBoundingClientRect().left; var y = ev.clientY - this.getBoundingClientRect().top; lineObj['x2'] = x; lineObj['y2'] = y; lineObj['stroke'] = 'red'; lineObj['stroke-width'] = '1'; oLine = oSvg.createTag('line',lineObj); this.a(oLine); } } svg.oncontextmenu = function() { var lines = svg.getElementsByTagName('line'); for(var i=0;i<lines.length;i++) { svg.removeChild(lines[i]); } onoff = false; return false; } })();