电路拓扑图提交

whychdw

2020-06-27 9621dd441cc859d4583c7cd1e525ae7016f7a2ce

电路拓扑图提交

 fuguang_sx/WebRoot/control_sx.jsp

New file
Diff too large

 fuguang_sx/WebRoot/js/elecircle.content.js

@@ -1107,6 +1107,9 @@
                    if(data.dev_res_test_state != 0) {
                        _str += '(内阻测试)';
                    }
    				
                    // 放电
                    shanXiTopGraph.changeCurrState('');
                }
                break;
                case 1:{ // 放电测试
@@ -1128,6 +1131,9 @@
                        _str += '(KD测试)';
                        mygraph.graphtype = 5;
                    }
    				
                    // 放电
                    shanXiTopGraph.changeCurrState('discharge');
                }
                break;
                case 2: {
@@ -1143,9 +1149,15 @@
                            mygraph.graphtype = 3 ;
                            _str = '(开关闭合)';
                        }
    					
                        // 充电
                        shanXiTopGraph.changeCurrState('charge');
                    }else{
                        mygraph.graphtype = 0;
                        _str = '(开关闭合)';
    					
                        // 无状态
                        shanXiTopGraph.changeCurrState('');
                    }
                }
                break;
@@ -1153,6 +1165,9 @@
                    //未知
                    mygraph.graphtype = 4 ;
                    _str = '(未知)';
					
                    // 无状态
                    shanXiTopGraph.changeCurrState('');
                }
                break;
            }

 fuguang_sx/WebRoot/topgraph/image/eleCircle/elegroup.png

 fuguang_sx/WebRoot/topgraph/image/eleCircle/load.png

 fuguang_sx/WebRoot/topgraph/image/eleCircle/screen.png

 fuguang_sx/WebRoot/topgraph/js/shanxi.js

New file
@@ -0,0 +1,990 @@
var ShanXiTopGraph = function(topgraph, topgraphArc) {
    this.topgraph = topgraph;
    this.topgraphArc = topgraphArc;
    this.topgrahpInfo = {};
    this.type="";
    this.topgraphArc.start();
};

// 生成电路图
ShanXiTopGraph.prototype.drawTopGraph = function() {
    var topgraph = this.topgraph;
    var c_width = topgraph.canvas.width;
    var c_height = topgraph.canvas.height;
    
    var startPoint = {
        x: 60,
        y: 80,
    };
    var line1 = {
        id: 'line1',
        start: {
            x: startPoint.x,
            y: startPoint.y,
        },
        end: {
            x: 128,
            y: startPoint.y,
        },
        lineWidth: 1,
        strokeStyle: "#FF0000",
    };

    // 绘制线
    topgraph.drawLine(line1);

    // 绘制开关
    var switch1 = topgraph.switch({
        id: 'switch1',
        point: {
            x: line1.end.x,
            y: line1.end.y,
        },
        lineStyle:  {
            lineWidth: 3,
            strokeStyle: '#000000',
        },
        arcStyle: {
            fillStyle: '#000000',
            strokeStyle: '#000000'
        },
        direct: 'left',
        state: ''
    });

    var line2 = {
        id: 'line2',
        start: {
            x: switch1.right.x,
            y: switch1.right.y,
        },
        end: {
            x: switch1.right.x+88,
            y: switch1.right.y,
        },
        lineWidth: 1,
        strokeStyle: "#FF0000",
    };
    // 绘制线
    topgraph.drawLine(line2);

    var line3 = {
        id: 'line3',
        start: {
            x: line2.end.x,
            y: line2.end.y,
        },
        end: {
            x: line2.end.x+88,
            y: line2.end.y,
        },
        lineWidth: 1,
        strokeStyle: "#FF0000",
    };

    // 绘制线
    topgraph.drawLine(line3);

    // 绘制开关
    var switch2 = topgraph.switch({
        id: 'switch2',
        point: {
            x: line3.end.x,
            y: line3.end.y,
        },
        lineStyle:  {
            lineWidth: 3,
            strokeStyle: '#000000',
        },
        arcStyle: {
            fillStyle: '#000000',
            strokeStyle: '#000000'
        },
        direct: 'left',
        state: ''
    });

    var line4 = {
        id: 'line4',
        start: {
            x: switch2.right.x,
            y: switch2.right.y,
        },
        end: {
            x: switch2.right.x+88,
            y: switch2.right.y,
        },
        lineWidth: 1,
        strokeStyle: "#FF0000",
    };
    // 绘制线
    topgraph.drawLine(line4);

    var line5 = {
        id: 'line5',
        start: {
            x: line4.end.x,
            y: line4.end.y,
        },
        end: {
            x: c_width - startPoint.y-20,
            y: line4.end.y,
        },
        lineWidth: 1,
        strokeStyle: "#FF0000",
    };

    // 绘制线
    topgraph.drawLine(line5);

    var line11 = {
        id: 'line11',
        start: {
            x: line1.start.x,
            y: line1.start.y,
        },
        end: {
            x: line1.start.x,
            y: line1.start.y+150,
        },
        lineWidth: 1,
        strokeStyle: "#FF0000",
    };
    // 绘制线
    topgraph.drawLine(line11);

    // 放点单元
    var dischargeUnitInfo = {
        width: 100,
        height: 100
    };
    var dischargeUnit = topgraph.roundRect({
        id: 'dischargeUnit',
        point: {
            x: line11.end.x - dischargeUnitInfo.width/2,
            y: line11.end.y,
        },
        width: dischargeUnitInfo.width,
        height: dischargeUnitInfo.height,
        radius: 2,
        text: '放电单元'
    });
    
    var line12 = {
        id: 'line12',
        start: {
            x: line11.end.x,
            y: dischargeUnit.bottom.y,
        },
        end: {
            x: line11.end.x,
            y: c_height-startPoint.y,
        },
        lineWidth: 1,
        strokeStyle: "#000000",
    };
    // 绘制线
    topgraph.drawLine(line12);

    var line21 = {
        id: 'line21',
        start: {
            x: line2.end.x,
            y: line2.end.y,
        },
        end: {
            x: line2.end.x,
            y: line11.end.y,
        },
        lineWidth: 1,
        strokeStyle: "#FF0000",
    };

    // 绘制线
    topgraph.drawLine(line21);

    // 图片配置
    var imgInfo = {
        width: 61,
        height: 25
    };

    // 绘制电池组
    var eleGroup = topgraph.drawEleGroup({
        id: 'eleGroupImg',
        point: {
            x: line21.end.x-imgInfo.width/2,
            y: line21.end.y,
        },
        width: imgInfo.width,
        height: imgInfo.height,
        direct: 'up'
    });

    var line22 = {
        id: 'line22',
        start: {
            x: eleGroup.bottom.x,
            y: eleGroup.bottom.y,
        },
        end: {
            x: eleGroup.bottom.x,
            y: c_height-startPoint.y,
        },
        lineWidth: 1,
        strokeStyle: "#000000",
    };
    // 绘制线
    topgraph.drawLine(line22);

    var line41 = {
        id: 'line41',
        start: {
            x: line4.end.x,
            y: line4.end.y,
        },
        end: {
            x: line4.end.x,
            y: line11.end.y,
        },
        lineWidth: 1,
        strokeStyle: "#FF0000",
    };
    
    // 绘制线
    topgraph.drawLine(line41);

    var line51 = {
        id: 'line51',
        start: {
            x: line5.end.x,
            y: line5.end.y,
        },
        end: {
            x: line5.end.x,
            y: line11.end.y,
        },
        lineWidth: 1,
        strokeStyle: "#FF0000",
    };
    
    // 绘制线
    topgraph.drawLine(line51);
    // 图片配置
    var loaderImgInfo = {
        width: 136/2,
        height: 248/2
    };

    // 用电负载
    var loaderImgOption = {
        id: 'loaderImg',
        point: {
            x: line51.end.x-loaderImgInfo.width/2,
            y: line51.end.y,
        },
        width: loaderImgInfo.width,
        height: loaderImgInfo.height,
        direct: 'up',
    };

    // 绘制用电负载
    var loader = topgraph.drawLoader(loaderImgOption);

    var line52 = {
        id: 'line52',
        start: {
            x: loader.bottom.x,
            y: loader.bottom.y,
        },
        end: {
            x: loader.bottom.x,
            y: c_height-startPoint.y,
        },
        lineWidth: 1,
        strokeStyle: "#000000",
    };
    // 绘制线
    topgraph.drawLine(line52);

    // 图片配置
    var rectifierImgInfo = {
        width: 136/2,
        height: 248/2
    };

    // 整流器
    var rectifierImgOption = {
        id: 'rectifierImg',
        point: {
            x: line41.end.x-rectifierImgInfo.width/2,
            y: line41.end.y,
        },
        width: rectifierImgInfo.width,
        height: rectifierImgInfo.height,
        direct: 'up',
    };

    // 绘制整流器
    var rectifier = topgraph.drawRectifier(rectifierImgOption);

    var line42 = {
        id: 'line42',
        start: {
            x: rectifier.bottom.x,
            y: rectifier.bottom.y,
        },
        end: {
            x: rectifier.bottom.x,
            y: c_height-startPoint.y,
        },
        lineWidth: 1,
        strokeStyle: "#000000",
    };
    // 绘制线
    topgraph.drawLine(line42);

    var line6 = {
        id: 'line6',
        start: {
            x: line12.end.x,
            y: line12.end.y,
        },
        end: {
            x: line1.end.x,
            y: line12.end.y,
        },
        lineWidth: 1,
        strokeStyle: "#000000",
    };
    // 绘制线
    topgraph.drawLine(line6);

    // 绘制开关
    var switch3 = topgraph.switch({
        id: 'switch3',
        point: {
            x: line6.end.x,
            y: line6.end.y,
        },
        lineStyle:  {
            lineWidth: 3,
            strokeStyle: '#000000',
        },
        arcStyle: {
            fillStyle: '#000000',
            strokeStyle: '#000000'
        },
        direct: 'left',
        state: ''
    });

    var line7 = {
        id: 'line7',
        start: {
            x: switch3.right.x,
            y: switch3.right.y,
        },
        end: {
            x: line2.end.x,
            y: switch3.right.y,
        },
        lineWidth: 1,
        strokeStyle: "#000000",
    };
    // 绘制线
    topgraph.drawLine(line7);

    var line8 = {
        id: 'line8',
        start: {
            x: line7.end.x,
            y: line7.end.y,
        },
        end: {
            x: line3.end.x,
            y: line7.end.y,
        },
        lineWidth: 1,
        strokeStyle: "#000000",
    };
    // 绘制线
    topgraph.drawLine(line8);

    // 绘制开关
    var switch4 = topgraph.switch({
        id: 'switch4',
        point: {
            x: line8.end.x,
            y: line8.end.y,
        },
        lineStyle:  {
            lineWidth: 3,
            strokeStyle: '#000000',
        },
        arcStyle: {
            fillStyle: '#000000',
            strokeStyle: '#000000'
        },
        direct: 'left',
        state: ''
    });

    var line9 = {
        id: 'line9',
        start: {
            x: switch4.right.x,
            y: switch4.right.y,
        },
        end: {
            x: line4.end.x,
            y: switch4.right.y,
        },
        lineWidth: 1,
        strokeStyle: "#000000",
    };
    // 绘制线
    topgraph.drawLine(line9);

    var line10 = {
        id: 'line10',
        start: {
            x: line9.end.x,
            y: line9.end.y,
        },
        end: {
            x: line5.end.x,
            y: line9.end.y,
        },
        lineWidth: 1,
        strokeStyle: "#000000",
    };
    // 绘制线
    topgraph.drawLine(line10);

    var dotLineStart = {
        x: line3.end.x-20,
        y: startPoint.y-30,
    };
    var dotLineColor = "#58AFEF";
    // 创建断点矩形框
    var dotLine1 = {
        id: 'dotLine1',
        start: {
            x: dotLineStart.x,
            y: dotLineStart.y,
        },
        end: {
            x: line5.end.x+70,
            y: dotLineStart.y,
        },
        lineWidth: 1,
        strokeStyle: dotLineColor,
    };
    // 绘制线条
    topgraph.drawDotLine(dotLine1);

    // 创建断点矩形框
    var dotLine2 = {
        id: 'dotLine2',
        start: {
            x: dotLine1.end.x,
            y: dotLine1.end.y,
        },
        end: {
            x: dotLine1.end.x,
            y: line10.end.y+30,
        },
        lineWidth: 1,
        strokeStyle: dotLineColor,
    };
    // 绘制线条
    topgraph.drawDotLine(dotLine2);

    // 创建断点矩形框
    var dotLine3 = {
        id: 'dotLine3',
        start: {
            x: dotLine2.end.x,
            y: dotLine2.end.y,
        },
        end: {
            x: dotLine1.start.x,
            y: dotLine2.end.y,
        },
        lineWidth: 1,
        strokeStyle: dotLineColor,
    };
    // 绘制线条
    topgraph.drawDotLine(dotLine3);

    // 创建断点矩形框
    var dotLine4 = {
        id: 'dotLine4',
        start: {
            x: dotLine3.end.x,
            y: dotLine3.end.y,
        },
        end: {
            x: dotLine1.start.x,
            y: dotLine1.start.y,
        },
        lineWidth: 1,
        strokeStyle: dotLineColor,
    };
    // 绘制线条
    topgraph.drawDotLine(dotLine4);
    console.log(eleGroup);
    // 设置文本
//    topgraph.setText({
//        id: 'curr',
//        point: {
//            x: eleGroup.top.x+60,
//            y: eleGroup.top.y-20,
//        },
//        text: 'I=100A',
//        font: 14,
//        color: "#58AFEF",
//        nocenter: true,
//    });

    this.topgrahpInfo =  {
        line1,
        line2,
        line3,
        line4,
        line5,
        line6,
        line7,
        line8,
        line9,
        line10,
        line11,
        line12,
        line21,
        line22,
        line41,
        line42,
        line51,
        line52,
    }
};

