SOURCE

console 命令行工具 X clear

                    
>
console
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;
}

本项目引用的自定义外部资源