js 矩形操作代码

等待UFO

只作到一半  先放上来  去公司再看

/*******************************************************************************************************************
商品デザイン関連クラス格納
class Point
       |_Point(x,y)
       |_x
       |_y
      
class Size
       |_Size(w,h)
       |_w
       |_h
      
class BORDER_STYLE

class JdrMath

class Rect
       |_Rect(ptLeftTop,szWidthHeight,strCurId,strParentId,bIsHandle)
       |_getLtPoint()
       |_getLtPointInPage()
       |_getHandle()
       |_isPtInRect()
       |_setLtPoint()
       |_setSize()
       |_setBackground()
       |_show()
       |_hide()
      
class JdrStage
       |_JdrStage(rect)
       |_showRegion()

例：

*******************************************************************************************************************/

//グローバル変数>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
var isIE = false;
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

function dummmmy(param1,param2){
/// <summary>ダミー関数</summary>
/// <param name="param1" type="int">パラメータ１</param>
/// <param name="param2" type="String">パラメータ２</param>
/// <returns type="String" />

    var retStr = "dummy";
    return retStr;
}

//グローバル変数isIE値を設定する
if(document.all) isIE = true;  //IEの場合

var Point = function(x,y){
/// <summary>Pointクラス</summary>
/// <param name="x" type="int">x座標</param>
/// <param name="y" type="int">y座標</param>
/// <returns type="class" />

    this.x = x;
    this.y = y;
}//end class Point

var Size = function(w,h){
/// <summary>Sizeクラス</summary>
/// <param name="w" type="int">幅</param>
/// <param name="h" type="int">高さ</param>
/// <returns type="class" />

    this.w = w;
    this.h = h;
}//end class Size

var BORDER_STYLE = function(){
/// <summary>BORDER_STYLEクラス 枠線のスタイルを定義</summary>
/// <returns type="class" />

    this.HIDDEN = 0;
    this.SOLID = 1;
    this.DASHED = 2;
    this.DOTTED = 3;
}