// 放电电流
ShanXiTopGraph.prototype.drawDicharge = function() {
    var topgraph = this.topgraph;
    var topgraphInfo = this.topgrahpInfo;
    // 关闭开关1，3
    topgraph.change('switch1', {state:'close'});
    topgraph.change('switch3', {state:'close'});

    // 打开开关2，4
    topgraph.change('switch2', {state:'open'});
    topgraph.change('switch4', {state:'open'});

    var topgraphArc = this.topgraphArc;
    var raidus = 4;
    var fillStyle = "#FF0000";
    // 运动约束
    var line21 = topgraphInfo.line21;

    topgraphArc.moveArc({
        id: 'moveArc1',
        point: {
            x: line21.end.x,
            y: line21.end.y,
        },
        
        start: {
            x: line21.end.x,
            y: line21.end.y,
        },
        end: {
            x: line21.start.x,
            y: line21.start.y,
        },
        radius: raidus,
        fillStyle: fillStyle
    });

    // 运动约束
    var line2 = topgraphInfo.line2;
    topgraphArc.moveArc({
        id: 'moveArc2',
        point: {
            x: line2.end.x,
            y: line2.end.y,
        },
        
        start: {
            x: line2.end.x,
            y: line2.end.y,
        },
        end: {
            x: line2.start.x,
            y: line2.start.y,
        },
        radius: raidus,
        fillStyle: fillStyle
    });

    // 运动约束
    var line1 = topgraphInfo.line1;
    topgraphArc.moveArc({
        id: 'moveArc3',
        point: {
            x: line1.end.x,
            y: line1.end.y,
        },
        
        start: {
            x: line1.end.x,
            y: line1.end.y,
        },
        end: {
            x: line1.start.x,
            y: line1.start.y,
        },
        radius: raidus,
        fillStyle: fillStyle
    });

    // 运动约束
    var line11 = topgraphInfo.line11;
    topgraphArc.moveArc({
        id: 'moveArc4',
        point: {
            x: line11.start.x,
            y: line11.start.y,
        },
        
        start: {
            x: line11.start.x,
            y: line11.start.y,
        },
        end: {
            x: line11.end.x,
            y: line11.end.y,
        },
        radius: raidus,
        fillStyle: fillStyle
    });

    // 运动约束
    var line12 = topgraphInfo.line12;
    topgraphArc.moveArc({
        id: 'moveArc5',
        point: {
            x: line12.start.x,
            y: line12.start.y,
        },
        
        start: {
            x: line12.start.x,
            y: line12.start.y,
        },
        end: {
            x: line12.end.x,
            y: line12.end.y,
        },
        radius: raidus,
        fillStyle: fillStyle
    });

    // 运动约束
    var line6 = topgraphInfo.line6;
    topgraphArc.moveArc({
        id: 'moveArc6',
        point: {
            x: line6.start.x,
            y: line6.start.y,
        },
        
        start: {
            x: line6.start.x,
            y: line6.start.y,
        },
        end: {
            x: line6.end.x,
            y: line6.end.y,
        },
        radius: raidus,
        fillStyle: fillStyle
    });

    // 运动约束
    var line7 = topgraphInfo.line7;
    topgraphArc.moveArc({
        id: 'moveArc7',
        point: {
            x: line7.start.x,
            y: line7.start.y,
        },
        
        start: {
            x: line7.start.x,
            y: line7.start.y,
        },
        end: {
            x: line7.end.x,
            y: line7.end.y,
        },
        radius: raidus,
        fillStyle: fillStyle
    });

    // 运动约束
    var line22 = topgraphInfo.line22;
    topgraphArc.moveArc({
        id: 'moveArc8',
        point: {
            x: line22.end.x,
            y: line22.end.y,
        },
        
        start: {
            x: line22.end.x,
            y: line22.end.y,
        },
        end: {
            x: line22.start.x,
            y: line22.start.y,
        },
        radius: raidus,
        fillStyle: fillStyle
    });
};

