// 两个元素之间折线 可以拆解为三段直线连接起来了
/*
A---|
|
|---B
*/
var a,b,line;
window.onload = function(){
var resetHandlerPosition = function(){
var start = line2.start();
var end = line2.end();
var sign = start[0]-end[0];
var dis = Math.abs(end[0]-start[0]);
var x = sign<=0?start[0]+dis*0.8:end[0]+dis*0.2
// console.log(start[0]-end[0]);
// return [x,end[1]];
// h_handler.setStart(line2.end()).setDisplay('block');
h_handler.setStart([x,end[1]+1]).setDisplay('block');
}
var qcanvas = new Qcanvas({
id:'qcanvas',
width:500,
height:500,
mouseup:function(){
resetHandlerPosition();
create_range();
},
mousemove:function(){
if(qcanvas.dragAim !== null && qcanvas.dragAim.id ==h_handler.id){
//重新计算line2的x坐标到起点的的距离点整个宽度的比例
percent = Math.abs((h_handler.start[1]-a.start[1])/(a.start[1] - b.start[1]))
}
}
});
a = qcanvas.qarc.arc({
start:[50,50],
r:10,
sAngle:0,
eAngle:360,
fillColor:'#ffff00',
borderColor:'#000',
mousedown:function(){
h_handler.setDisplay('none')
},
mouseup:function(){
resetHandlerPosition();
create_range();
}
})
b = qcanvas.qarc.arc({
start:[200,200],
r:10,
sAngle:0,
eAngle:360,
fillColor:'#c3c3c3',
borderColor:'#000',
mousedown:function(){
h_handler.setDisplay('none')
},
mouseup:function(){
resetHandlerPosition();
create_range();
}
})
var percent = 0.8;
var range = [];
var h_handler = {};
//句柄划动限制区域
var create_range = function(){
var f = function(){
//A在左 B在右
if(a.start[0] <= b.start[0]){
if(a.start[1] <= b.start[1]){
//A
// |
//h1 \ h2
// ↓
// B
return [[a.start[0],a.start[1]+5],[b.start[0],b.start[1]-5]];
}else{
// B
// ↑
//h1 / h2
// |
//A
return [[a.start[0],b.start[1]+5],[b.start[0]-5,a.start[1]-5]]
}
}else{
//B在左 A在右
if(b.start[1] <= a.start[1]){
// B
// ↑
//h1 \ h2
// |
// A
return [[b.start[0],b.start[1]+5],[a.start[0],a.start[1]-5]]
}else{
// A
// |
//h1 / h2
// ↓
//B
return [[b.start[0],a.start[1]+5],[a.start[0],b.start[1]-5]];
}
}
}
range = f();
}
create_range();
//生成三条直线的坐标
var caleHandler1 = function(a,b){
var start = a.start;
var end = b.start;
//模向模式
return {
'l1':function(){return [start,[start[0],(end[1]-start[1])*percent+start[1]]]},
'l2':function(){return [[start[0],(end[1]-start[1])*percent+start[1]],[end[0],(end[1]-start[1])*percent+start[1]]]},
'l3':function(){return [[end[0],(end[1]-start[1])*percent+start[1]],end]}
}
// //A
// // |
// //h1 \ h2
// // ↓
// // B
// // 或
// // A
// // |
// //h2/h1
// // ↓
// // B
// if(start[1]<=end[1]){
// // 竖向模式
// 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]}
// }
// }else{
// // B
// // ↑
// //h1\h2
// // |
// // A
// //或
// // B
// // ↑
// // h2/h1
// // |
// // A
// //竖向模式
// 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]}
// }
// }
}
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,
color:"#000"
})
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',
color:"#000"
})
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,
color:"#000"
})
var getStart = (function(){
var start = line2.start();
var end = line2.end();
var sign = start[0]-end[0];
var dis = Math.abs(end[0]-start[0]);
var x = sign<=0?start[0]+dis*0.8:end[0]+dis*0.2
// console.log(start[0]-end[0]);
return [x,end[1]+1];
})()
h_handler = qcanvas.qtext.text({
text:'=',
color:'red',
textAlign:'center',
textBaseline:'middle',
fontSize:'24px',
start:getStart,
drag:'vertical',
// degree:45,
dragRange:function(){return range},
// mouseout:function(){
// qcanvas.dragAim =null;
// },
mousemove:function(){
if(qcanvas.dragAim !== null && qcanvas.dragAim.id ==this.id){
//重新计算line2的x坐标到起点的的距离点整个宽度的比例
percent = Math.abs((this.start[1]-a.start[1])/(a.start[1] - b.start[1]))
}
},
mouseup:function(){
resetHandlerPosition();
}
})
qcanvas.raiseToTop(h_handler);
}