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],
width:120,
height:60,
degree:10,
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 = Math.sqrt(Math.pow(Math.abs(pos[0]-point[1].x),2)+Math.pow(Math.abs(pos[1]-point[1].y),2));
//当前拖动点到矩形第四个点的距离
var height = Math.sqrt(Math.pow(Math.abs(pos[0]-point[3].x),2)+Math.pow(Math.abs(pos[1]-point[3].y),2));
console.log(width,height);
rect.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 vrect = qcanvas.qrect.rect({
start:[0,0],
width:100,
height:50,
borderColor:'blue',
dashed:true,
pointerEvent:'none'
})
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();
//锐角
// if(rect.degree >0 && rect.degree <90){
// //对拖动区域做限制
// this.dragRange = [
// [0,0],
// [
// rect.start[0]+rect.width-20,
// rect.start[1]+rect.height-20
// ]
// ]
// }
//点击该点时 相当于创建一个虚拟的rect(命名为vrect),
//该点的中心点就是vrect的start
//它的中心点和rect是一样的
//现在需要换出宽和高即可
var h1_center = this.centerPoints();
var rect_center = rect.centerPoints();
console.log('原rect中心点')
console.log(rect_center)
var start = [h1_center.x,h1_center.y];
//vrect的start到中心点的距离
var dis = Math.sqrt(Math.pow(Math.abs(start[0]-rect_center.x),2)+Math.pow(Math.abs(start[1]-rect_center.y),2));
// var height = Math.sin(this.degree*0.5*Math.PI/180)*dis*2;
var width = Math.cos(this.degree*0.5*Math.PI/180)*dis*2;
var f = [rect_center.x - Math.cos(this.degree*0.5*Math.PI/180)*(width*0.5),rect_center.y - Math.sin(this.degree*0.5*Math.PI/180)*(width*0.5)]
var half_height = Math.sqrt(Math.pow(Math.abs(f[0]-start[0]),2),Math.pow(Math.abs(f[1]-start[1]),2))
console.log('half_height:'+half_height);
console.log('width:'+width);
console.log(dis)
// var vrect = qcanvas.qrect.rect({
// start:start,
// width:width,
// height:half_height*2,
// borderColor:'blue'
// })
vrect.setStart(start).setHeight(half_height*2).setWidth(width);
//把vrect的中心点移动 和原rect中心点重合 那么这时vrect的start就是原rect的角度为0时的start
var vrect_center = vrect.centerPoints();
var dis_x = rect_center.x - vrect_center.x;
var dis_y = rect_center.y - vrect_center.y;
//重置vrect的start width height
vrect.setStart([vrect.start[0] + dis_x,vrect.start[1] + dis_y])
this.oldWidth = width;
this.oldHeight = half_height*2;
},
mousemove:function(e,pos){
if(qcanvas.dragAim !== null){
// h1Move.call(this);
//点击该点时 相当于创建一个虚拟的rect(命名为vrect),
//该点的中心点就是vrect的start
//它的中心点和rect是一样的
//现在需要换出宽和高即可
var h1_center = this.centerPoints();
var rect_center = rect.centerPoints();
var start = [h1_center.x,h1_center.y];
//vrect的start到中心点的距离
var dis = Math.sqrt(Math.pow(Math.abs(start[0]-rect_center.x),2)+Math.pow(Math.abs(start[1]-rect_center.y),2));
// var height = Math.sin(this.degree*0.5*Math.PI/180)*dis*2;
var width = Math.cos(this.degree*0.5*Math.PI/180)*dis*2;
var f = [rect_center.x - Math.cos(this.degree*0.5*Math.PI/180)*(width*0.5),rect_center.y - Math.sin(this.degree*0.5*Math.PI/180)*(width*0.5)]
var half_height = Math.sqrt(Math.pow(Math.abs(f[0]-start[0]),2),Math.pow(Math.abs(f[1]-start[1]),2))
vrect.setStart(start).setHeight(half_height*2).setWidth(width);
//把vrect的中心点移动 和原rect中心点重合 那么这时vrect的start就是原rect的角度为0时的start
var vrect_center = vrect.centerPoints();
var dis_x = rect_center.x - vrect_center.x;
var dis_y = rect_center.y - vrect_center.y;
//重置vrect的start width height
vrect.setStart([vrect.start[0] + dis_x,vrect.start[1] + dis_y])
if(!this.dis_w){
this.dis_w = (vrect.width - this.oldWidth)*0.5;
this.dis_h = (vrect.height - this.oldHeight)*0.5;
}
// console.log('dis_w:'+dis_w);
//重置rect的位置、宽、高
rect.setWidth(this.oldWidth+this.dis_w).setHeight(this.oldHeight+this.dis_h)
// rect.setStart(vrect.start);
}
},
mouseup:function(){
delete this.dis_w;
delete this.dis_h;
}
})
// 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();
}
<canvas id="qcanvas"></canvas>
html,body{
margin: 0;
padding:0
}
canvas{
background: #eee;
}