// 充电
ShanXiTopGraph.prototype.drawCharge = function() {
    var topgraph = this.topgraph;
    var topgraphInfo = this.topgrahpInfo;
    // 打开开关1，3
    topgraph.change('switch1', {state:'open'});
    topgraph.change('switch3', {state:'open'});

    // 关闭开关2，4
    topgraph.change('switch2', {state:'close'});
    topgraph.change('switch4', {state:'close'});

    var topgraphArc = this.topgraphArc;
    var radius = 4;
    var fillStyle = "#1495E7";

    // 运动约束
    var line21 = topgraphInfo.line21;
    topgraphArc.moveArc({
        id: 'moveArc1',
        point: {
            x: line21.start.x,
            y: line21.start.y,
        },
        
        start: {
            x: line21.start.x,
            y: line21.start.y,
        },
        end: {
            x: line21.end.x,
            y: line21.end.y,
        },
        radius: radius,
        fillStyle: fillStyle
    });

    // 运动约束
    var line22 = topgraphInfo.line22;
    topgraphArc.moveArc({
        id: 'moveArc2',
        point: {
            x: line22.start.x,
            y: line22.start.y,
        },
        
        start: {
            x: line22.start.x,
            y: line22.start.y,
        },
        end: {
            x: line22.end.x,
            y: line22.end.y,
        },
        radius: radius,
        fillStyle: fillStyle
    });

    // 运动约束
    var line8 = topgraphInfo.line8;
    topgraphArc.moveArc({
        id: 'moveArc3',
        point: {
            x: line8.start.x,
            y: line8.start.y,
        },
        
        start: {
            x: line8.start.x,
            y: line8.start.y,
        },
        end: {
            x: line8.end.x,
            y: line8.end.y,
        },
        radius: radius,
        fillStyle: fillStyle
    });

    // 运动约束
    var line9 = topgraphInfo.line9;
    topgraphArc.moveArc({
        id: 'moveArc4',
        point: {
            x: line9.start.x,
            y: line9.start.y,
        },
        
        start: {
            x: line9.start.x,
            y: line9.start.y,
        },
        end: {
            x: line9.end.x,
            y: line9.end.y,
        },
        radius: radius,
        fillStyle: fillStyle
    });

    // 运动约束
    var line42 = topgraphInfo.line42;
    topgraphArc.moveArc({
        id: 'moveArc5',
        point: {
            x: line42.end.x,
            y: line42.end.y,
        },
        
        start: {
            x: line42.end.x,
            y: line42.end.y,
        },
        end: {
            x: line42.start.x,
            y: line42.start.y,
        },
        radius: radius,
        fillStyle: fillStyle
    });

    // 运动约束
    var line41 = topgraphInfo.line41;
    topgraphArc.moveArc({
        id: 'moveArc6',
        point: {
            x: line41.end.x,
            y: line41.end.y,
        },
        
        start: {
            x: line41.end.x,
            y: line41.end.y,
        },
        end: {
            x: line41.start.x,
            y: line41.start.y,
        },
        radius: radius,
        fillStyle: fillStyle
    });

    // 运动约束
    var line4 = topgraphInfo.line4;
    topgraphArc.moveArc({
        id: 'moveArc7',
        point: {
            x: line4.end.x,
            y: line4.end.y,
        },
        
        start: {
            x: line4.end.x,
            y: line4.end.y,
        },
        end: {
            x: line4.start.x,
            y: line4.start.y,
        },
        radius: radius,
        fillStyle: fillStyle
    });

    // 运动约束
    var line3 = topgraphInfo.line3;
    topgraphArc.moveArc({
        id: 'moveArc8',
        point: {
            x: line3.end.x,
            y: line3.end.y,
        },
        
        start: {
            x: line3.end.x,
            y: line3.end.y,
        },
        end: {
            x: line3.start.x,
            y: line3.start.y,
        },
        radius: radius,
        fillStyle: fillStyle
    });
};

// 中间态
ShanXiTopGraph.prototype.drawPowerCut = function() {
    var topgraph = this.topgraph;
    // 打开开关1，3
    topgraph.change('switch1', {state:'open'});
    topgraph.change('switch3', {state:'open'});

    // 打开开关2，4
    topgraph.change('switch2', {state:'open'});
    topgraph.change('switch4', {state:'open'});
};

// 修改电路状态
ShanXiTopGraph.prototype.changeCurrState = function(type) {
    console.log(type);
    // 判断类型是否更改
    if(this.type == type) {
        return;
    }
    this.type = type;
    var topgraphArc = this.topgraphArc;
    // 清空配置项
    topgraphArc.options = [];
    switch(type) {
        case 'discharge':
            this.drawDicharge();
        break;
        case 'charge':
            this.drawCharge();
        break;
        default:
            this.drawPowerCut();
        break;
    }
};


//山西太原拓扑图
var shanXiTopGraph = new ShanXiTopGraph(new TopGraph($('#topgraph')), new TopGraph($('#topgraphArc')));

// 绘制电路拓扑图
shanXiTopGraph.drawTopGraph();
shanXiTopGraph.topgraph.start();
setTimeout(function() {
    shanXiTopGraph.topgraph.stop();
}, 1000);

shanXiTopGraph.changeCurrState();

 fuguang_sx/WebRoot/topgraph/js/topgraph.js

New file
@@ -0,0 +1,1824 @@
function TopGraph(container) {
    this.options = [];
    this.timer = '';
    this.eleImg = new Image();      // 电池图片
    this.rectifier = new Image();   // 整流器图片
    this.loader = new Image();      // 用地那负载图片
    this.init(container);
    // 开启自动刷新
    // this.start();
}
// 初始化Canvas
TopGraph.prototype.init = function(container) {
    // 生成canvas
    this._createCanvas(container);
    // 基础配置
    this.base = {
        font: 16,               // 字体的大小
        color: '#000000',       // 字体的颜色
        strokeStyle: '#FF0000', // 边框的颜色
        lineWidth: 4,           // 边框的宽度
        fillStyle: '#EDEDED',   // 填充的颜色
    }
    // 规定双向箭头矩形的宽度和高度（带实线的为width）
    this.twoWayArrowOpts = {
        width: 50,
        height: 8,
    };

    // 规定双向箭头矩形的宽度和高度（带实线的为width）
    this.arrowOpts = {
        width: 60,
        height: 12,
    };

    // 开关的基本配置
    this.switchOpts = {
        width: 25,      // 线长度
        space: 40,
        radius: 4,
    };

    // 二极管的基本配置项
    this.diodeOpts = {
        width: 30,
    };
    // 电池图片
    this.eleImg.src = './image/eleCircle/elegroup.png';

    // 整流器
    this.rectifier.src = './image/eleCircle/screen.png';

    // 用电负载
    this.loader.src = './image/eleCircle/load.png';

    // 移动点的基本配置
    this.moveArcOpts = {
        step: 3,    // 移动速度
    };
};

