var a, b, line;
window.onload = function() {
var qcanvas = new Qcanvas({
id: 'qcanvas',
width: 500,
height: 500,
});
a = qcanvas.arc({
start: [50, 50],
r: 10,
sAngle: 0,
eAngle: 360,
fillColor: '#ffff00',
borderColor: '#000'
})
b = qcanvas.arc({
start: [200, 200],
r: 10,
sAngle: 0,
eAngle: 360,
fillColor: '#c3c3c3',
borderColor: '#000'
})
var caleHandler1 = function() {
if (typeof this.caleTime1 == 'undefined' ||
(typeof this.caleTime1 !== 'undefined') &&
((new Date()).getTime() - this.caleTime1 > 1000)
) {
var start = this.start();
var end = this.end();
var returnHandler1 = (function() {
//A
// |
//h1 \ h2
// ↓
// B
if (start[0] < end[0] && start[1] <= end[1]) {
//h1: [Math.abs(start[0] - end[0])*0.25+start[0],Math.abs(start[1] - end[1])*0.75+start[1]];
//h2: [Math.abs(start[0] - end[0])*0.75+start[0],Math.abs(start[1] - end[1])*0.25+start[1]];
return [Math.abs(start[0] - end[0]) * 0.25 + start[0], Math.abs(start[1] - end[1]) * 0.75 + start[1]];
}
// A
// |
//h2/h1
// ↓
// B
if (start[0] >= end[0] && start[1] <= end[1]) {
//h1:[Math.abs(start[0] - end[0])*0.75+end[0],Math.abs(start[1] - end[1])*0.75+start[1]]
//h2:[Math.abs(start[0] - end[0])*0.25+end[0],Math.abs(start[1] - end[1])*0.25+start[1]]
return [Math.abs(start[0] - end[0]) * 0.75 + end[0], Math.abs(start[1] - end[1]) * 0.75 + start[1]]
}
// B
// ↑
//h1\h2
// |
// A
if (start[0] > end[0] && start[1] >= end[1]) {
//h1:[Math.abs(start[0] - end[0])*0.25+end[0],Math.abs(start[1] - end[1])*0.75+end[1]];
//h2:[Math.abs(start[0] - end[0])*0.75+end[0],Math.abs(start[1] - end[1])*0.25+end[1]];
return [Math.abs(start[0] - end[0]) * 0.25 + end[0], Math.abs(start[1] - end[1]) * 0.75 + end[1]];
}
// B
// ↑
// h2/h1
// |
// A
if (start[0] <= end[0] && start[1] >= end[1]) {
//h1:[Math.abs(start[0] - end[0])*0.75+start[0],Math.abs(start[1] - end[1])*0.75+end[1]];
//h2:[Math.abs(start[0] - end[0])*0.25+start[0],Math.abs(start[1] - end[1])*0.25+end[1]];
return [Math.abs(start[0] - end[0]) * 0.75 + start[0], Math.abs(start[1] - end[1]) * 0.75 + end[1]];
}
})()
// var x = Math.abs(start[0] - end[0])*(start[0] > end[0]?0.75:0.25)+Math.min.call(null,start[0],end[0]);
// var y = Math.abs(start[1] - end[1])*0.75+Math.min.call(null,start[1],end[1]);
// console.log(x,y);
this.oldHandler1 = returnHandler1;
this.caleTime1 = (new Date()).getTime();
console.log('1隔段时间再执行 降低执行频率')
return this.oldHandler1;
} else {
return this.oldHandler1;
}
// return [50,80];
}
var caleHandler2 = function() {
if (typeof this.caleTime2 == 'undefined' ||
(typeof this.caleTime2 !== 'undefined') &&
((new Date()).getTime() - this.caleTime2 > 1000)
) {
var start = this.start();
var end = this.end();
var returnHandler2 = (function() {
//A
// |
//h1 \ h2
// ↓
// B
if (start[0] < end[0] && start[1] <= end[1]) {
//h1: [Math.abs(start[0] - end[0])*0.25+start[0],Math.abs(start[1] - end[1])*0.75+start[1]];
//h2: [Math.abs(start[0] - end[0])*0.75+start[0],Math.abs(start[1] - end[1])*0.25+start[1]];
return [Math.abs(start[0] - end[0]) * 0.75 + start[0], Math.abs(start[1] - end[1]) * 0.25 + start[1]];
}
// A
// |
//h2/h1
// ↓
// B
if (start[0] >= end[0] && start[1] <= end[1]) {
//h1:[Math.abs(start[0] - end[0])*0.75+end[0],Math.abs(start[1] - end[1])*0.75+start[1]]
//h2:[Math.abs(start[0] - end[0])*0.25+end[0],Math.abs(start[1] - end[1])*0.25+start[1]]
return [Math.abs(start[0] - end[0]) * 0.25 + end[0], Math.abs(start[1] - end[1]) * 0.25 + start[1]]
}
// B
// ↑
//h1\h2
// |
// A
if (start[0] > end[0] && start[1] >= end[1]) {
//h1:[Math.abs(start[0] - end[0])*0.25+end[0],Math.abs(start[1] - end[1])*0.75+end[1]];
//h2:[Math.abs(start[0] - end[0])*0.75+end[0],Math.abs(start[1] - end[1])*0.25+end[1]];
return [Math.abs(start[0] - end[0]) * 0.75 + end[0], Math.abs(start[1] - end[1]) * 0.25 + end[1]];
}
// B
// ↑
// h2/h1
// |
// A
if (start[0] <= end[0] && start[1] >= end[1]) {
//h1:[Math.abs(start[0] - end[0])*0.75+start[0],Math.abs(start[1] - end[1])*0.75+end[1]];
//h2:[Math.abs(start[0] - end[0])*0.25+start[0],Math.abs(start[1] - end[1])*0.25+end[1]];
return [Math.abs(start[0] - end[0]) * 0.25 + start[0], Math.abs(start[1] - end[1]) * 0.25 + end[1]];
}
})()
// var x = Math.abs(start[0] - end[0])*(start[0] > end[0]?0.25:0.75)+Math.min.call(null,start[0],end[0]);
// var y = Math.abs(start[1] - end[1])*0.25+Math.min.call(null,start[1],end[1]);
// console.log(x,y);
this.oldHandler2 = returnHandler2;
this.caleTime2 = (new Date()).getTime();
console.log('隔段时间再执行 降低执行频率')
return this.oldHandler2;
} else {
return this.oldHandler2;
}
}
var line = qcanvas.bezierCurve({
start: function() { return a.start },
handler1: caleHandler1,
handler2: caleHandler2,
end: function() { return b.start },
width: 1,
like: '->',
color: 'red',
drag: true,
withText: '我是个三次曲线',
pointerEvent: 'none',
// handlerShow:true
})
}