// 两个元素之间折线 可以拆解为三段直线连接起来了
/*
A---|
|
|---B
*/
var a, b, line;
window.onload = function() {
var resetHandlerPosition = function() {
var start = line2.start();
var end = line2.end();
var sign = start[1] - end[1];
var dis = Math.abs(end[1] - start[1]);
var y = sign <= 0 ? start[1] + dis * 0.8 : end[1] + dis * 0.2
// console.log(start[0]-end[0]);
// return [x,end[0]];
h_handler.setStart([end[0] - 1, y]).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[0] - a.start[0]) / (a.start[0] - b.start[0]))
}
}
});
a = qcanvas.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.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] + 5, a.start[1]],
[b.start[0] - 5, b.start[1]]
];
} else {
// B
// ↑
//h1 / h2
// |
//A
return [
[a.start[0] + 5, b.start[1]],
[b.start[0] - 5, a.start[1]]
]
}
} else {
//B在左 A在右
if (b.start[1] <= a.start[1]) {
// B
// ↑
//h1 \ h2
// |
// A
return [
[b.start[0] + 5, b.start[1]],
[a.start[0] - 5, a.start[1]]
]
} else {
// A
// |
//h1 / h2
// ↓
//B
return [
[b.start[0] + 5, a.start[1]],
[a.start[0] - 5, b.start[1]]
];
}
}
}
range = f();
}
create_range();
//生成三条直线的坐标
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.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.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.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,
})
var getStart = (function() {
var start = line2.start();
var end = line2.end();
var sign = start[1] - end[1];
var dis = Math.abs(end[1] - start[1]);
var y = sign <= 0 ? start[1] + dis * 0.8 : end[1] + dis * 0.2
// console.log(start[0]-end[0]);
return [end[0] - 1, y];
})()
h_handler = qcanvas.text({
text: '=',
color: 'red',
textAlign: 'center',
textBaseline: 'middle',
fontSize: '26px',
start: getStart,
degree: 90,
drag: 'horizontal',
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[0] - a.start[0]) / (a.start[0] - b.start[0]))
}
},
mouseup: function() {
resetHandlerPosition();
}
})
qcanvas.raiseToTop(h_handler);
}