// 根据容器生成canvas
TopGraph.prototype._createCanvas = function(container) {
    // 获取容器的宽高
    var cInfo = {
        width: container.width(),
        height: container.height(),
    };
    var canvas = $('<canvas></canvas>');
    container.append(canvas);
    // 设置canvas
    this.canvas = canvas.get(0);
    this.context = this.canvas.getContext('2d');
    // 设置宽高
    this.canvas.width = 800
    this.canvas.height = 540;
};

// 检测option是否options中存在
TopGraph.prototype._checkOption = function(option) {
    var result = false;
    // 检测配置项没有有id（当已存在配置项处理）, 下次刷新内容会消失
    if(typeof(option.id) == 'undefinded') {
        result = true;
    }else {
        var options = this.options;
        for(var i=0; i<options.length; i++) {
            var _options = options[i];
            if(_options.id == option.id) {
                this.options[i] = $.extend(true, {}, _options, option);
                result = true;
            }
        }
    }
    return result;
};

// 开始不断的更新
TopGraph.prototype.start = function() {
    var self = this;
    this.stop();
    this._update();
    this.timer = setInterval(function() {
        self._update();
    }, 100);
};
// 关闭更新
TopGraph.prototype.stop = function() {
    clearInterval(this.timer);
};

// 实时更新canvas
TopGraph.prototype._update = function() {
    var canvas = this.canvas;
    var context = this.context;
    var options = this.options;
    context.clearRect(0,0,canvas.width,canvas.height);
    
    // 遍历并重新绘制内容
    for(var i=0; i<options.length; i++) {
        this._exe(options[i]);
    }
};

// 根据event执行方法
TopGraph.prototype._exe = function(option) {
    var event = option.event;
    if(typeof(event) != 'undefined' && typeof(this[event]) == 'function') {
        this[event](option);
    }
}

// 获取信息
TopGraph.prototype.getInfo = function(option) {
    var result;
    var event = option.event;
    switch(event) {
        case 'twoWayArrow':     // 双向箭头
            result = this._getTwoWayArrowInfo(option);
        break;
        case 'rect':        // 矩形的信息
            result = this._getRectInfo(option);
        break;
        case 'arrow':       // 单向箭头的信息
            result = this._getArrowInfo(option);
        break;
        case 'drawEle':     // 电池单体
            result = this._getImageInfo(option);
        break;
        case 'drawRectifier':   // 带圆角的矩形
            result = this._getImageInfo(option);
        break;
        case 'arc':     // 圆点
            result = this._arcInfo(option);
        break;
        case 'switch':  // 开关
            result = this._getSwitchInfo(option);
        break;
        case 'diode':   // 二极管
            result = this._getDiodeInfo(option);
        break;
    }
    return result;
}

// 修改配置项
TopGraph.prototype.change = function(id, option) {
    var options = this.options;
    // 判断id是否存在
    if(typeof(id) == 'undefined') {
        return;
    }
    // 遍历配置项
    for(var i=0; i<options.length; i++) {
        var _options = options[i];
        if(_options.id == id) {
            this.options[i] = $.extend(true, {}, _options, option);
        }
    }

    // 更新图表
    this._update();
};

// 获取配置项
TopGraph.prototype.getOption = function(id) {
    var result;
    var options = this.options;
    // 判断id是否存在
    if(typeof(id) == 'undefined') {
        return;
    }
    // 遍历配置项
    for(var i=0; i<options.length; i++) {
        var _options = options[i];
        if(_options.id == id) {
            result = $.extend(true, {}, _options);
        }
    }

    return result;
};

// 向options内添加配置项
TopGraph.prototype._push = function(option) {
    // 配置项没有添加到全局配置项中
    if(!this._checkOption(option)) {
        this.options.push(option);
    }
};

// 双向箭头
TopGraph.prototype.twoWayArrow = function(option) {
    var result;
    option = $.extend({}, this.base, option);
    option.event = 'twoWayArrow';
    // 根据direct生成双向箭头
    switch (option.direct) {
        case 'row': // 横向
            result = this._twoWayArrowRow(option);
        break;
        default:    // 纵向
            result = this._twoWayArrowCol(option);
        break;
    }

    // 配置项没有添加到全局配置项中
    this._push(option);

    // 返回双向箭头的顶点
    return result;
};

// 获取双向箭头的信息
TopGraph.prototype._getTwoWayArrowInfo = function(option) {
    var result;
    // 根据direct生成双向箭头
    switch (option.direct) {
        case 'row': // 横向
            result = this._getTwoWayArrowRowInfo(option);
        break;
        default:    // 纵向
            result = this._getTwoWayArrowColInfo(option);
        break;
    }

    return result;
};

// 横向的双箭头
TopGraph.prototype._twoWayArrowRow = function(option) {
    var point = option.point;
    var context = this.context;
    var opts = this.twoWayArrowOpts;      // 双箭头的基本配置项
    
    var x = point.x;
    var y = point.y;

    context.beginPath();
    // 箭头的开始
    context.moveTo(x, y);
    // 箭头第一个拐点
    x = x+opts.height*1.5;
    y = y-opts.height*1.5;
    context.lineTo(x,y);
    // 箭头第二个拐点
    y = y+opts.height;
    context.lineTo(x,y);
    // 箭头第三个拐点
    x = x+opts.width;
    context.lineTo(x,y);
    // 箭头第四个拐点
    y = y-opts.height;
    context.lineTo(x,y);
    // 箭头第五个拐点
    x = x+opts.height*1.5;
    y = y+opts.height*1.5;
    context.lineTo(x,y);
    // 箭头第六个拐点
    x = x-opts.height*1.5;
    y = y+opts.height*1.5;
    context.lineTo(x,y);
    // 箭头第七个拐点
    y = y-opts.height;
    context.lineTo(x,y);
    // 箭头第八个拐点
    x = x-opts.width;
    context.lineTo(x,y);
    // 箭头第九个拐点
    y = y+opts.height;
    context.lineTo(x,y);
    // 绘制结束闭合回路
    context.closePath();

    // 设置边框颜色
    context.strokeStyle = option.strokeStyle;
    context.lineWidth = option.lineWidth;
    // 绘制
    context.stroke();

    // 返回重要点信息
    return this._getTwoWayArrowRowInfo(option);
};

// 获取横向双向箭头的信息
TopGraph.prototype._getTwoWayArrowRowInfo = function(option) {
    var point = option.point;
    var result = {
        start: {
            x: point.x,
            y: point.y,
        },
        end: {
            x: point.x,
            y: point.y,
        },
    };
    var opts = this.twoWayArrowOpts;
    result.end.x = point.x+opts.width+opts.height*2;
    return result;
};

// 纵向双向箭头
TopGraph.prototype._twoWayArrowCol = function(option) {
    var context = this.context;
    var point = option.point;
    var opts = this.twoWayArrowOpts;      // 双箭头的基本配置项
    var x = point.x;
    var y = point.y;
    context.beginPath();
    // 箭头的开始
    context.moveTo(x, y);
    // 箭头第一个拐点
    x = x+opts.height*1.5;
    y = y+opts.height*1.5;
    context.lineTo(x,y);
    // 箭头第二个拐点
    x = x-opts.height;
    context.lineTo(x,y);
    // 箭头第三个拐点
    y = y+opts.width;
    context.lineTo(x,y);
    // 箭头第四个拐点
    x = x+opts.height;
    context.lineTo(x,y);
    // 箭头第五个拐点
    x = x-opts.height*1.5;
    y = y+opts.height*1.5;
    context.lineTo(x,y);
    // 箭头第六个拐点
    x = x-opts.height*1.5;
    y = y-opts.height*1.5;
    context.lineTo(x,y);
    // 箭头第七个拐点
    x = x+opts.height;
    context.lineTo(x,y);
    // 箭头第八个拐点
    y = y-opts.width;
    context.lineTo(x,y);
    // 箭头第九个拐点
    x = x-opts.height;
    context.lineTo(x,y);
    // 绘制结束闭合回路
    context.closePath();

    // 设置边框颜色
    context.strokeStyle = option.strokeStyle;
    context.lineWidth = option.lineWidth;
    // 绘制
    context.stroke();

    // 返回信息
    return this._getTwoWayArrowColInfo(option);
};

