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.最後運作圖檔如下：