
    function drawingBoard() {
        this.deploy = {
            drawPanel: "drawPanel",
            canvasId: "canvas_" + Math.random().toString(36).substring(2),
            imgId: "img_" + Math.random().toString(36).substring(2),
            random: Math.random().toString(36).substring(2),
            width: 400,
            height: 400,
			      step:20,//手动步进长度
            imgBackSrc: null,
            scale:1, //缩放等级
            penColor: "#000", //
            roundr:4.5, //圆点的显示半径
            lineWidth: 3, //路径宽度
            assist: false, //是否开启辅助线
            assistColor: "#000", //辅助线颜色
            startIcon: 'data:image/png;base64, ',
            endIcon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADBElEQVRYR+2WS0wTQRjH/7Mt0IcprRcwhAqYeDASaqyB+Eq5ELdeqhcTTzVE0WiiXDxpmTaePHFQ8RECVy/KiSVcaHwFYo0YjDEmQq0hgYuUEtrSx47ZpS0tbJ/WhAOTNJvufN9/fvufbx4E5TaXEARBvZzGUskkLcKCcNtN5UhmUktOokILAOkHiHDKTw6jqXw/KO8vWQtAYQDX+CAI6cgryFIgBAUGZbNw2/vzaeQHoIKtQVc7ft1q1pbzRdtjn/oCkeVwzA7Ke5V0CgIcbzSM+fpObs53hc367MPqp6WQYw+gdAfopGXT7aQxewqSDFiJxiA9VQQwaWrlpxxZoC8zBVAF5WDaM5s9mztrwDXuBYgXHLzZAOvxJH6uhjO5h+p10Neo5P+F+jIAImwALPDwDmUAaclxWgoxMvb/AJgNnNYBMXobHt4tgWw5MCAwEHRDZFQJIJoQ8SO4noE/bNRDo+YUHcjuy3VAAiAUDFNw8/LYJQNUuApROoBLGAOHOxDZqJIDVQRwQsRguhZKLsKqAXjsUjFm2k4AKmQClHbCwWk/+ie+K/KMONrhtDTl9G0tw9TrbVtyRVux1/9HEcDWsn/H+72t+J8cOKCvE/qszZpKC1DKG/oYCC+HY+dLPwvSo9Epo1YVf6Kv4Y5kA4gia6yr4RrMxtxrQiAYwUZcXOY4spQdvx4Xv0Xu91zO9xHlX8lcArU2GQaGL7bnaPa+moNvMeSGh6flOLaLAKTLZpIdLEavVnEPLrU3nr57ti0n9OGbebycW3qXSIr3imlARX6lL6+bDlDBCYYRjZqLtZm0W2euglKrSae72WWubTLk1uZiKIrH04HYwkq4YP78SkQXTYi1ILgCyo/KANyAsHbthHnfjc7movDVCBia+Y3nvsCaSHkDgWQ9w8Lbq50w1KmroV9UI7SRwJkXM9JZ3CoB2KTz+cutU0UTqxnQ8ei9BNC9B7AbHJi0gCU/D184Ws0pLqrV+/orQFTH5GWo8UxMR5Oss2hWFQM0KjITdZ3r+gsSrbrNsF/RcAAAAABJRU5ErkJggg==',
		}
        this.can = {
            canvas: null,
            context: null,
            imgae: null,
            pointList: [{x:2, y:60}],
            distance:0,
            errorPoint: new Object
        };
        this.init = function(options, complete) {
            var vm = this;
            if (this.notEmptyObj(options)) {
                vm.deploy = Object.assign(vm.deploy, options);
                vm.deploy.roundr = vm.deploy.lineWidth + (vm.deploy.lineWidth / 3);
                vm.initElement();
                vm.eventBind();
                complete(vm);
                vm.drawingAll();
                vm.startInterval();
            } else {
                console.error('[创建失败]', new Date().toLocaleString())
            }

        };
        //初始化Dom
        this.initElement = function() {
            var vm = this,
                canvasId = this.deploy.drawPanel,
                backgroundImg = this.deploy.backgroundImg,
                random = this.deploy.random,
                scale = this.deploy.scale;
            var beforeHtml = '<canvas style="transform-origin:0 0;transform: scale('+scale+');" id="' + this.deploy.canvasId + '"></canvas>' +
                '<img style="display:none;transform-origin:0 0;transform: scale('+scale+');" id="startIcon_' + random + '" src="' + this.deploy.startIcon + '" />' +
                '<img style="display:none;transform-origin:0 0;transform: scale('+scale+');" id="endIcon_' + random + '" src="' + this.deploy.endIcon + '" />' +
                '<div style="display:none;transform-origin:0 0;transform: scale('+scale+');" id="assist_x_' + random + '"></div>' +
                '<div style="display:none;transform-origin:0 0;transform: scale('+scale+');" id="assist_y_' + random + '"></div>';
            document.getElementById(canvasId).insertAdjacentHTML('beforeEnd', beforeHtml);
            var nodeArr = [vm.deploy.drawPanel, vm.deploy.canvasId, vm.deploy.imgId];
            nodeArr.forEach(function(id) {
                if (id) {
                    var node = document.getElementById(id);
                    if (node != null) {
                        node.setAttribute('width', vm.deploy.width);
                        node.setAttribute('height', vm.deploy.height);
                        node.style.position = "absolute";
                        node.style.width = vm.deploy.width + 'px';
                        node.style.height = vm.deploy.height + 'px';
                    }
                }
            });
            document.getElementById(vm.deploy.drawPanel).style.zIndex = 0;
            document.getElementById(vm.deploy.canvasId).style.zIndex = 2;
            document.getElementById(vm.deploy.canvasId).style.cursor = "crosshair";

            this.can.canvas = document.getElementById(vm.deploy.canvasId);
            var width = this.can.canvas.offsetWidth;
            var height = this.can.canvas.offsetHeight;
            this.can.context = this.can.canvas.getContext("2d");
            this.can.canvas.width = width;
            this.can.canvas.height = height;


            var scrollView = document.querySelector(".scrollView");
            var map = document.querySelector(".map");
            if (map) {
                map.style.maxWidth = vm.deploy.width + 'px';
            }
            if (scrollView) {
                scrollView.style.maxWidth = vm.deploy.width + 'px';
                scrollView.scrollTop = (this.can.canvas.offsetHeight - scrollView.offsetHeight) / 2;
                scrollView.scrollLeft = (this.can.canvas.offsetWidth - scrollView.offsetWidth) / 2;
                scrollView.style.opacity = 1;
            }

        };
        //初始化路径
        this.iniData = function(array, complete) {
            if (this.notEmptyObj(array)) {
                try {
                    this.ReDo();
                    this.can.pointList = array;
                    this.drawingAll();
                    complete(this);
                } catch (error) {
                    console.error('[iniData失败]' + error, new Date().toLocaleString())
                }
            }
        };
        //绑定事件
        this.eventBind = function() {
            var vm = this;
            this.can.canvas.addEventListener('mousemove', function(e) {
                var assistX = document.getElementById('assist_x_' + vm.deploy.random),
                    assistY = document.getElementById('assist_y_' + vm.deploy.random),
                    pointList = vm.can.pointList,
                    assist = vm.deploy.assist, //是否开启辅助线
                    lineWidth = vm.deploy.lineWidth;
                if (pointList.length > 0 && assist) {
                    var X = pointList[pointList.length - 1].x;
                    var Y = pointList[pointList.length - 1].y;
                    if ((X - e.offsetX) <= (lineWidth / 2) && (X - e.offsetX) >= -(lineWidth / 2)) {
                        assistX.style.opacity = '0.4';
                    } else {
                        assistX.style.opacity = '0.2';
                    };
                    if ((Y - e.offsetY) <= (lineWidth / 2) && (Y - e.offsetY) >= -(lineWidth / 2)) {
                        assistY.style.opacity = '0.4';
                    } else {
                        assistY.style.opacity = '0.2';
                    }
                };
                // document.title = e.offsetX + '-' + e.offsetY;
            });
            // this.can.canvas.addEventListener('click', function(e) {
            //     var pointList = vm.can.pointList;
            //     if (vm.equalStartPoint(e.offsetX,e.offsetY)) {
            //         vm.can.pointList.push({
            //             x: e.offsetX,
            //             y: e.offsetY
            //         });
            //     } else {
            //         alert("路径不合法");
            //     }
            //     vm.drawingAll();
            // });
        };
        this.drawingAll = function() {
            this.can.context.clearRect(0, 0, this.deploy.width, this.deploy.height);
            this.drawLine(); //线
            this.drawArc(); //画圆
            this.drawIcon(); //图标
            this.assist(); //辅助线
            this.lineDash(); //画虚线
            this.distanceAll();//计算距离
        };
        //画图标
        this.drawIcon = function() {
            var vm = this;
            var startIcon = document.getElementById('startIcon_' + vm.deploy.random),
                endIcon = document.getElementById('endIcon_' + vm.deploy.random),
                startX = vm.can.pointList[0].x,
                startY = vm.can.pointList[0].y,
                endX = vm.can.pointList[vm.can.pointList.length - 1].x,
                endY = vm.can.pointList[vm.can.pointList.length - 1].y,
                scale = this.deploy.scale,
                size = 30;
            //起点图标
            startIcon.style.display = "block";
            startIcon.style.position = "absolute";
            startIcon.style.zIndex = 5;
            startIcon.style.left = (startX - (size / 2))*scale + 'px';
            startIcon.style.top = (startY - (size / 1.2))*scale + 'px';
            startIcon.style.opacity = '0.8';
            startIcon.style.pointerEvents = 'none';
            startIcon.width = size;
            startIcon.height = size;
            if (vm.can.pointList.length > 1) {
                //终点图标
                endIcon.style.display = "block";
                endIcon.style.position = "absolute";
                endIcon.style.zIndex = 6;
                endIcon.style.left = (endX - (size / 2))*scale + 'px';
                endIcon.style.top = (endY - (size / 1.2))*scale + 'px';
                endIcon.style.transition = 'all 0.5s ease';
                endIcon.style.opacity = '0.8';
                endIcon.style.pointerEvents = 'none';
                endIcon.width = size;
                endIcon.height = size;
            };
        };
        //画圈：
        this.drawArc = function() {
            var vm = this;
            var p = this.can.pointList;
            var round = function(x, y) {
                vm.can.context.fillStyle = vm.toDeepen(vm.deploy.penColor);
                vm.can.context.beginPath();
                vm.can.context.arc(x, y, vm.deploy.roundr, 360, Math.PI * 2, true);
                vm.can.context.fill();
                vm.can.context.closePath();
            };
            for (var index = 0; index < p.length; index++) {
                var element = p[index];
                round(element.x, element.y);
            };
        };
        //画线
        this.drawLine = function() {
            var vm = this;
            var p = this.can.pointList;
            if (p.length > 1) {
                this.can.context.setLineDash([]);
                this.can.context.beginPath();
                this.can.context.lineCap = "round";
                this.can.context.lineJoin = "round";
                this.can.context.strokeStyle = this.deploy.penColor;
                this.can.context.lineWidth = this.deploy.lineWidth;
                for (var index = 0; index < p.length; index++) {
                    var e = p[index];
                    if (index > 0) {
                        this.can.context.lineTo(e.x, e.y);
                    } else {
                        this.can.context.moveTo(e.x, e.y);
                    }
                };
                this.can.context.stroke();
                this.can.context.closePath();
            };
        };
        //画虚线
        this.lineDash = function() {
            var errorPoint = this.can.errorPoint;
            if (errorPoint.x) {
                var p = this.can.pointList;
                this.can.context.beginPath();
                // 设置线宽
                var lineWidth = this.deploy.lineWidth;
                this.can.context.lineWidth = lineWidth;
                this.can.context.setLineDash([lineWidth + (lineWidth / 2), lineWidth + (lineWidth / 2)]);
                this.can.context.moveTo(errorPoint.x, errorPoint.y);
                this.can.context.lineTo(p[p.length - 1].x, p[p.length - 1].y);
                this.can.context.strokeStyle = "red";
                this.can.context.stroke();
                this.can.context.closePath();
            }

        };
        //辅助线
        this.assist = function() {
            var vm = this;
            var assistX = document.getElementById('assist_x_' + vm.deploy.random),
                assistY = document.getElementById('assist_y_' + vm.deploy.random),
                offsetX = vm.can.pointList[vm.can.pointList.length - 1].x,
                offsetY = vm.can.pointList[vm.can.pointList.length - 1].y,
                lineWidth = 2,
                scale = this.deploy.scale,
                assist = vm.deploy.assist, //是否开启辅助线
                assistColor = vm.deploy.assistColor; //辅助线颜色
            if (assist) {
                assistX.style.display = "block";
                assistX.style.position = "absolute";
                assistX.style.zIndex = 4;
                assistX.style.left = (offsetX - (lineWidth / 2) - 0.5)*scale + 'px';
                assistX.style.top = 0;
                assistX.style.opacity = '0.2';
                assistX.style.pointerEvents = 'none';
                assistX.style.height = "100%";
                assistX.style.width = lineWidth + 'px';
                assistX.style.background = "linear-gradient(to top, " + assistColor + ", " + assistColor + " 6px, transparent 0, transparent)";
                assistX.style.backgroundSize = "100% 10px";
                assistX.style.transition = 'all 0.3s ease';
                assistY.style.display = "block";
                assistY.style.position = "absolute";
                assistY.style.zIndex = 4;
                assistY.style.top = (offsetY - (lineWidth / 2))*scale + 'px';
                assistY.style.left = 0;
                assistY.style.opacity = '0.2';
                assistY.style.pointerEvents = 'none';
                assistY.style.width = "100%";
                assistY.style.height = lineWidth + 'px';
                assistY.style.background = "linear-gradient(to left, " + assistColor + ", " + assistColor + " 6px, transparent 0, transparent)";
                assistY.style.backgroundSize = "10px 100%";
                assistY.style.transition = 'all 0.3s ease';
            } else {
                assistX.style.display = "none";
                assistY.style.display = "none";
            }
        };
        this.toDeepen = function(str) {
            // 16进制颜色值的正则
            var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
            // 把颜色值变成小写
            var color = str.toLowerCase();
            if (reg.test(color)) {
                // 如果只有三位的值，需变成六位，如：#fff => #ffffff
                if (color.length === 4) {
                    var colorNew = "#";
                    for (var i = 1; i < 4; i += 1) {
                        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
                    }
                    color = colorNew;
                }
                // 处理六位的颜色值，转为RGB
                var rgbc = [];
                for (var i = 1; i < 7; i += 2) {
                    rgbc.push(parseInt("0x" + color.slice(i, i + 2)));
                }
                //floor 向下取整
                for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - 0.1));
                return 'rgb(' + rgbc[0] + ',' + rgbc[1] + ',' + rgbc[2] + ')'

            } else {
                return color;
            }
        };
        // 计算距离
        this.distanceAll = function(){
            var calculate = function(x1,y1,x2,y2){
                return Math.sqrt((x2-=x1)*x2+(y2-=y1)*y2);
            }
            var p = this.can.pointList;
            if (p.length > 1){
                var s = 0;
                for (var index = 0; index < p.length; index++) {
                    var element = p[index];
                    if (p[index + 1]) {
                        var x1 = element.x;
                        var y1 = element.y;
                        var x2 = p[index + 1].x;
                        var y2 = p[index + 1].y;
                        s += calculate(x1,y1,x2,y2);
                    }
                }
                this.can.distance = s;
                // Math.ceil() // 向上
                // Math.floor() // 向下
                // Math.round() // 四舍五入
            }else{
                this.can.distance = 0;
            }
        };
        //导出图片;
        this.Export = function(complete) {
            var vm = this;
            var pointList = vm.can.pointList;
            if (pointList.length > 1) {
                var canvas = document.createElement("canvas");
                canvas.width = vm.deploy.width;
                canvas.height = vm.deploy.height;
                var ctx = canvas.getContext('2d');
                ctx.drawImage(vm.can.imgae, 0, 0, canvas.width, canvas.height);
                ctx.lineCap = "round";
                ctx.lineJoin = "round";
                ctx.strokeStyle = vm.deploy.penColor;
                ctx.lineWidth = vm.deploy.lineWidth;
                pointList.forEach(function(e, i) {
                    if (i == "0") {
                        ctx.moveTo(e.x, e.y);
                    } else {
                        ctx.lineTo(e.x, e.y);
                    }
                });
                ctx.stroke();
                var startIcon = document.getElementById('startIcon_' + vm.deploy.random),
                    endIcon = document.getElementById('endIcon_' + vm.deploy.random),
                    startX = pointList[0].x,
                    startY = pointList[0].y,
                    endX = pointList[pointList.length - 1].x,
                    endY = pointList[pointList.length - 1].y,
                    size = 30;
                ctx.drawImage(startIcon, startX - (size / 2), startY - (size / 1.2), size, size);
                ctx.drawImage(endIcon, endX - (size / 2), endY - (size / 1.2), size, size);
                canvas.toBlob(function(blob) {
                    var objectURL = URL.createObjectURL(blob);
                    complete(objectURL);
                }, 1);
                // complete(canvas.toDataURL("image/png"),1)
            } else {
                complete(null, '[至少两条路径]')
            }
        };
         //判断点重合；
        this.equalStartPoint = function (x, y) {
            var is = true;
            var p = this.can.pointList;
            for (var index = 0; index < p.length; index++) {
                var element = p[index];
                if (p.length > 2 && Math.abs((x - element.x) * (x - element.x)) + Math.abs((y - element.y) * (y - element.y)) <= this.deploy.roundr * this.deploy.roundr) {
                    is = false;
                    break;
                }
            }
            return is
        };

        this.segmentsIntr = function(a, b, c, d) {
            //参考 https://www.iteye.com/blog/fins-1522259
            // console.log('segmentsIntr', a, b, c, d);
            //线段ab的法线N1
            var nx1 = (b.y - a.y),
                ny1 = (a.x - b.x);

            //线段cd的法线N2
            var nx2 = (d.y - c.y),
                ny2 = (c.x - d.x);

            //两条法线做叉乘, 如果结果为0, 说明线段ab和线段cd平行或共线,不相交
            var denominator = nx1 * ny2 - ny1 * nx2;
            if (denominator == 0) {
                return false;
            }

            //在法线N2上的投影
            var distC_N2 = nx2 * c.x + ny2 * c.y;
            var distA_N2 = nx2 * a.x + ny2 * a.y - distC_N2;
            var distB_N2 = nx2 * b.x + ny2 * b.y - distC_N2;

            // 点a投影和点b投影在点c投影同侧 (对点在线段上的情况,本例当作不相交处理);
            if (distA_N2 * distB_N2 >= 0) {
                return false;
            }

            //
            //判断点c点d 和线段ab的关系, 原理同上
            //
            //在法线N1上的投影
            var distA_N1 = nx1 * a.x + ny1 * a.y;
            var distC_N1 = nx1 * c.x + ny1 * c.y - distA_N1;
            var distD_N1 = nx1 * d.x + ny1 * d.y - distA_N1;
            if (distC_N1 * distD_N1 >= 0) {
                return false;
            }

            //计算交点坐标
            var fraction = distA_N2 / denominator;
            var dx = fraction * ny1,
                dy = -fraction * nx1;
            return {
                x: a.x + dx,
                y: a.y + dy
            };
        };
        //重做，清空
        this.ReDo = function() {
            this.intersectIconHide();
            this.clearCan();
            this.can.pointList.length = 0;
        };

        //清空画布
        this.clearCan = function() {
            document.getElementById('startIcon_' + this.deploy.random).style.display = "none";
            document.getElementById('endIcon_' + this.deploy.random).style.display = "none";
            document.getElementById('assist_x_' + this.deploy.random).style.display = "none";
            document.getElementById('assist_y_' + this.deploy.random).style.display = "none";
            this.can.context.clearRect(0, 0, this.deploy.width, this.deploy.height);
        };
        //放大 缩小 还原
        this.zoom = function(type){
            var scale = this.deploy.scale;
            var s = 1;
            if(type==='+'){
                s = this.deploy.scale += 0.25;
                if(scale>2.25){
                    s = 2.5;
                }
            }else if(type==='-'){
                s = this.deploy.scale -= 0.25;
                if(scale<0.7){
                    s = 0.7;
                }
            }
            this.deploy.scale = s;
            var dom = document.getElementById(this.deploy.drawPanel).querySelectorAll('*');
            for (var index = 0; index < dom.length; index++) {
                 var element = dom[index];
                 element.style.transform = 'scale('+s+')';
            }
            this.drawIcon(); //图标
            this.assist(); //辅助线
        };
        //Revoke 撤销
        this.revoke = function(complete) {
            this.intersectIconHide();
            var errorPoint = this.can.errorPoint;
            if (errorPoint.x) {
                this.can.errorPoint = new Object();
                this.drawingAll();
            } else {
                this.can.pointList.pop();
                var p = this.can.pointList;
                if (p.length > 1) {
                    this.drawingAll();
                } else if (p.length > 0) {
                    this.clearCan();
                    this.drawArc(); //画圆
                    this.drawIcon(); //图标
                    this.assist(); //辅助线
                    this.distanceAll();//计算距离
                } else {
                    this.clearCan();
                    this.distanceAll();//计算距离
                }
            }
            complete(this);
        };
		//控制移动
		this.HandleControll = function(direction){
			var vm = this;
			var pointList = vm.can.pointList;

			var X = pointList[pointList.length - 1].x;
			var Y = pointList[pointList.length - 1].y;
			switch (direction){
				case "up":
					Y -= vm.deploy.step;
					break;
				case "down":
					Y += vm.deploy.step;
					break;
				case "left":
					X -= vm.deploy.step;
					break;
				case "right":
					X += vm.deploy.step;
					break;
				default:
					alert("move direction error");
			}
            vm.can.pointList.push({
                x: X,
                y: Y
            });
			vm.drawingAll();
		};
		//上
		this.GoUp = function() {
			this.HandleControll("up");

		};
		//下
		this.GoDown = function() {
			this.HandleControll("down");
		};
		//左
		this.GoLeft = function() {
			this.HandleControll("left");
		};
		//右
		this.GoRight = function() {
			this.HandleControll("right");
		};
    this.notEmptyObj = function(obj) {
       if (obj != null && obj != undefined && obj != "") {
                return true;
       }
       return false;
    }
        // 开启定时
     let intervalBox;
     this.num = 0;
     this.valTrue = false;
     this.startInterval = function() {
            let vm = this;
            vm.valTrue = true;
            vm.stopInterval();
            clearInterval(intervalBox);//初始化interval定时器，防止定时器重叠
            intervalBox = setInterval(function(){//设置interval定时器
                vm.num++;
                console.log(vm.num);
                if(vm.num < 15) {
                    vm.GoRight();
                } else if (15 < vm.num && vm.num < 23) {
                    vm.GoDown();
                } else if(23 < vm.num && vm.num < 38){
                    vm.GoLeft();
                } else if(vm.num == 39){
                    vm.GoDown();
                    // vm.stopInterval();
                    // vm.num = 0;
                } else if (39 < vm.num && vm.num < 69) {
                    vm.GoRight();
                } else if (vm.num == 70) {
                    vm.GoUp();
                } else if (70 < vm.num &&  vm.num < 84) {
                    vm.GoLeft();
                } else if (84 < vm.num && vm.num < 91) {
                    vm.GoUp();
                } else if (91 < vm.num && vm.num < 105) {
                    vm.GoRight();
                } else if (vm.num == 105) {
                    vm.GoUp();
                } else if (105 < vm.num && vm.num < 119) {
                    vm.GoLeft();
                } else {
                    // vm.stopInterval();
                }
            }, 30000);//定时器间隔时间1000ms
        };

     // 关闭定时
     this.stopInterval = function() {
         let vm = this;
         clearInterval(intervalBox);
         vm.valTrue = false;
     }
    };
    // window['drawingBoard'] = drawingBoard;


    export default drawingBoard;