// 获取纵向双向箭头的信息
TopGraph.prototype._getTwoWayArrowColInfo = function(option) {
    var point = option.point;
    var result = {
        start: {
            x: point.x,
            y: point.y,
        },
        end: {
            x: point.x,
            y: point.y,
        },
    };
    var opts = this.twoWayArrowOpts;
    result.end.y = point.y+opts.width+opts.height*2;
    return result;
};

// 绘制单向箭头
TopGraph.prototype.arrow = function(option) {
    var result;
    option = $.extend({}, this.base, option);
    option.event = 'arrow';
    switch(option.direct) {
        case 'down':
            result = this._arrowDown(option);
        break;
        default:
            result = this._arrowUp(option);
        break;
    }

    // 添加配置项到全局
    this._push(option);

    // 返回重要点的信息
    return result;
};

// 获取单向箭头的信息
TopGraph.prototype._getArrowInfo = function(option) {
    var result;
    switch(option.direct) {
        case 'down':
            result = this._getArrowDownInfo(option);
        break;
        default:
            result = this._getArrowUpInfo(option);
        break;
    }

    return result;
}


// 箭头再上方
TopGraph.prototype._arrowUp = function(option) {
    var context = this.context;
    var point = option.point;
    var opts = this.arrowOpts;      // 双箭头的基本配置项
    var x = point.x;
    var y = point.y;
    context.beginPath();
    // 箭头的开始
    context.moveTo(x, y);
    // 箭头第一个拐点
    x = x+opts.height*1.5;
    y = y+opts.height*1.5;
    context.lineTo(x, y);
    // 箭头的第二个拐点
    x = x-opts.height;
    context.lineTo(x, y);
    // 箭头第四个拐点
    y = y+opts.width;
    context.lineTo(x, y);
    // 箭头第四个拐点
    x = x-opts.height;
    context.lineTo(x, y);
    // 箭头第五个拐点
    y = y-opts.width;
    context.lineTo(x, y);
    // 箭头第六个拐点
    x = x-opts.height;
    context.lineTo(x, y);

    // 绘制结束闭合回路
    context.closePath();
    // 设置边框颜色
    context.strokeStyle = option.strokeStyle;
    context.lineWidth = option.lineWidth;
    // 绘制
    context.stroke();

    // 返回重要的点
    return this._getArrowUpInfo(option);
};

// 获取向上箭头的信息
TopGraph.prototype._getArrowUpInfo = function(option) {
    var point = option.point;
    var opts = this.arrowOpts;
    var result = {
        top: {
            x: point.x,
            y: point.y,
        },
        bottom: {
            x: point.x,
            y: point.y+opts.width+opts.height*1.5,
        }
    };
    return result;
};
// 箭头在下方
TopGraph.prototype._arrowDown = function(option) {
    var context = this.context;
    var point = option.point;
    var opts = this.arrowOpts;      // 双箭头的基本配置项
    var x = point.x-opts.height/2;
    var y = point.y;
    context.beginPath();
    // 箭头的开始
    context.moveTo(x, y);
    // 箭头第一个拐点
    x = x+opts.height;
    context.lineTo(x, y);
    // 箭头的第二个拐点
    y = y+opts.width;
    context.lineTo(x, y);
    // 箭头第四个拐点
    x = x+opts.height;
    context.lineTo(x, y);
    // 箭头第四个拐点
    x = x-opts.height*1.5;
    y = y+opts.height*1.5;
    context.lineTo(x, y);
    // 箭头第五个拐点
    x = x-opts.height*1.5;
    y = y-opts.height*1.5;
    context.lineTo(x, y);
    // 箭头第六个拐点
    x = x+opts.height;
    context.lineTo(x, y);

    // 绘制结束闭合回路
    context.closePath();
    // 设置边框颜色
    context.strokeStyle = option.strokeStyle;
    context.lineWidth = option.lineWidth;
    // 绘制
    context.stroke();

    // 返回重要的点
    return this._getArrowDownInfo(option);
};

// 获取向上箭头的信息
TopGraph.prototype._getArrowDownInfo = function(option) {
    var point = option.point;
    var opts = this.arrowOpts;
    var result = {
        top: {
            x: point.x,
            y: point.y,
        },
        bottom: {
            x: point.x,
            y: point.y+opts.width+opts.height*1.5,
        }
    };
    return result;
};


// 绘制矩形
TopGraph.prototype.rect = function(option) {
    var context = this.context;
    var point = option.point;
    option = $.extend({}, this.base, option);
    option.event = 'rect';
    // 开始绘制
    context.beginPath();
    context.rect(point.x, point.y, option.width, option.height);
    // 绘制结束闭合回路
    context.closePath();

    // 填充背景的颜色
    context.fillStyle = option.fillStyle;
    // 绘制矩形
    context.fill();
    
    // 绘制文字
    var textOpts = {
        point: {
            x: point.x+option.width/2,
            y: point.y+option.height/2,
        },
        text: option.text
    };
    this.text(textOpts);

    // 外边框的颜色
    context.strokeStyle = option.strokeStyle;
    context.stroke();

    // 配置项没有添加到全局配置项中
    this._push(option);

    // 返回重要的点信息(正方形的上,右,下,左的中点)
    return this._getRectInfo(option);
};

TopGraph.prototype._getRectInfo = function(option) {
    var point = option.point;
    var result = {
        top: {
            x: point.x+option.width/2,
            y: point.y,
        },
        right: {
            x: point.x+option.width,
            y: point.y+option.height,
        },
        bottom:{
            x: point.x+option.width/2,
            y: point.y+option.height,
        },
        left:{
            x: point.x,
            y: point.y+option.height/2,
        }
    };

    return result;
};

// 设置文字
TopGraph.prototype.setText = function(option) {
    var point = option.point;
    option = $.extend({}, this.base, option);
    option.event = 'setText';
    // 设置文本
    this.text({
        point: {
            x: point.x,
            y: point.y
        },
        text: option.text,
        font: option.font,
        color: option.color
    });

    // 配置项没有添加到全局配置项中
    this._push(option);
};

// 绘制文字
TopGraph.prototype.text = function(option) {
    option = $.extend({}, this.base, option);
    // option.event = 'text';

    this._formaterText(option);
    // 配置项没有添加到全局配置项中
    this._push(option);
}
// 对绘制的文字进行处理
TopGraph.prototype._formaterText = function(option) {
    var texts = option.text.split('&');
    var font = option.font;
    var startY = option.point.y-texts.length*font/2;
    for(var i=0; i<texts.length; i++) {
        var text = texts[i];
        var tmp = $.extend({}, option);
        tmp.text = texts[i];
        tmp.point.y = startY+font*i;
        this._centerText(tmp);
    }
}
// 绘制起始点向两边发散的文字
TopGraph.prototype._centerText = function(option) {
    var context = this.context;
    var point = option.point;
    var font = option.font;
    var x = point.x;
    var y = point.y;
    x = x-option.text.length*font/2;
    y = y+font/2;
    context.font = font+'px Verdana';
    context.fillStyle = option.color;
    context.lineWidth = 1;
    context.fillText(option.text, x, y);
}

// 绘制图片
TopGraph.prototype.drawImage = function(image, option) {
    var context = this.context;
    var point = option.point;
    context.drawImage(image, point.x, point.y, option.width, option.height);


    // 返回重要点的信息
    return this._getImageInfo(option);
};

// 获取电池重要点的信息
TopGraph.prototype._getImageInfo = function(option) {
    var point = option.point;
    var result = {
        pos: {  // 正极
            x: point.x+10,
            y: point.y+3,
        },
        neg: {  // 负极
            x: point.x+option.width-10,
            y: point.y+3,
        },
        top: {
            x: point.x+option.width/2,
            y: point.y,
        },
        right: {
            x: point.x+option.width,
            y: point.y+option.height/2,
        },
        bottom: {
            x: point.x+option.width/2,
            y: point.y+option.height,
        },
        left: {
            x: point.x,
            y: point.y+option.height/2,
        },
    };
    
    return result;
};

