svg鼠标绘自定义折线

174 阅读 0 评论 115 点赞

我是靠谱客的博主舒服百褶裙，这篇文章主要介绍svg鼠标绘自定义折线，现在分享给大家，希望可以做个参考。

在进行svg绘制的过程中，经常需要在svg画布上绘制折线，而绘制折线的核心就是polyline标签，但如何用JS动态绘制鼠标点击拖拽绘制呢？

实现的效果：

实现的代码：

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

})();