jsmind源码初探

先把项目跑起 

在<script>里面引入  jsmind.js  <link>里面引入样式

<link type="text/css" rel="stylesheet" href="../style/jsmind.css" /> <script type="text/javascript" src="../js/jsmind.js"></script> <script type="text/javascript" src="../js/jsmind.draggable.js"></script>

var mind = {
    "format":"node_array",
    "data":[]
};

var options = {
    container:'jsmind_container',
    editable:false,
    support_html : true,// 可以实现对节点的div样式控制 与显示
    mode :'side',
    theme:'primary',
    view: {
        // engine: 'canvas',
        hmargin: 150,        // 思维导图距容器外框的最小水平距离
        vmargin: 100,         // 思维导图距容器外框的最小垂直距离
        line_width: 2,       // 思维导图线条的粗细
        line_color: '#f00'   // 思维导图线条的颜色
    },
    layout: {
        hspace: 50,          // 节点之间的水平间距
        vspace: 50,          // 节点之间的垂直间距
        pspace: 25           // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
    }
};
this._jm = jsMind.show(options,mind);

draw_line:function(pin,pout,offset,canvas_ctx){
    var ctx = canvas_ctx || this.canvas_ctx;
    ctx.strokeStyle = '#aaa';
    ctx.lineWidth = '1';
    // ctx.lineCap = 'round';

    jm.util.canvas.lineto(
        ctx,
        pin.x + offset.x,
        pin.y + offset.y,
        pout.x + offset.x,
        pout.y + offset.y);
},

 

划线函数  调取了unit.canvas对象里面的

lineto : function(ctx,x1,y1,x2,y2){
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x1,y2);//  新增
    ctx.lineTo(x2,y2);
    ctx.stroke();
    ctx.setLineDash([5,10]);// 新增
},

修改后可实现 折线 虚线效果

倾斜则是通过控制不同dom的css 实现