Raphael 制作可拖动和能放大缩小的矩形

Raphael 制作可拖动和能放大缩小的矩形

其原理是在大矩形的右下角画一个小矩形 ，当拖动小矩形时改变大矩形的宽度和高度 ，同时对小矩形予以重新定位。

具体代码如下：

1.页面的javascript代码：

<script type="text/javascript">

    /*
    * 画矩形
    * params:画布,外部矩形横坐标,外部矩形纵坐标,外部矩形的宽,外部矩形的高,内部矩形的宽，内部矩形的高
    */
    function EntityBar(paper, startX , startY , outW, outH , inW ,inH , outBorderSize){

        //创建内部矩形
        var inRect = paper.rect(startX+outW-inW, startY+outH-inH , inW-outBorderSize , inH-outBorderSize).attr({"fill":"white","stroke":"#fff",'stroke-width':'0'}).drag(inMove,inStartMove,inEndMove).toBack(); //toBack将元素向下移动。
        //创建外部矩形
        var outRect = paper.rect(startX, startY , outW , outH).attr({'fill':'white', 'stroke':'#666','stroke-width':outBorderSize}).drag(outMove, outStartMove,outEndMove).data("cooperative", inRect).toBack();
        
        /*
        * 定义拖动外部矩形的开始移动，移动和结束移动事件
        * 注：dx：相对起始点的x位移,dy:相对起始点的y位移,x:鼠标的 x轴位置,y:鼠标的 y轴位置,event:DOM事件对象,e.clientX:当前鼠标x坐标,e.clientY：当前鼠标Y坐标
        */
        function outStartMove(dx,dy){
            //为元素(外部矩形outRect)自定义属性并赋值
            this.tempx = this.attr("x");
            this.tempy = this.attr("y");     
        }
        function outMove(dx,dy,x,y){
            //拖动外部矩形时改变外部矩形的位置
            var attr = {'x': this.tempx + dx, 'y': this.tempy + dy ,'cursor':'move'};
            this.attr(attr);
            
            //获取存放的数据对象
            var temp_rect = this.data("cooperative");
            //拖动外部矩形时改变内部矩形的位置
            var temp_attr = {x: this.tempx + dx + this.attr("width") -inW, y: this.tempy + dy + this.attr("height") -inH };
            temp_rect.attr(temp_attr);
        }
        function outEndMove(){
            this.animate({"fill-opacity": 1}, 300);
        }
        
        //对内部矩形的操作
        var beforeMoveX_in = 0;//拖动内部矩形之前内部矩形的X坐标点
        var beforeMoveY_in = 0;//拖动内部矩形之前内部矩形的Y坐标点
        var beforeMoveW_out = 0;//拖动内部矩形之前外部矩形的宽度
        var beforeMoveH_out = 0;//拖动内部矩形之前外部矩形的高度
        
        /*
        * 定义拖动内部矩形的开始移动，移动和结束移动事件
        */
        function inStartMove(){
            //为当前元素(矩形inRect)自定义属性并赋值
            this.mx = this.attr("x");
            this.my = this.attr("y");
            
            //获取内部矩形拖动之前的x坐标并赋值给变量beforeMoveX_in
            beforeMoveX_in = this.attr("x");
            //获取内部矩形拖动之前的y坐标并赋值给变量beforeMoveY_in
            beforeMoveY_in = this.attr("y");
            
            //获取内部矩形拖动之前外部矩形的宽度
            beforeMoveW_out = outRect.attr("width");
            //获取内部矩形拖动之前外部矩形的高度
            beforeMoveH_out = outRect.attr("height");
            
        }
        function inMove(dx,dy,x,y){
            //当拖动内部矩形时，改变外部矩形的宽高
            outRect.attr({
                //'width' : x - startX,
                //'height' : y - startY
                'width' : beforeMoveW_out + dx,//拖动后的宽度 = 拖动前的宽度 + x轴的位移
                'height' : beforeMoveH_out + dy//拖动后的高度 = 拖动前的高度 + y轴的位移
            });
            //对内部矩形重新定位
            this.attr('x',x - inW);
            this.attr('y',y - inH);
            
            $("#bar_x").val(beforeMoveW_out + dx);
            $("#bar_y").val(beforeMoveH_out + dy);
            
        }
        function inEndMove(e){
            //拖动结束时，重新改变外部矩形的宽高
            outRect.attr({
                'width' : beforeMoveW_out + (e.clientX-beforeMoveX_in)-inW,
                'height' : beforeMoveH_out + (e.clientY-beforeMoveY_in)-inH
            });
        }
        
        //改变鼠标悬浮的状态
        outRect.hover(function(){
            this.attr('cursor','move');
        },function(){});
        inRect.hover(function(){
            this.attr('cursor','se-resize');
        },function(){});
    }
    
    //同时可以拖动矩形的右下角对矩形进行放大或缩小
    //其原理是在大矩形的右下角画一个小矩形 当拖动小矩形时改变大矩形的宽度和高度 同时对小矩形予以重新定位
    window.onload = function(){
        var paper = Raphael("holder", 620, 420),discattr={fill:"red", stroke:"none"};
        //画布,外部矩形横坐标,外部矩形纵坐标,外部矩形的宽,外部矩形的高,内部矩形的宽，内部矩形的高,外部矩形的边框大小
        var entity1 = new EntityBar(paper, 20, 50, 100, 160,10,10,1);
    };
</script> 

代码中有很详细的注释，就不多说。

2.html页面body中：

<div id="holder" style="border:1px #0000FF solid;width:620px;"> 
</div> 
<div>
	bar的长是：<input type="text" value="0" id="bar_x" />px<br>
	bar的宽是：<input type="text" value="0" id="bar_y" />px
</div>

3.最后运行图片如下：