var qcanvas = new Qcanvas({
id: 'qcanvas',
width: 300,
height: 200,
mousedown:function(e){
console.log(e);
console.log('canvas mousedown');
},
mousemove:function(){
console.log('canvas mousemove');
},
mouseup:function(){
console.log('canvas mouseup');
},
mouseout:function(){
console.log('canvas mouseout');
}
});
var layer = qcanvas.layer();
var line1 = qcanvas.line({
start: function() { return [100, 50]; },
end: [50, 150],
color: 'red',
like: '-',
withText: '可拖动',
drag: 'vertical',
mouseout: function(e, position) {
console.log(e);
console.log('line1 mouseout');
}
});
var line2 = qcanvas.line({
start:function(){return [150,50];},
end:[0,20],
color:'blue',
like:'-',
withText:'可拖动',
mousemove:function(){
// console.log('dddd');
}
// drag:false
});
var line3 = qcanvas.line({
start:function(){return [30,50];},
end:[150,60],
width:1,
like:'->',
color:'gray',
withText:'line3',
drag:false
});
layer.push(line3);
var line4 = qcanvas.line({
start:function(){return [100,123];},
end:[150,180],
width:1,
like:'-->',
color:'gray',
withText:'line4',
withTextAlign:'left',
drag:false
});
var line5 = qcanvas.line({
start:[250,50],
end:[200,200],
width:1,
like:'<-->',
color:'gray',
withText:'虚线双向箭头',
withTextAlign:'left',
// drag:false
});
var line6 = qcanvas.line({
start:[120,50],
end:[140,200],
width:1,
like:'<->',
color:'blue',
withText:'实线双向箭头',
withTextAlign:'left',
// drag:false
});
var line6 = qcanvas.line({
start:[50,50],
end:[200,200],
width:1,
like:'<-',
color:'red',
withText:'实线单向箭头',
withTextAlign:'left',
// drag:false
});
var line6 = qcanvas.line({
start:[100,50],
end:[200,220],
width:1,
like:'<--',
color:'red',
withText:'虚线单向箭头',
withTextAlign:'left',
});