// 绘制电池
TopGraph.prototype.drawEle = function(option) {
    var point = option.point;
    var start = option.start;
    var end = option.end;
    var startY = start.y;
    var endY = end.y;
    option = $.extend({}, this.base, option);
    option.event = 'drawEle';
    var imageOpts = {
        point:{
            x: point.x,
            y: point.y,
        },
        width: option.width,
        height: option.height,
    };

    // 判断是否移动
    if(option.move) {
        if(option.y == startY) {
            option.y = endY;
            imageOpts.point.y = endY;
        }else{
            option.y = startY;
            imageOpts.point.y = startY;
        }
    }
    // 绘制图片
    var result = this.drawImage(this.eleImg, imageOpts);

    var textOpts = {
        point: {
            x: point.x+imageOpts.width/2+4,
            y: point.y+imageOpts.height+2,
        },
        font: 14,
        text: option.num+'#'
    }

    this.text(textOpts);

    // 配置项没有添加到全局配置项中
    this._push(option);

    // 返回重要点信息
    return result;
};

// 绘制电池组
TopGraph.prototype.drawEles = function(option) {
    var point = option.point;
    var x = point.x;
    var y = point.y;
    var width = this.canvas.width-x*2;
    var step = Math.floor(width/(option.num-1));
    var eleInfos = [];
    for(var i=0; i<option.num; i++) {
        // 绘制双向箭头
        var twoWayArrow = this.twoWayArrow({
            id: 'twoWayArrow'+(i+1),
            point: {
                x: x,
                y: y,
            },
            lineWidth: 1,
            strokeStyle: '#637DAB'
        });
        // 绘制电池
        var eleInfo = this.drawEle({
            id: 'ele'+(i+1),
            start: {
                x: x-25,
                y: twoWayArrow.end.y+8,
            },
            end: {
                x: x-25,
                y: twoWayArrow.end.y+10,
            },
            point: {
                x: x-25,
                y: twoWayArrow.end.y+8,
            },
            y: twoWayArrow.end.y+8,
            width: 50,
            height: 49,
            move: false,
            num: i+1,
        });
        eleInfos.push(eleInfo);
        x += step;
    }
    // console.log(eleInfos);
    // 绘制两个电池之间的线
    for(var i=1; i<eleInfos.length; i++) {
        var start = eleInfos[i-1].neg;
        var end  = eleInfos[i].pos;
        var lineOpts = {
            id: 'eleLine'+(i+1),
            start: start,
            end: end,
            lineWidth: 1,
            strokeStyle: '#000000'
        };
        this.drawLine(lineOpts);
    }

};

// 绘制整流器
TopGraph.prototype.drawRectifier = function(option) {
    var point = option.point;
    option = $.extend({}, this.base, option);
    option.event = 'drawRectifier';
    var imageOpts = {
        point:{
            x: point.x,
            y: point.y,
        },
        width: option.width,
        height: option.height,
        direct: 'down',
    };
    
    // 绘制图片
    var result = this.drawImage(this.rectifier, imageOpts);
    
    // 添加文字
    this.text({
        text: '整&流&器',
        point: {
            x: result.right.x+8,
            y: result.right.y
        }
    });

    var posNeg = {
        pos: {
            x: result.bottom.x-15,
            y: result.bottom.y+12
        },
        neg: {
            x: result.top.x-15,
            y: result.top.y
        }
    };
    if(imageOpts.direct = 'up') {
        posNeg = {
            neg: {
                x: result.bottom.x-15,
                y: result.bottom.y+12
            },
            pos: {
                x: result.top.x-15,
                y: result.top.y
            }
        };
    }
    // 添加正负极
    this.text({
        text: '-',
        point: posNeg.neg,
        font: 24
    });

    // 添加正负极
    this.text({
        text: '+',
        point: posNeg.pos,
        font: 24,
        color: '#FF0000'
    });

    // 配置项添加到全局配置项中
    this._push(option);

    // 返回重要点信息
    return result;
};

// 绘制用电负载
TopGraph.prototype.drawLoader = function(option) {
    var point = option.point;
    option = $.extend({}, this.base, option);
    option.event = 'drawLoader';
    var imageOpts = {
        point:{
            x: point.x,
            y: point.y,
        },
        width: option.width,
        height: option.height,
        direct: 'down',
    };
    
    // 绘制图片
    var result = this.drawImage(this.loader, imageOpts);
    
    // 添加文字
    this.text({
        text: '用&电&负&载',
        point: {
            x: result.right.x+8,
            y: result.right.y
        }
    });
    var posNeg = {
        pos: {
            x: result.bottom.x-15,
            y: result.bottom.y+12
        },
        neg: {
            x: result.top.x-15,
            y: result.top.y
        }
    };
    if(imageOpts.direct = 'up') {
        posNeg = {
            neg: {
                x: result.bottom.x-15,
                y: result.bottom.y+12
            },
            pos: {
                x: result.top.x-15,
                y: result.top.y
            }
        };
    }

    // 添加正负极
    this.text({
        text: '-',
        point: posNeg.neg,
        font: 24
    });

    // 添加正负极
    this.text({
        text: '+',
        point: posNeg.pos,
        font: 24,
        color: '#FF0000'
    });

    // 配置项没有添加到全局配置项中
    this._push(option);

    // 返回重要点信息
    return result;
};

// 绘制电池组
TopGraph.prototype.drawEleGroup = function(option) {
    var result;
    option = $.extend({}, this.base, option);
    option.event = 'drawEleGroup';
    switch(option.direct) {
        case 'down':
            result = this._drawEleGroupDown(option);
        break;
        default:
            result = this._drawEleGroupUp(option);
        break;
    }

    return result;
}

// 绘制正极在上的电池组
TopGraph.prototype._drawEleGroupUp = function(option) {
    var point = option.point;
    // 电池组1
    var image1 = {
        point:{
            x: point.x,
            y: point.y,
        },
        width: option.width,
        height: option.height,
    };
    // 绘制图片
    var image1Info = this.drawImage(this.eleImg, image1);

    // 绘制虚线
    var dotLine = {
        start: {
            x: image1Info.bottom.x,
            y: image1Info.bottom.y
        },
        end: {
            x: image1Info.bottom.x,
            y: image1Info.bottom.y+20
        }
    };

    // 绘制线条
    this.drawDotLine(dotLine);
    
    // 电池组2
    var image2 = {
        point:{
            x: dotLine.end.x-option.width/2,
            y: dotLine.end.y,
        },
        width: option.width,
        height: option.height,
    };
    // 绘制图片
    var image2Info = this.drawImage(this.eleImg, image2);

    // 添加文字
    this.text({
        text: '电&池&组',
        point: {
            x: image1Info.right.x+12,
            y: image1Info.bottom.y+10
        }
    });

    // 绘制正极
    this.text({
        text: '+',
        point: {
            x: image1Info.top.x-15,
            y: image1Info.top.y-4
        },
        font: 24,
        color: "#FF0000"
    });

    // 绘制负极
    this.text({
        text: '-',
        point: {
            x: image2Info.bottom.x-15,
            y: image2Info.bottom.y+20
        },
        font: 24
    });

    // 配置项添加到全局配置项中
    this._push(option);

    return {
        top: {
            x: image1Info.top.x,
            y: image1Info.top.y
        },
        bottom: {
            x: image2Info.bottom.x,
            y: image2Info.bottom.y
        }
    }
}

// 绘制正极在上的电池组
TopGraph.prototype._drawEleGroupDown = function(option) {
    var point = option.point;
    // 电池组1
    var image1 = {
        point:{
            x: point.x,
            y: point.y,
        },
        width: option.width,
        height: option.height,
    };
    // 绘制图片
    var image1Info = this.drawImage(this.eleImg, image1);

    // 绘制虚线
    var dotLine = {
        start: {
            x: image1Info.bottom.x,
            y: image1Info.bottom.y
        },
        end: {
            x: image1Info.bottom.x,
            y: image1Info.bottom.y+20
        }
    };

    // 绘制线条
    this.drawDotLine(dotLine);
    
    // 电池组2
    var image2 = {
        point:{
            x: dotLine.end.x-option.width/2,
            y: dotLine.end.y,
        },
        width: option.width,
        height: option.height,
    };
    // 绘制图片
    var image2Info = this.drawImage(this.eleImg, image2);

    // 添加文字
    this.text({
        text: '电&池&组',
        point: {
            x: image1Info.right.x+12,
            y: image1Info.bottom.y+10
        }
    });

    // 绘制负极
    this.text({
        text: '-',
        point: {
            x: image1Info.top.x-15,
            y: image1Info.top.y-4
        },
        font: 24
    });

    // 绘制正极
    this.text({
        text: '+',
        point: {
            x: image2Info.bottom.x-15,
            y: image2Info.bottom.y+20
        },
        font: 24,
        color: '#FF0000'
    });

    // 配置项添加到全局配置项中
    this._push(option);

    return {
        top: {
            x: image1Info.top.x,
            y: image1Info.top.y
        },
        bottom: {
            x: image2Info.bottom.x,
            y: image2Info.bottom.y
        }
    }
}