var Rect = function(ptLeftTop,szWidthHeight,strCurId,strPrantId,bIsHandle,borderStyle){
/// <summary>Rectクラス</summary>
/// <param name="ptLeftTop" type="Point">左上点座標</param>
/// <param name="szWidthHeight" type="Size">矩形サイズ(幅、高さ)</param>
/// <param name="strCurId" type="string">生成される矩形divエレメントのid(空：エレメント不生成)</param>
/// <param name="strPrantId" type="string">親divエレメントのid</param>
/// <param name="bIsHandle" type="boolean">ハンドルフラグ(true:ハンドル；false:普通矩形)</param>
/// <param name="borderStyle" type="BORDER_STYLE">枠線のスタイル</param>
/// <returns type="class" />

    var ptLt = ptLeftTop;      //左上点の座標（親に対する相対座標）
    var szWh = szWidthHeight;  //幅、高さ
   
    var strId = strCurId;      //本エレメントid
    var strPId = strPrantId;
   
    var bIsHnd = bIsHandle;    //ハンドルフラグ(true:ハンドル;false:普通矩形)
    var bdrStyle = borderStyle;  //枠線のスタイル
   
    //RECT表示&#12539;非表示フラグ
    var SR_SHOW = 0;  //表示
    var SR_HIDE = 1;  //非表示
   
    /**
    *初期処理
    *１．親idがある場合、親objを取得する
    *２．本エレメントidがある場合、エレメント生成し、親に追加（親やしの場合、エレメント不生成）
    *
    */
    var init = function(){
        var objPHandle = null;
        
        if(strPId!=null)
            objPHandle = document.getElementById(strPId);
            
        if(objPHandle==null){  //親エレメントobjなし
            return;
        }//end if
        
        if(bIsHnd){  //ハンドルエレメント
            objPHandle.innerHTML += "<div id='" + strId + "' class='JdrRegionHandle'></div>";
        }else{       //普通エレメント
            objPHandle.innerHTML += "<div id='" + strId + "' class='JdrRegion'></div>";
        }//end if
        
        var objHandle = document.getElementById(strId);  //本エレメントobj格納
        if(objHandle==null){
            alert("divエレメント生成失敗。id=" + strId);
            return;
        }//end if
        
        //本エレメントの位置、サイズ設定
        objHandle.style.left = ptLt.x + "px";
        objHandle.style.top = ptLt.y + "px";
        objHandle.style.width = szWh.w + "px";
        objHandle.style.height = szWh.h + "px";
        
        //枠線のスタイル設定
        var tmpBorderStyle = "";
        
        if(bdrStyle==null) bdrStyle = (new BORDER_STYLE()).HIDDEN;
        if(bdrStyle==(new BORDER_STYLE()).HIDDEN){
            tmpBorderStyle = "hidden";
        }else if(bdrStyle==(new BORDER_STYLE()).SOLID){
            tmpBorderStyle = "solid";
        }else if(bdrStyle==(new BORDER_STYLE()).DASHED){
            tmpBorderStyle = "dashed";
        }else if(bdrStyle==(new BORDER_STYLE()).DOTTED){
            tmpBorderStyle = "dotted";
        }else{
            alert("border style設定値エラー！（必ずBORDER_STYLEのメンバーでなければなりません。）");
        }//end if
        
        objHandle.style.borderStyle = tmpBorderStyle;
        
    }//end init()
   
    /**
    *本RECTの位置、サイズなど変更した場合、画面のエレメントオブジェクトを更新する
    *※RECTのプロパーティを変更しても、メモリ上のものだけで、画面の矩形は変化しない。
    *  この関数を呼び出して、画面の矩形を更新する
    */
    var reDraw = function(){
        var objHandle = document.getElementById(strCurId);
        if(objHandle==null){
            return;
        }//end if

        //左上点更新
        objHandle.style.left = ptLt.x;
        objHandle.style.top = ptLt.y;
        
        //サイズを更新
        objHandle.style.width = szWh.w;
        objHandle.style.height = szWh.h;      
        
    }//end reDraw()
   
    /**
    *本RECTの表示&#12539;非表示処理
    *@param flg 表示&#12539;非表示フラグ
    *             SR_SHOW: 表示
    *             SR_HIDE: 非表示
    */
    var showRect = function(flg){
        
        var objHandle = null;
        
        //エレメントのinnerHTML操作したらアドレスが不定？な場合がある
        if(strCurId!=null){
            objHandle = document.getElementById(strCurId);
        }//end if
        
        if(objHandle==null)
            return;
        
        if(flg==SR_SHOW){
            objHandle.style.display = "inline";
        }else if(flg==SR_HIDE){
            objHandle.style.display = "none";
        }else{
            alert("showRect(flg:boolean)呼び出しエラー flg=" + flg);
            return;
        }//end if
    }//end showRect()
   
    /**
    *本RECTの左上点座標(親に対しての相対座標)を取得する
    *@returns Point
    */
    this.getLtPoint = function(){
        return ptLt;
    }//end getLtPoint()
   
    /**
    *本RECTの左上点座標（ページに対しての相対座標）を取得する
    *@returns Point ページの左上点を(0,0)として座標
    */
    this.getLtPointInPage = function(){
        var objHandle = document.getElementById(strCurId);
        if(objHandle==null)
            return null;
        
        var tmpEle = objHandle;
        var x = 0, y = 0;
        
        while(tmpEle){  //トップエレメント(document)にぶつかるまでループ
            x += tmpEle.offsetLeft;
            y += tmpEle.offsetTop;
            
            tmpEle = tmpEle.offsetParent;  //親obj代入
        }//end while
        
        var ptRet = new Point(x,y);
        return ptRet;
    }//end getLtPointInPage()
   
    /**
    *本RECTのサイズ（幅、高さ）を取得する
    *@returns Size
    */
    this.getSize = function(){
        return szWh;
    }//end getSize()
   
    /**
    *本RECTオブジェクト(画面エレメント)のハンドルを取得する
    */
    this.getHandle = function(){
        var objHandle = null;
        if(strCurId!=null)
            objHandle = document.getElementById(strCurId);
            
        return objHandle;
    }//end getHandle()
   
    this.getCurId = function(){
        return strCurId;
    }//end getCurId
   
    this.getPHandle = function(){
        var objPHandle = null;
        if(strPId!=null)
            objPHandle = document.getElementById(strPId);
            
        return objPHandle;
    }//end getPHandle
   
    /**
    *指定されたポイントが本RECT内にあるかどうかをチェック
    *@param   pt 指定Pointオブジェクト（相対座標）
    *@returns boolean true:指定Pointが本RECT内にある;
    *                 false:指定Pointが本RECT内にない
    */
    this.isPtInRect = function(pt){
        var bRet = false;
        
        if((pt.x>=ptLt.x && pt.x<=ptLt.x+szWh.w) &&  //x軸で範囲内
            (pt.y>=ptLt.y && pt.y<=ptLt.y+szWh.h)){  //y軸で範囲内
            
            bRet = true;
        }else{
            bRet = false;
        }//end if
        
        return bRet;
    }//end ptInRect()
   
    /**
    *本RECTの左上点座標を設定する
    *@param pt Pointオブジェクト
    */
    this.setLtPoint = function(pt){
        ptLt = pt;
        
        reDraw();
    }//end setLtPoint()
   
    /**
    *本RECTのサイズを設定する
    *@param sz Sizeオブジェクト
    */
    this.setSize = function(sz){
        szWh = sz;
        
        reDraw();
    }//end setSize()
   
    /**
    *本RECTの背景画像、色を設定する
    *※　背景画像優先
    *@param strImgPath  背景画像パス
    *@param strClrCode  背景色
    */
    this.setBackground = function(strImgPath,strClrCode){
        var objHandle = null;
        if(strCurId!=null)
            objHandle = document.getElementById(strCurId);
            
        if(objHandle==null)
            return;

        if(strImgPath!=null && strImgPath.length>0){  //背景画像設定
            objHandle.style.backgroundImage = strImgPath;
            
            return;
        }//end if
        
        if(strClrCode!=null && strClrCode.length>0){  //背景色設定
            objHandle.style.backgroundColor = strClrCode;
            
            return;
        }//end if
    }//end setBackground()
   
    /**
    *本RECTを表示
    */
    this.show = function(){
        showRect(SR_SHOW);
    }//end shou()
   
    /**
    *本RECTを非表示
    */
    this.hide = function(){
        showRect(SR_HIDE);
    }//end hide()
   
   
    //初期処理
    init();
}//end class Rect

