window.onload = function(){
var h1,h2,h3,h4
var qcanvas = new Qcanvas({
id:'qcanvas',
width:500,
height:500,
mouseup:handleMouseup
});
var handleMouseup = function(){
var point = rect.polyPoints();
h1.setStart([point[0].x-5,point[0].y-5]).setDisplay('block');
h2.setStart([point[1].x-5,point[1].y-5]).setDisplay('block')
h3.setStart([point[2].x-5,point[2].y-5]).setDisplay('block')
h4.setStart([point[3].x-5,point[3].y-5]).setDisplay('block')
}
var rect = qcanvas.qrect.rect({
start:[50,50],
degree:0,
mousedown:function(){
h1.setDisplay('none');
h2.setDisplay('none')
h3.setDisplay('none')
h4.setDisplay('none')
},
mouseup:handleMouseup
})
var h1Move = function(){
//影响宽 高 位置
var point = rect.polyPoints();
var center = this.centerPoints();
var pos = [this.start[0]+5,this.start[1]+5];
var width = point[2].x - center.x;
var height = point[2].y - center.y;
rect.setStart(pos).setWidth(width).setHeight(height)
h2.setStart([point[1].x-5,point[1].y-5])
h4.setStart([point[3].x-5,point[3].y-5])
}
var h2Move = function(){
//影响宽 高 位置y
var point = rect.polyPoints();
var pos = [this.start[0]+5,this.start[1]+5];
var width = pos[0] - rect.start[0];
var height = point[2].y - pos[1];
rect.setStart([rect.start[0],pos[1]]).setWidth(width).setHeight(height)
h1.setStart([point[0].x-5,point[0].y-5]);
h3.setStart([point[2].x-5,point[2].y-5])
}
var h3Move = function(){
//影响宽 高
var point = rect.polyPoints();
// var center = this.centerPoints();
var pos = [this.start[0]+5,this.start[1]+5];
// console.log(start);
var width = pos[0] - rect.start[0];
var height = pos[1] - rect.start[1];
rect.setWidth(width).setHeight(height)
// setTimeout(function(){
h2.setStart([point[1].x-5,point[1].y-5])
h4.setStart([point[3].x-5,point[3].y-5])
// },200)
}
var h4Move = function(){
//影响宽 高 位置x
var point = rect.polyPoints();
// var center = this.centerPoints();
var pos = [this.start[0]+5,this.start[1]+5];
// console.log(start);
var width = point[1].x - pos[0];
var height = pos[1] - rect.start[1];
rect.setStart([pos[0],rect.start[1]]).setWidth(width).setHeight(height)
// setTimeout(function(){
h1.setStart([point[0].x-5,point[0].y-5]);
h3.setStart([point[2].x-5,point[2].y-5])
// },200)
}
var createHandler = function(){
var point = rect.polyPoints();
h1 = qcanvas.qrect.rect({
start:(function(){
var point = rect.polyPoints();
return [point[0].x-5,point[0].y-5]
})(),
degree:rect.degree,
width:10,
height:10,
borderColor:'red',
fillColor:'',
disCenter:0, //距大矩形中心点距离
dragRange:[],
mousedown:function(){
point = rect.polyPoints();
//对拖动区域做限制
this.dragRange = [
[0,0],
[
rect.start[0]+rect.width-20,
rect.start[1]+rect.height-20
]
]
},
mousemove:function(e,pos){
if(qcanvas.dragAim !== null){
h1Move.call(this);
}
},
mouseup:handleMouseup
})
h2= qcanvas.qrect.rect({
start:(function(){
var point = rect.polyPoints();
return [point[1].x-5,point[1].y-5]
// return [rect.start[0]+rect.width-5,rect.start[1]-5]
})(),
degree:rect.degree,
width:10,
height:10,
borderColor:'red',
fillColor:'',
mousedown:function(){
point = rect.polyPoints();
//对拖动区域做限制
this.dragRange = [
[rect.start[0]+10,0],
[
qcanvas.stage.width-50,
rect.start[1]+rect.height-20
]
]
},
mousemove:function(e,pos){
if(qcanvas.dragAim !== null){
h2Move.call(this);
}
},
mouseup:handleMouseup
})
h3= qcanvas.qrect.rect({
start:(function(){
var point = rect.polyPoints();
return [point[2].x-5,point[2].y-5]
// return [rect.start[0]+rect.width-5,rect.start[1]+rect.height-5]
})(),
degree:rect.degree,
width:10,
height:10,
borderColor:'red',
fillColor:'',
mousedown:function(){
point = rect.polyPoints();
//对拖动区域做限制
this.dragRange = [
[rect.start[0]+10,rect.start[1]+10],
[
qcanvas.stage.width-50,
qcanvas.stage.height-50,
]
]
},
mousemove:function(e,pos){
if(qcanvas.dragAim !== null){
h3Move.call(this);
}
},
mouseup:handleMouseup
})
h4= qcanvas.qrect.rect({
start:(function(){
var point = rect.polyPoints();
return [point[3].x-5,point[3].y-5]
// return [rect.start[0]-5,rect.start[1]+rect.height-5]
})(),
degree:rect.degree,
width:10,
height:10,
borderColor:'red',
fillColor:'',
mousedown:function(){
point = rect.polyPoints();
//对拖动区域做限制
this.dragRange = [
[0,rect.start[1]+10],
[
rect.start[0]+rect.width-20,
qcanvas.stage.height-50,
]
]
},
mousemove:function(e,pos){
if(qcanvas.dragAim !== null){
h4Move.call(this);
}
},
mouseup:handleMouseup
})
}
createHandler();
}