// 绘制线条
TopGraph.prototype.drawLine = function(option) {
    var context = this.context;
    var start = option.start;
    var end = option.end;
    option = $.extend({}, this.base, option);
    option.event = 'drawLine';
    context.beginPath();
    context.moveTo(start.x, start.y);
    context.lineTo(end.x, end.y);
    context.lineWidth = option.lineWidth;
    context.strokeStyle = option.strokeStyle;
    context.stroke();

    // 添加配置项到全局配置
    this._push(option);
};

// 绘制线条组
TopGraph.prototype.drawLines = function(option) {
    var points = option.points;
    option = $.extend({}, this.base, option);
    var base = {
        lineWidth: option.lineWidth,
        strokeStyle: option.strokeStyle,
    };
    // 遍历points
    for(var i=0; i<points.length; i++) {
        var point = points[i];
        var _option = $.extend({}, base, point);
        _option.id = option.id+i;
        this.drawLine(_option);
    }
};

// 绘制虚线
TopGraph.prototype.drawDotLine = function(option) {
    var context = this.context;
    var start = option.start;
    var end = option.end;
    option = $.extend({}, this.base, option);
    option.event = 'drawDotLine';
    context.setLineDash([2, 2]);
    context.beginPath();
    context.moveTo(start.x, start.y);
    context.lineTo(end.x, end.y);
    context.lineWidth = option.lineWidth;
    context.strokeStyle = option.strokeStyle;
    context.stroke();
    this.context.setLineDash([]);    // 恢复实线

    // 添加配置项到全局配置
    this._push(option);
}


// 绘制圆角矩形
TopGraph.prototype.roundRect = function(option) {
    var context = this.context;
    var point = option.point;
    var x = point.x;
    var y = point.y;
    var w = option.width;
    var h = option.height;
    var r = option.radius;
    option = $.extend({}, this.base, option);
    option.event = 'roundRect';
    // 设置圆角
    if (w < 2 * r) {r = w / 2;}
    if (h < 2 * r){ r = h / 2;}
    context.beginPath();
    context.moveTo(x+r, y);
    context.arcTo(x+w, y, x+w, y+h, r);
    context.arcTo(x+w, y+h, x, y+h, r);
    context.arcTo(x, y+h, x, y, r);
    context.arcTo(x, y, x+w, y, r);
    context.closePath();
    context.fillStyle = option.fillStyle;
    context.fill();

    var textOpts = {
        point: {
            x: x+w/2,
            y: y+h/2,
        },
        text: option.text,
    };
    this.text(textOpts);
    context.strokeStyle = option.strokeStyle;
    context.stroke();

    // 将配置项添加到全局配置中
    this._push(option);

    return this._getRectInfo(option);
};

// 绘制圆点
TopGraph.prototype.arc = function(option) {
    // console.log(option);
    var context = this.context;
    var point = option.point;
    option = $.extend({}, this.base, option);
    // 开始绘制
    context.beginPath();
    context.fillStyle = option.fillStyle;
    context.arc(point.x, point.y, option.radius,0,2*Math.PI);
    context.fill();

    // 返回点的重要信息
    return this._arcInfo(option);
};

// 绘制会移动的圆点
TopGraph.prototype.moveArc = function(option) {
    option = $.extend({}, this.base, option);
    option.event = 'moveArc';
    // 根据start和end点计算运动方向
    var start = option.start;
    var end = option.end;
    // 横向运动
    if(start.y == end.y) {
        // 向右移动
        if(start.x < end.x) {
            option.direct = "right";
        }else {
            option.direct = "left";
        }
    }else {
        // 向下运动
        if(start.y < end.y) {
            option.direct = "down";
        }else {
            option.direct = "up"; 
        }
    }
    // 选择运动方法
    switch(option.direct) {
        case 'left':
            this._moveArcLeft(option);
        break;
        case 'right':
            this._moveArcRight(option);
        break;
        case 'down':
            this._moveArcDown(option);
        break;
        default:        // 默认向上移动
            this._moveArcUp(option);
        break;
    }

    // 添加配置项到全局中
    this._push(option);
};
// 绘制向下移动的点
TopGraph.prototype._moveArcLeft = function(option) {
    var opts = this.moveArcOpts;
    var point = option.point;
    var start = option.start;
    var end = option.end;
    var x = point.x-opts.step;
    if(x<=end.x-opts.step) {
        option.point.x = start.x;
    }else {
        option.point.x = x; 
    }
    this.arc(option);
};

// 绘制向下移动的点
TopGraph.prototype._moveArcRight = function(option) {
    var opts = this.moveArcOpts;
    var point = option.point;
    var start = option.start;
    var end = option.end;
    var x = point.x+opts.step;
    if(x>=end.x+opts.step) {
        option.point.x = start.x;
    }else {
        option.point.x = x; 
    }
    this.arc(option);
};

// 绘制向上移动的点
TopGraph.prototype._moveArcUp = function(option) {
    var opts = this.moveArcOpts;
    var point = option.point;
    var start = option.start;
    var end = option.end;
    var y = point.y-opts.step;
    if(y<=end.y-opts.step) {
        option.point.y = start.y;
    }else {
        option.point.y = y; 
    }
    this.arc(option);
};

// 绘制向下移动的点
TopGraph.prototype._moveArcDown = function(option) {
    var opts = this.moveArcOpts;
    var point = option.point;
    var start = option.start;
    var end = option.end;
    var y = point.y+opts.step;
    if(y>=end.y+opts.step) {
        option.point.y = start.y;
    }else {
        option.point.y = y; 
    }
    this.arc(option);
};

// 获取圆圈的重要点信息
TopGraph.prototype._arcInfo = function(option) {
    var point = option.point;
    var radius = option.radius;
    var num = Math.SQRT2/2*radius;
    var result = {
        center: {
            x: point.x,
            y: point.y,
        },
        top: {
            x: point.x,
            y: point.y-radius
        },
        tright: {
            x: point.x+num,
            y: point.y-num, 
        },
        right: {
            x: point.x+radius,
            y: point.y,
        },
        rbottom: {
            x: point.x+num,
            y: point.y+num,
        },
        bottom: {
            x: point.x,
            y: point.y+radius,
        },
        bleft: {
            x: point.x-num,
            y: point.y+num,
        },
        left: {
            x: point.x-radius,
            y: point.y,
        },
        ltop: {
            x: point.x-num,
            y: point.y-num,
        }
    };

    return result;
};

// 绘制开关
TopGraph.prototype.switch = function(option) {
    var result;
    option = $.extend({}, this.base, option);
    option.event = 'switch';
    // 根据方向绘制内容
    switch(option.direct) {
        case 'left':
            result = this._switchLeft(option);
        break;
        default:
            result = this._switchDown(option);
        break;
    }

    // 添加配置项到全局配置项
    this._push(option);

    // 返回重要点信息
    return result;
};

// 获取开关的重要信息
TopGraph.prototype._getSwitchInfo = function(option) {
    var result;
    // 根据方向获取信息
    switch(option.direct) {
        case 'left':
            result = this._getSwitchRow(option);
        break;
        default:
            result = this._getSwitchCol(option);
        break;
    }
    // 返回重要点信息
    return result;
};