var JdrMath = function(){
/// <summary>Mathクラス:いろいろ数学計算関数を提供する</summary>
/// <returns type="class" />

    this.getTarSize = function(szSrc,szTarMax){
    /// <summary>szSrcを比例保持でszTarMaxに嵌める場合の幅、高さを取得する</summary>
    /// <param name="szSrc" type="Size">変換元サイズ</param>
    /// <param name="szTarMax" type="Size">変換先のマックスサイズ</param>
    /// <returns type="Size">変換元サイズの比例維持で、再計算された目標サイズ</returns>
   
        var retSize = new Size(0,0);
        
        return retSize;
    }//end getTarSize()
}//end class JdrMath

var JdrStage = function(rect){
/// <summary>JdrStageクラス</summary>
/// <param name="rect" type="Rect">stageを構成するRECTオブジェクト</param>
/// <returns type="class" />

    var stageRect = rect;  //本ステージRect
   
    var jregion = null;        //リージョン矩形(デザイン矩形）のRECTオブジエェクと
    var rgnIsShowed = false;  //リージョン表示済みフラグ(true:表示済み;false:非表示中)
   
    var handleRects = [];  //ハンドルRECT格納配列
    var handlShowed = false;  //ハンドル表示済みフラグ(true:表示中；false:非表示中）
    var canHandle = true;     //ハンドル操作可否フラグ(true:可;false:否)
   
    /**
    *ハンドル矩形の位置を計算、設定する
    */
    var calcPosOfHandle = function(){
        if(canHandle==false)
            return;
        
        //ハンドル矩形の位置計算
        if(jregion==null){  //リージョンRECTなし
            return;
        }//end if
        
        var tmpPt = jregion.getLtPoint();
        var tmpSz = jregion.getSize();
        
        //alert("x" + tmpPt.x + "   y" + tmpPt.y + "   w" + tmpSz.w + "    h" + tmpSz.h);
        
        //ハンドルの位置順は左上からCW順(tl,t,tr,r,br,b,bl,l)
        var tmpObj = handleRects[0];  //tl

        tmpObj.setLtPoint(new Point(tmpPt.x-3,tmpPt.y-3));
        tmpObj.setSize(new Size(6,6));
        
        tmpObj = handleRects[1];  //t
        tmpObj.setLtPoint(new Point(tmpPt.x+tmpSz.w/2-3,tmpPt.y-3));
        tmpObj.setSize(new Size(6,6));
        
        tmpObj = handleRects[2];  //tr
        tmpObj.setLtPoint(new Point(tmpPt.x+tmpSz.w-3,tmpPt.y-3));
        tmpObj.setSize(new Size(6,6));
        
        tmpObj = handleRects[3];  //r
        tmpObj.setLtPoint(new Point(tmpPt.x+tmpSz.w-3,tmpPt.y+tmpSz.h/2-3));
        tmpObj.setSize(new Size(6,6));
        
        tmpObj = handleRects[4];  //br
        tmpObj.setLtPoint(new Point(tmpPt.x+tmpSz.w-3,tmpPt.y+tmpSz.h-3));
        tmpObj.setSize(new Size(6,6));
        
        tmpObj = handleRects[5];  //b
        tmpObj.setLtPoint(new Point(tmpPt.x+tmpSz.w/2-3,tmpPt.y+tmpSz.h-3));
        tmpObj.setSize(new Size(6,6));
        
        tmpObj = handleRects[6];  //bl
        tmpObj.setLtPoint(new Point(tmpPt.x-3,tmpPt.y+tmpSz.h-3));
        tmpObj.setSize(new Size(6,6));
        
        tmpObj = handleRects[7];  //l
        tmpObj.setLtPoint(new Point(tmpPt.x-3,tmpPt.y+tmpSz.h/2-3));
        tmpObj.setSize(new Size(6,6));
    }//end calcPosOfHandle
   
    /**
    *ハンドル矩形の表示&#12539;非表示処理
    *@param swFlg  true:表示;false:非表示
    */
    var showHandles = function(swFlg){
        if(canHandle==false && swFlg==true){
            //canHandleがfalseの場合、ハンドル表示処理は無効
            return;
        }//end if
        
        var tmpObj = null;
        for(iLoop=0;iLoop<8;iLoop++){
            tmpObj = handleRects[iLoop];
            if(tmpObj==null) continue;
            
            if(swFlg){
                tmpObj.show();
                handlShowed = true;
            }else{
                tmpObj.hide();
                handlShowed = false;
            }//end if
        }//end for
    }//end if
   
    var init = function(){
        //リージョン領域
        jregion = new Rect(new Point(10,10),new Size(30,30),"jdrDesignRgn",stageRect.getCurId(),false,new BORDER_STYLE().DASHED);
        
        //リージョン操作ハンドル矩形生成(6X6固定)
        var tmpHndl = null;
        for(iLoop=0;iLoop<8;iLoop++){
            tmpHndl = new Rect(new Point(50,50),new Size(6,6),"hndl"+iLoop,stageRect.getCurId(),true,new BORDER_STYLE().SOLID);
            handleRects[iLoop] = tmpHndl;
        }//end for
        
        calcPosOfHandle();  //ハンドルの位置再計算
        
    }//end init()
   
    /*
    *該当ステージのリージョン（デザイン枠）を表示&#12539;非表示する
    *@param swFlg 表示&#12539;非表示フラグ(true:表示;false:非表示)
    */
    this.showRegion = function(swFlg,rgnRect){
        if(swFlg==true){
            if(rgnRect!=null){  //リージョン指定有り
                //リージョン位置を設定する               
                jregion.setLtPoint(rgnRect.getLtPoint());               
                jregion.setSize(rgnRect.getSize());
               
                calcPosOfHandle();
            }//end if
            
            jregion.show();
            rgnIsShowed = true;
            
            showHandles(true);
        }else if(swFlg==false){
            jregion.hide();
            rgnIsShowed = false;
            
            showHandles(false);
        }else{
            alert("JdrStage.showRegion(boolean)呼び出しエラー。");
            return ;
        }//end if
    }//end showRegion()
   
    //初期処理
    init();
}//end class JdrStage

等待UFO

对这个矩形框的操作  要可以任意方向放大，缩小  移动位置   每当矩形框移动，大小发生改变的时候 要触发相应事件来通知用户  。。。
只做到静态部分  动态部分今天是完不成了

发现js鼠标事件很麻烦  。。。   哎。。。

xuelei

有图形处理 api  为什么要自己写呢？

等待UFO

实际工作上   有现成的能用就用   这个只是闲来练手用的

等待UFO

而且  提供的api如果恰好满足要求  那么很幸运  直接拿来主义  省时省力气   但是  有的时候  别人提供的东西就是没有你非常想要的功能。。。  那时候 就只能自己写了   所以  万事不能光依靠人家提供的东西