// 两个元素之间折线 可以拆解为三段直线连接起来了
/*
A---|
    |
    |---B
*/


var a,b,line;
window.onload = function(){
    var qcanvas = new Qcanvas({
        id:'qcanvas',
        width:500,
        height:500,
    });

    a = qcanvas.qarc.arc({
        start:[50,50],
        r:10,
        sAngle:0,
        eAngle:360,
        fillColor:'#ffff00',
        borderColor:'#000'
    })

    b = qcanvas.qarc.arc({
        start:[200,200],
        r:10,
        sAngle:0,
        eAngle:360,
        fillColor:'#c3c3c3',
        borderColor:'#000'
    })

    var percent = 0.2;
   
   //生成三条直线的坐标
    var caleHandler1 = function(a,b){ 
 

            var start = a.start;
            var end = b.start;  
        // 竖向模式
                    return {
                        'l1':function(){return [start,[(end[0]-start[0])*percent+start[0],start[1]]]},
                        'l2':function(){return [[(end[0]-start[0])*percent+start[0],start[1]],[(end[0]-start[0])*percent+start[0],end[1]]]},
                        'l3':function(){return [[(end[0]-start[0])*percent+start[0],end[1]],end]}
                    }
                // //A
                // // |
                // //h1 \ h2
                // //   ↓
                // //   B
                // // 或
                // //  A
                // //  |
                // //h2/h1
                // // ↓
                // // B
                // if(start[1]<=end[1]){ 

                //     //模向模式
                //     // return {
                //     //     'l1':function(){return [start,[start[0],(end[1]-start[1])*0.5+start[1]]]},
                //     //     'l2':function(){return [[start[0],(end[1]-start[1])*0.5+start[1]],[end[0],(end[1]-start[1])*0.5+start[1]]]},
                //     //     'l3':function(){return [[end[0],(end[1]-start[1])*0.5+start[1]],end]}
                //     // }

                //     // 竖向模式
                //     return {
                //         'l1':function(){return [start,[(end[0]-start[0])*percent+start[0],start[1]]]},
                //         'l2':function(){return [[(end[0]-start[0])*percent+start[0],start[1]],[(end[0]-start[0])*percent+start[0],end[1]]]},
                //         'l3':function(){return [[(end[0]-start[0])*percent+start[0],end[1]],end]}
                //     }

                // } 

                // // B
                // // ↑
                // //h1\h2
                // //  |
                // //  A
                // //或
                // //   B
                // //   ↑
                // // h2/h1
                // //  |
                // //  A
                // if(start[1]>=end[1]){
                    
                //     //模向模式
                //     // return {
                //     //     'l1':function(){return [start,[start[0],(start[1]-end[1])*percent+end[1]]]},
                //     //     'l2':function(){return [[start[0],(start[1]-end[1])*percent+end[1]],[end[0],(start[1]-end[1])*percent+end[1]]]},
                //     //     'l3':function(){return [[end[0],(start[1]-end[1])*percent+end[1]],end]}
                //     // }

                //     //竖向模式
                //     return {
                //         'l1':function(){return [start,[(start[0]-end[0])*percent+end[0],start[1]]]},
                //         'l2':function(){return [[(start[0]-end[0])*percent+end[0],start[1]],[(start[0]-end[0])*percent+end[0],end[1]]]},
                //         'l3':function(){return [[(start[0]-end[0])*percent+end[0],end[1]],end]}
                //     }

                // }
 
 
 
            
    } 

    
    var tmp = null;
    var line1 = qcanvas.qline.line({
        start:function(){
            var points = tmp === null?caleHandler1(a,b):tmp;
            var t = points['l1']();
            return t[0];
        },
        end:function(){
            var points = tmp === null?caleHandler1(a,b):tmp;
            var t = points['l1']();
            return t[1];
        },
        pointerEvent:'none',
        width:1,
    })

    

    var line2 = qcanvas.qline.line({
        start:function(){
             var points = tmp === null?caleHandler1(a,b):tmp;
            var t = points['l2']();
            return t[0];
        },
        end:function(){
            var points = tmp === null?caleHandler1(a,b):tmp;
            var t = points['l2']();
            return t[1];
        },
        pointerEvent:'none',
        width:1,
        withText:'ddd', 
    })

    



    var line3 = qcanvas.qline.line({
        start:function(){
             var points = tmp === null?caleHandler1(a,b):tmp;
            var t = points['l3']();
            return t[0];
        },
        end:function(){
             var points = tmp === null?caleHandler1(a,b):tmp;
            var t = points['l3']();
            return t[1];
        },
        like:'->',
        pointerEvent:'none',
        width:1,
    }) 

  
}