// 开关在下方
TopGraph.prototype._switchDown = function(option) {
    var point = option.point;
    var opts = this.switchOpts;
    var lineStyle = option.lineStyle;
    var arcStyle = option.arcStyle;
    // 线line1
    var line1 = {
        start: {
            x: point.x,
            y: point.y,
        },
        end: {
            x: point.x,
            y: point.y+opts.width,
        },
        lineWidth: lineStyle.lineWidth,
        strokeStyle: lineStyle.strokeStyle,
    };
    // 绘制线line1
    this.drawLine(line1);

    // 圆点arc1
    var arc1 = {
        point: {
            x: line1.end.x,
            y: line1.end.y+opts.radius,
        },
        radius: opts.radius,
        fillStyle: arcStyle.fillStyle,
        strokeStyle: arcStyle.strokeStyle
    };
    // 绘制圆点arc1
    var arc1Info = this.arc(arc1);

    // 圆点arc2
    var arc2 = {
        point: {
            x: point.x,
            y: point.y+opts.width+opts.space-opts.radius,
        },
        radius: opts.radius,
        fillStyle: arcStyle.fillStyle,
        strokeStyle: arcStyle.strokeStyle
    };
    // 绘制圆点arc2
    var arc2Info = this.arc(arc2);
    // 线line2
    var line2 = {
        start: {
            x: point.x,
            y: arc2Info.bottom.y,
        },
        end: {
            x: point.x,
            y: arc2Info.bottom.y+opts.width,
        },
        lineWidth: lineStyle.lineWidth,
        strokeStyle: lineStyle.strokeStyle,
    };
    // 绘制线line2
    this.drawLine(line2);

    // 线line3
    var line3;
    // 根据开关状态绘制开关
    switch(option.state) {
        case 'close':
            line3 = {
                start: {
                    x: arc2Info.tright.x,
                    y: arc2Info.tright.y,
                },
                end: {
                    x: arc1Info.rbottom.x,
                    y: arc1Info.rbottom.y
                },
                strokeStyle: lineStyle.strokeStyle,
                lineWidth: lineStyle.lineWidth,
            };
        break;
        default:
            line3 = {
                start: {
                    x: arc2Info.tright.x,
                    y: arc2Info.tright.y,
                },
                end: {
                    x: arc1Info.center.x+20,
                    y: arc1Info.center.y
                },
                strokeStyle: lineStyle.strokeStyle,
                lineWidth: lineStyle.lineWidth,
            };
        break;
    }
    // 绘制线line3
    this.drawLine(line3);
    
    // 返回重要点信息
    return this._getSwitchCol(option);
};

// 开关在左侧
TopGraph.prototype._switchLeft = function(option) {
    var point = option.point;
    var opts = this.switchOpts;
    var lineStyle = option.lineStyle;
    var arcStyle = option.arcStyle;
    var height = 20;
    // 线line1
    var line1 = {
        start: {
            x: point.x,
            y: point.y,
        },
        end: {
            x: point.x+opts.width,
            y: point.y,
        },
        lineWidth: lineStyle.lineWidth,
        strokeStyle: lineStyle.strokeStyle,
    };
    // 绘制线line1
    this.drawLine(line1);

    // 圆点arc1
    var arc1 = {
        point: {
            x: line1.end.x+opts.radius,
            y: line1.end.y,
        },
        radius: opts.radius,
        fillStyle: arcStyle.fillStyle,
        strokeStyle: arcStyle.strokeStyle
    };
    // 绘制圆点arc1
    var arc1Info = this.arc(arc1);

    // 圆点arc2
    var arc2 = {
        point: {
            x: point.x+opts.width+opts.space-opts.radius,
            y: point.y,
        },
        radius: opts.radius,
        fillStyle: arcStyle.fillStyle,
        strokeStyle: arcStyle.strokeStyle
    };
    // 绘制圆点arc2
    var arc2Info = this.arc(arc2);

    // 线line2
    var line2 = {
        start: {
            x: arc2Info.right.x,
            y: arc2Info.right.y,
        },
        end: {
            x: arc2Info.right.x+opts.width,
            y: arc2Info.right.y,
        },
        lineWidth: lineStyle.lineWidth,
        strokeStyle: lineStyle.strokeStyle,
    };
    // 绘制线line2
    this.drawLine(line2);

    // 线line3
    var line3;
    // 根据开关状态绘制开关
    switch(option.state) {
        case 'close':
            line3 = {
                start: {
                    x: arc1Info.right.x,
                    y: arc1Info.right.y,
                },
                end: {
                    x: arc2Info.ltop.x+3,
                    y: arc2Info.ltop.y
                },
                strokeStyle: lineStyle.strokeStyle,
                lineWidth: lineStyle.lineWidth,
            };
        break;
        default:
            line3 = {
                start: {
                    x: arc1Info.right.x,
                    y: arc1Info.right.y,
                },
                end: {
                    x: arc2Info.center.x,
                    y: arc2Info.center.y-height
                },
                strokeStyle: lineStyle.strokeStyle,
                lineWidth: lineStyle.lineWidth,
            };
        break;
    }
    // 清理开关所在的位置
    this.clearRect(line1.start.x, line1.start.y-height, Math.abs(line1.start.x-line2.end.x), height*2);

    // 绘制线line1
    this.drawLine(line1);

    // 绘制圆点arc1
    var arc1Info = this.arc(arc1);

    // 绘制圆点arc2
    var arc2Info = this.arc(arc2);

    // 绘制线line3
    this.drawLine(line3);

    // 绘制点图
    if(option.state != 'close') {
        this.drawDotLine({
            start: {
                x: line3.end.x,
                y: line3.end.y,
            },
            end: {
                x: arc2Info.top.x,
                y: arc2Info.top.y
            },
            fillStyle: '#FF0000',
            strokeStyle: '#FF0000',
            lineWidth: lineStyle.lineWidth,
        });
    }

    // 绘制线line2
    this.drawLine(line2);

    // 返回重要点信息
    return this._getSwitchRow(option);
}; 

// 获取开关的重要点
TopGraph.prototype._getSwitchCol = function(option) {
    var point = option.point;
    var opts = this.switchOpts;
    var result = {
        top: {
            x: point.x,
            y: point.y,
        },
        bottom: {
            x: point.x,
            y: point.y+opts.width*2+opts.space,
        }
    };

    return result;
};

// 获取开关的重要点
TopGraph.prototype._getSwitchRow = function(option) {
    var point = option.point;
    var opts = this.switchOpts;
    var result = {
        left: {
            x: point.x,
            y: point.y,
        },
        right: {
            x: point.x+opts.width*2+opts.space,
            y: point.y,
        }
    };

    return result;
};

// 绘制二极管
TopGraph.prototype.diode = function(option) {
    var result;
    option = $.extend({}, this.base, option);
    option.event = 'diode';
    switch(option.direct) {
        default:
            result = this._diodeUp(option);
        break;
    }

    // 添加配置项到全局配置项
    this._push(option);

    // 返回重要点信息
    return result;
};
// 获取二极管重要点信息
TopGraph.prototype._getDiodeInfo = function(option) {
    var result;
    switch(option.direct) {
        default:
            result = this._getDiodeCol(option);
        break;
    }

    // 返回重要点信息
    return result;
};
// 向上的二极管
TopGraph.prototype._diodeUp = function(option) {
    var context = this.context;
    var point = option.point;
    var opts = this.diodeOpts;
    var ht = Math.sqrt(3)*opts.width/2;
    // 绘制上方的横线
    context.beginPath();
    context.moveTo(point.x-opts.width/2, point.y);
    context.lineTo(point.x+opts.width/2, point.y);
    // 设置样式
    context.strokeStyle = option.strokeStyle;
    // 绘制
    context.stroke();

    // 开始绘制三角形
    context.beginPath();
    context.moveTo(point.x, point.y);
    context.lineTo(point.x-opts.width/2, point.y+ht);
    context.lineTo(point.x+opts.width/2, point.y+ht);
    // 闭合回路
    context.closePath();
    // 设置样式
    context.fillStyle = option.fillStyle;
    // 绘制
    context.fill();

    // 返回重要点信息
    return this._getDiodeCol(option);
};

// 获取二极管的信息
TopGraph.prototype._getDiodeCol = function(option) {
    var point = option.point;
    var opts = this.diodeOpts;
    var ht = Math.sqrt(3)*opts.width/2;
    var result = {
        top: {
            x: point.x,
            y: point.y,
        },
        bottom: {
            x: point.x,
            y: point.y+ht,
        }
    };

    return result;
};
// 根据id正则匹配删除元素
TopGraph.prototype.del = function(reg) {
    var options = this.options;
    for(var i=0; i<options.length; i++) {
        var option = options[i];
        if(reg.test(option.id)) {
            this.options.splice(i, 1);
            i=0;
        }
    }
};

TopGraph.prototype.clearRect = function(x, y, width, height) {
    var context = this.context;
    context.clearRect(x, y, width, height);
};